@import '../../_variables.scss';
@import '../../_logical.scss';

.tab-switcher {
  display: flex;

  .tab-icon {
    margin-block: 0.2em;
    margin-inline: auto;
    display: block;
  }

  &.top-tabs {
    flex-direction: column;

    > .tabs {
      inline-size: 100%;
      @include overflow-block(hidden);
      @include overflow-inline(auto);
      padding-block-start: 5px;
      flex-direction: row;

      &::after, &::before {
        content: '';
        flex: 1 1 auto;
        border-block-end: 1px solid;
        border-block-end-color: $fallback--border;
        border-block-end-color: var(--border, $fallback--border);
      }

      .tab-wrapper {
        block-size: 2em;

        &:not(.active)::after {
          inset-inline-start: 0;
          inset-inline-end: 0;
          inset-block-end: 0;
          border-block-end: 1px solid;
          border-block-end-color: $fallback--border;
          border-block-end-color: var(--border, $fallback--border);
        }
      }
      .tab {
        inline-size: 100%;
        min-inline-size: 1px;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        padding-block-end: 99px;
        margin-block-end: 6px - 99px;
      }
    }
    .contents.scrollable-tabs {
      flex-basis: 0;
    }
  }

  &.side-tabs {
    flex-direction: row;

    @media all and (max-width: 800px) {
      @include overflow-inline(auto);
    }
    @media all and (max-height: 800px) {
      [class^=#{$writing-mode-vertical}] & {
        @include overflow-inline(auto);
      }
    }

    > .contents {
      flex: 1 1 auto;
    }

    > .tabs {
      flex: 0 0 auto;
      @include overflow-block(auto);
      @include overflow-inline(hidden);
      flex-direction: column;

      &::after, &::before {
        flex-shrink: 0;
        flex-basis: .5em;
        content: '';
        border-inline-end: 1px solid;
        border-inline-end-color: $fallback--border;
        border-inline-end-color: var(--border, $fallback--border);
      }

      &::after {
        flex-grow: 1;
      }

      &::before {
        flex-grow: 0;
      }

      .tab-wrapper {
        min-inline-size: 10em;
        display: flex;
        flex-direction: column;

        @media all and (max-width: 800px) {
          min-inline-size: 4em;
        }
        @media all and (max-height: 800px) {
          [class^=#{$writing-mode-vertical}] & {
            min-inline-size: 4em;
          }
        }

        &:not(.active)::after {
          inset-block-start: 0;
          inset-inline-end: 0;
          inset-block-end: 0;
          border-inline-end: 1px solid;
          border-inline-end-color: $fallback--border;
          border-inline-end-color: var(--border, $fallback--border);
        }

        &::before {
          flex: 0 0 6px;
          content: '';
          border-inline-end: 1px solid;
          border-inline-end-color: $fallback--border;
          border-inline-end-color: var(--border, $fallback--border);
        }

        &:last-child .tab {
          margin-block-end: 0;
        }
      }

      .tab {
        flex: 1;
        box-sizing: content-box;
        min-inline-size: 10em;
        min-inline-size: 1px;
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        padding-inline-start: 1em;
        padding-inline-end: calc(1em + 200px);
        margin-inline-end: -200px;
        margin-inline-start: 1em;

        @media all and (max-width: 800px) {
          padding-inline-start: .25em;
          padding-inline-end: calc(.25em + 200px);
          margin-inline-end: calc(.25em - 200px);
          margin-inline-start: .25em;
          .text {
            display: none
          }
        }
        @media all and (max-height: 800px) {
          [class^=#{$writing-mode-vertical}] & {
            padding-inline-start: .25em;
            padding-inline-end: calc(.25em + 200px);
            margin-inline-end: calc(.25em - 200px);
            margin-inline-start: .25em;
            .text {
              display: none
            }
          }
        }
      }
    }
  }

  .contents {
    flex: 1 0 auto;
    min-block-size: 0px;

    .hidden {
      display: none;
    }
    .full-height:not(.hidden) {
      block-size: 100%;
      display: flex;
      flex-direction: column;
      > *:not(.mobile-label) {
        flex: 1;
      }
    }

    &.scrollable-tabs {
      @include overflow-block(auto);
    }
  }

  .tab {
    position: relative;
    white-space: nowrap;
    padding-block: 6px;
    padding-inline: 1em;

    &:not(.active) {
      z-index: 4;

      &:hover {
        z-index: 6;
      }
    }

    &.active {
      background: transparent;
      z-index: 5;
      color: $fallback--text;
      color: var(--tabActiveText, $fallback--text);
    }

    img {
      max-block-size: 26px;
      vertical-align: top;
      margin-block-start: -5px;
    }
  }

  .tabs {
    display: flex;
    position: relative;
    box-sizing: border-box;

    &::after, &::before {
      display: block;
      flex: 1 1 auto;
    }
  }

  .tab-wrapper {
    position: relative;
    display: flex;
    flex: 0 0 auto;

    &:not(.active) {
      &::after {
        content: '';
        position: absolute;
        z-index: 7;
      }
    }
  }

  .mobile-label {
    padding-inline-start: .3em;
    padding-block-end: .25em;
    margin-block-start: .5em;
    margin-inline-start: .2em;
    margin-block-end: .25em;
    border-block-end: 1px solid var(--border, $fallback--border);

    @media all and (min-width: 800px) {
      display: none;
    }
    @media all and (min-height: 800px) {
      [class^=#{$writing-mode-vertical}] & {
        display: none;
      }
    }
  }
}
