@use '../../base/variable';
@use '../../abstract';

.cds-horizontal-tab {
  $this: &;
  @include abstract.relative();
  overflow-x: auto;

  &__item {
    width: auto !important;
  }

  &--underline,
  &--underline-fill {
    &::after {
      @include abstract.absolute($bottom: 0, $left: 0);

      width: 100%;
      height: 1px;
      content: '';
      background-color: var(--gray-100);
    }
  }

  :where(&--underline, &--underline-fill) {
    .cds-tab-btn {
      background-color: transparent;
    }
  }

  &--white {
    padding: 4px;
    border: 1px solid var(--gray-100);
    border-radius: 8px;
    background-color: var(--gray-50);
  }

  &--button-white-border {
    display: inline-block;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 8px;

    .swiper-slide {
      padding: 4px 0;
      margin-right: 8px;

      &:first-child {
        padding-left: 4px;
      }

      &:last-child {
        padding-right: 4px;
        margin-right: 0;
      }
    }

    .cds-tab-btn {
      background-color: var(--gray-50);
      padding: 5px 12px;

      &:hover,
      &.is-active {
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
        color: var(--gray-500);
      }
    }
  }

  &--fullWidth {
    width: 100%;

    .swiper-slide {
      flex-shrink: 1;
    }

    .cds-horizontal-tab__item {
      width: 100% !important;
    }
  }
}