@use "../../atoms/buttons";

@mixin tab($darkmode: false) {

  .advantages-and-specialabilities {
    display: flex;
    height: unset;
    gap: 8px;
  }

  .advantages, .special-abilities, .flaws {
    margin-bottom: 16px;

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      text-indent: 0;

      li {
        display: inline-block;
      }

      .advantage, .special-ability, .flaw {
        position: relative;
        margin-left: 0;
        margin-bottom: 4px;
        @include buttons.pill-button($color: rgb(0, 128, 0), $button-color: gold);

        span {
          position: relative;
          z-index: 2;
          line-height: 24px;
          vertical-align: middle;
        }

        &.special-ability {
          @include buttons.pill-button($color: rgb(128, 0, 96), $button-color: gold);
        }

        & + .advantage, & + .special-ability {
          margin-left: 8px;
        }

        &.flaw {
          position: relative;
          margin-left: 24px;

          .die {

            path {
              fill: #6a24d8ff;
            }

            position: absolute;
            left: -24px;

            height: 24px;
            width: 24px;
          }

          @include buttons.pill-button($color: rgb(106, 36, 216), $button-color: gold);
        }

        &.disadvantage {
          font-style: italic;
          @include buttons.pill-button($color: rgb(128, 0, 0), $button-color: gold);
        }
      }
    }

  }
}

.dsa41.actor.character.standalone.advsf {
  @include tab;

  .advantages-and-specialabilities {
    flex-direction: column;
  }
}
