@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$tab-nav: () !default;
$tab-nav: map.merge(
  (
    d-color: value('border-color-light-2'),
    color: value('content-color-base'),
    color-hover: value('color-primary-base'),
    color-active: value('tab-nav-color-hover'),
    color-disabled: value('content-color-disabled'),
    card-color: value('tab-nav-color'),
    card-color-hover: value('tab-nav-color-hover'),
    card-color-active: value('tab-nav-color-active'),
    card-color-disabled: value('tab-nav-color-disabled'),
    card-bg-color: value('fill-color-background'),
    card-bg-color-active: transparent,
    card-bg-color-disabled: value('tab-nav-card-bg-color'),
    card-b-color: value('tab-nav-d-color'),
    card-b-color-active: value('tab-nav-color-active'),
    card-b-color-disabled: value('tab-nav-card-b-color'),
    card-radius: value('radius-base'),
    item-pad-size: 4px,
    marker-bg-color: value('tab-nav-color-active'),
    marker-size: 2px,
    v-padding: 8px,
    h-padding: 16px
  ),
  $tab-nav
);

.#{$namespace}-tab-nav {
  &-vars {
    @include define-preset-values('tab-nav', $tab-nav);
  }

  @include basis {
    position: relative;
    display: flex;
    align-items: stretch;
    background-color: transparent;
    outline: 0;
  }

  &--right,
  &--left {
    display: inline-flex;
    flex-direction: column;
  }

  &__scroll {
    display: flex;
  }

  &--right &__scroll,
  &--left &__scroll {
    display: inline-flex;
    flex-direction: column;
  }

  &__list {
    position: relative;
    display: flex !important;
    flex-direction: row;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  &--right &__list,
  &--left &__list {
    display: inline-flex;
    flex-direction: column;
  }

  &__extra {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    border: 0 solid value('tab-nav-d-color');

    &--suffix {
      flex: 1 0 auto;
      justify-content: flex-end;
    }
  }

  &--align-center &__extra {
    flex: 1 0 auto;
  }

  &--align-right &__extra {
    flex: 1 0 auto;

    &--suffix {
      flex: 0 0 auto;
    }
  }

  &__prefix,
  &__suffix {
    padding: value('tab-nav-v-padding') value('tab-nav-h-padding');
  }

  &--top &__prefix,
  &--bottom &__prefix {
    padding-inline-start: 3px;
  }

  &--top &__suffix,
  &--bottom &__suffix {
    padding-inline-end: 3px;
  }

  &__item {
    display: flex;
  }

  &--right &__item,
  &--left &__item {
    flex-direction: column;
  }

  &__content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: value('tab-nav-v-padding') value('tab-nav-h-padding');
    color: value('tab-nav-color');
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border: 0 solid value('tab-nav-d-color');
    outline: 0;
    transition: value('transition-color');

    &:hover,
    &:focus {
      color: value('tab-nav-color-hover');
    }

    &--active {
      &,
      &:hover,
      &:focus {
        color: value('tab-nav-color-active');
      }
    }

    &--disabled {
      &,
      &:hover,
      &:focus {
        color: value('tab-nav-color-disabled');
        cursor: not-allowed;
      }
    }
  }

  $content-radius: value('tab-nav-card-radius');

  &--card &__content {
    color: value('tab-nav-card-color');
    background-color: value('tab-nav-card-bg-color');
    border: value('border-shape') value('tab-nav-card-b-color');
    transition:
      value('transition-color'), value('transition-background'), value('transition-border');

    &:hover,
    &:focus {
      color: value('tab-nav-card-color-hover');
    }

    &--active {
      &,
      &:hover,
      &:focus {
        color: value('tab-nav-card-color-active');
        background-color: value('tab-nav-card-bg-color-active');
        border-color: value('tab-nav-card-b-color-active');
      }
    }

    &--disabled {
      &,
      &:hover,
      &:focus {
        color: value('tab-nav-card-color-disabled');
        background-color: value('tab-nav-card-bg-color-disabled');
        border-color: value('tab-nav-card-b-color-disabled');
      }
    }
  }

  &__add {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    line-height: inherit;
    color: value('tab-nav-color');
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 0 solid value('tab-nav-d-color');
    outline: 0;
    transition: value('transition-color');

    &:hover,
    &:focus {
      color: value('tab-nav-color-hover');
    }
  }

  &--card &__add {
    color: value('tab-nav-card-color');
    background-color: value('tab-nav-card-bg-color');
    border: value('border-shape') value('tab-nav-card-b-color');

    &:hover,
    &:focus {
      color: value('tab-nav-card-color-hover');
    }
  }

  &__pad {
    display: none;
    width: value('tab-nav-item-pad-size');
    pointer-events: none;
    border: 0 solid value('tab-nav-d-color');
  }

  &--card &__pad {
    display: block;
  }

  &--right &__pad,
  &--left &__pad {
    width: auto;
    height: value('tab-nav-item-pad-size');
  }

  &__item:nth-child(1) &__pad {
    display: none;
  }

  &__track {
    position: absolute;
    pointer-events: none;
    transition:
      top value('transition-base'),
      left value('transition-base'),
      width value('transition-base'),
      height value('transition-base');
  }

  $card: #{&}--card;
  $extra: #{&}__extra;
  $content: #{&}__content;
  $add: #{&}__add;
  $pad: #{&}__pad;
  $track: #{&}__track;

  &--top {
    #{$extra},
    #{$content},
    #{$add},
    #{$pad} {
      border-bottom-width: 1px;
    }

    &#{$card} {
      #{$content} {
        &--active {
          &,
          &:hover,
          &:focus {
            border-bottom-color: transparent;
          }
        }
      }

      #{$content},
      #{$add} {
        @include logical-radius($content-radius $content-radius 0 0);
      }
    }

    #{$track} {
      bottom: 0;
      width: 70px;
    }
  }

  &--right {
    #{$extra},
    #{$content},
    #{$add},
    #{$pad} {
      border-inline-start-width: 1px;
    }

    &#{$card} {
      #{$content} {
        &--active {
          &,
          &:hover,
          &:focus {
            border-inline-start-color: transparent;
          }
        }
      }

      #{$content},
      #{$add} {
        @include logical-radius(0 $content-radius $content-radius 0);
      }
    }

    #{$track} {
      left: 0;
      height: 70px;
    }
  }

  &--bottom {
    #{$extra},
    #{$content},
    #{$add},
    #{$pad} {
      border-top-width: 1px;
    }

    &#{$card} {
      #{$content} {
        &--active {
          &,
          &:hover,
          &:focus {
            border-top-color: transparent;
          }
        }
      }

      #{$content},
      #{$add} {
        @include logical-radius(0 0 $content-radius $content-radius);
      }
    }

    #{$track} {
      top: 0;
      width: 70px;
    }
  }

  &--left {
    #{$extra},
    #{$content},
    #{$add},
    #{$pad} {
      border-inline-end-width: 1px;
    }

    &#{$card} {
      #{$content} {
        &--active {
          &,
          &:hover,
          &:focus {
            border-inline-end-color: transparent;
          }
        }
      }

      #{$content},
      #{$add} {
        @include logical-radius($content-radius 0 0 $content-radius);
      }
    }

    #{$track} {
      right: 0;
      height: 70px;
    }
  }

  &__marker {
    width: 100%;
    height: value('tab-nav-marker-size');
    background-color: value('tab-nav-marker-bg-color');
  }

  &--right &__marker,
  &--left &__marker {
    width: value('tab-nav-marker-size');
    height: 100%;
  }

  &__icon {
    margin-inline-end: 4px;
  }

  &__close {
    position: relative;
    inset-inline-start: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-inline-start: -2px;
    color: inherit;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    outline: 0;
    transition: value('transition-background');

    &:hover,
    &:focus {
      background-color: value('color-primary-opacity-9');
    }
  }
}