.tab-content {
  .page-locked & {
    cursor: not-allowed;
    user-select: none;

    > * {
      pointer-events: none;
    }
  }
}

.w-tabs {
  &__wrapper {
    @apply w-mb-10 w-overflow-x-auto w-scrollbar-thin w-flex w-items-center w-justify-between w-flex-wrap w-gap-4;
  }

  &__list {
    @include nice-padding();
    @apply w-flex w-my-[3px] w-space-x-6 w-border-b w-border-grey-100 w-w-fit;
  }

  &__tab {
    @apply w-label-3
    w-box-border
    w-inline-flex
    w-text-grey-400
    hover:w-text-primary
    w-whitespace-nowrap
    w-py-4
    w-font-medium
    w-relative
    after:w-block
    after:w-w-0
    after:w-h-[2px]
    after:w-bg-primary
    after:w-absolute
    after:w-left-0
    after:-w-bottom-px
    after:w-transition-all
    motion-reduce:after:w-transition-none
    hover:after:w-w-full;

    &[aria-selected='true'] {
      @apply after:w-w-full w-text-primary;
    }
  }

  &__errors {
    @apply w-hidden
    w-box-border
    w-w-4
    w-h-4
    w-text-[0.75rem]
    w-flex
    w-justify-center
    w-items-center
    w-font-bold
    w-bg-critical-200
    w-text-white
    w-border
    w-border-white
    w-rounded-full
    w-absolute
    w-top-[0.4375rem]
    -w-right-[0.9375rem];

    &--active {
      @apply w-flex;
    }
  }

  // Optional animate attr for tabs to animate in
  &[data-tabs-animate] &__panel {
    @apply motion-reduce:w-transition-none w-transition w-duration-150 w-translate-y-1 w-opacity-0;

    &.animate-in {
      @apply w-translate-y-0 w-opacity-100;
    }
  }
}