@import "tailwindcss/theme";
@import "../variables/theme.css";

.tab {
  @apply pointer-events-none relative z-0 overflow-hidden bg-white;

  height: 49px;

  @variant lg {
    height: 52px;
  }

  @variant pointer-coarse {
    touch-action: pan-x;
  }

  &:has(.tab-control--enabled) .tab-container {
    padding-inline: var(--container-margin-md);

    @variant md {
      padding-inline: 0;
    }
  }
}

.tab--init {
  @apply pointer-events-auto;
}

.tab-container {
  @apply relative z-0;

  height: 48px;
  margin-inline: 0;

  @variant sm {
    margin-inline: 0;
  }

  @variant md {
    margin-inline: var(--container-margin-md);
  }

  @variant lg {
    height: 51px;
    margin-inline: var(--container-margin-lg);
  }

  @variant pointer-coarse {
    @variant md {
      padding-inline: 0;
    }
  }

  &::after {
    @apply absolute -bottom-1 left-0 h-1 w-full bg-neutral-400;

    content: "";
  }
}

.tab-scrollContainer {
  @apply overflow-x-auto overflow-y-hidden;
}

.tab-list {
  @apply flex h-fit;
}

.tab-item {
  @apply text-center text-neutral-400;

  flex: 1 1 50%;
}

.tab-target {
  @apply block;

  padding-block: var(--spacing-12);
  padding-inline: var(--spacing-16);
  font: var(--t4-medium);
  word-break: keep-all;
  white-space: nowrap;

  @variant lg {
    font: var(--t3-medium);
  }
}

.tab-active {
  @apply text-blue-500;

  box-shadow: inset 0 -2px 0 var(--color-blue-500);
}

.tab-controlContainer {
  @apply pointer-events-none absolute top-0 left-0 z-0 flex h-full w-full items-center justify-between;
}

.tab-control {
  --icon-color: var(--color-neutral-900);

  @apply pointer-events-none opacity-0;

  padding: var(--spacing-8);

  &.tab-control--enabled {
    @apply pointer-events-auto opacity-100;
  }
}