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

.cds-tab-btn {
  $this: &;

  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
  color: var(--gray-400);
  border-radius: 6px;
  cursor: pointer;
  background-color: var(--base-white);

  &:hover,
  &.is-active {
    color: var(--secondary-gray-blue-500);
  }

  // size
  // =========================================

  &--xs {
    padding: 5px 12px;
    height: 32px;
    font-size: var(--font-size-1);
    line-height: calc(var(--line-heights-9) / var(--font-size-1));
  }

  &--sm {
    padding: 8px 12px;
    height: 38px;
    font-size: var(--font-size-1);
    line-height: calc(var(--line-heights-9) / var(--font-size-1));
  }

  &--md {
    padding: 10px 14px;
    height: 44px;
    font-size: var(--font-size-2);
    line-height: calc(var(--line-height-5) / var(--font-size-2));
  }

  // modifier
  // .cds-tab-btn--primary
  // =========================================
  &--primary {
    &:hover,
    &.is-active {
      background-color: var(--gray-50);
    }

    &:focus {
      box-shadow: var(--focus-ring-4px-gray-100);
    }
  }

  // modifier
  // .cds-tab-btn--white
  // =========================================
  &--white {
    &:hover {
      box-shadow: var(--shadow-sm);
      background-color: inherit;
    }

    &.is-active {
      color: var(--gray-500);
      box-shadow: var(--shadow-sm);

      &:focus {
        box-shadow: var(--shadow-sm-focused-4px-gray-100);
      }
    }
  }

  // modifier
  // .cds-tab-btn--underline-fill
  // =========================================
  &--underline-fill {
    border-radius: 0;

    &.is-active,
    &.is-active:focus {
      @include abstract.relative();
      background-color: var(--gray-50);
    }

    &:hover,
    &.is-active,
    &.is-active:focus {
      &::before {
        @include abstract.absolute($bottom: 0, $left: 0);

        width: 100%;
        height: 2px;
        content: '';
        background-color: var(--secondary-gray-blue-500);
      }
    }
  }

  // modifier
  // .cds-tab-btn--underline
  // =========================================
  &--underline {
    padding-inline: 6px;
    border-radius: 0;

    &:hover,
    &.is-active {
      @include abstract.relative();

      &::before {
        @include abstract.absolute($bottom: 0, $left: 0);
        width: 100%;
        height: 2px;
        content: '';
        background-color: var(--secondary-gray-blue-500);
      }
    }
  }

  // modifier
  // .cds-tab-btn--line-vertical
  // =========================================
  &--line-vertical {
    border-radius: 0;

    &:hover,
    &.is-active,
    &.is-active:focus {
      box-shadow: -2px 0 var(--secondary-gray-blue-500);
    }
  }
}