@import 'mixins/common';
@import 'mixins/tabset';

.wc-tabset {
  @include flex($direction: column);
}

[role='tablist'] {
  @include flex; // the tablist display model
  position: relative;
  top: $wc-border-width;

  > [role] + [role] {
    margin-left: $wc-gap-small;
  }

  // ACCORDION
  &[aria-multiselectable] {
    @include flex-direction(column);
    position: static;

    > [role] + [role] {
      @include border($pos: top, $width: 0);
      margin-left: 0;
    }
  }

  @if ($wc-tabset-allow-left-right == 1) {
    // LEFT or RIGHT
    &[aria-orientation='vertical'] {
      @include flex-direction(column);
      max-width: $wc-tabset-left-right-tab-width;
      top: 0;

      > [role] + [role] {
        margin-left: 0;
        margin-top: $wc-gap-small;
      }

      > [aria-selected='true'] {
        @include border($pos: bottom);
      }
    }
  }
}

[role='tab'] {
  @include fit-content($what: min-height);
  @include padded-box;
  overflow: hidden;

  // accordion tabs are expanded, others are aria-selected.
  &[aria-selected] {
    @include wc-ui-tabset-top-border-radius;
  }

  &[aria-selected='true'] {
    @include border($pos: bottom, $width: 0);
  }
}

[role='tabpanel'] {
  @include padded-box;
  @include flex-grow(1);
}

@if ($wc-use-respond == 1 and $wc-gap-reduce-when-narrow == 1) {
  @include respond-phonelike {
    // Do not make role='tab' smaller because the padding is part of the hit zone.
    [role='tabpanel'] {
      padding: $wc-phone-gap-normal;
    }
  }
}

@if ($wc-tabset-allow-left-right == 1) {
  .wc-tabset-type-left {
    @include flex-direction(row);

    > [role='tablist'] {
      left: $wc-border-width;

      [role='tab'] {
        @include wc-ui-tabset-left-border-radius;

        &[aria-selected='true'] {
          @include border($pos: right, $width: 0);
        }
      }
    }
  }

  .wc-tabset-type-right {
    @include flex-direction(row-reverse);

    > [role='tablist'] {
      right: $wc-border-width;

      [role='tab'] {
        @include wc-ui-tabset-right-border-radius;
        text-align: right;

        &[aria-selected='true'] {
          @include border($pos: left, $width: 0);
        }
      }
    }
  }

  .wc-tabset-type-left,
  .wc-tabset-type-right {
    &[data-wc-converted] {
      @include flex-direction(column);

      > [role='tablist'] {
        left: 0;
        right: 0;

        [role='tab'] {
          border-radius: 0;
          text-align: left;
        }
      }
    }
  }
}

@import 'wc.tabset.color';
