@layer components {
  [data-name="tab-list"] {
    display: grid;
    grid-template-columns: repeat(var(--tab-count), 1fr);
  }

  [data-name="tab-list-item"] {
    @apply flex-row-0 grow justify-center px-3 py-2 typography-label-md border-b-4 transition-colors neutral coloring-text-hover;
    
    &[data-disabled] {
      @apply cursor-not-allowed disabled coloring-text;
    }

    &:not([data-disabled]) {
      &[data-active] {
        @apply border-primary font-bold;
      }
      &:not([data-active]) {
        @apply hover:cursor-pointer;
      }
    }
  }

  [data-name="tab-view"] {
    @apply flex-col;
  }

  [data-name="tab-panel"] {
    @apply flex-col-0 overflow-y-auto;
  }
}