@layer components {
  [data-coco][data-component="tabs"] {
    @apply border-b border-gray-transparent-200;

    [role="tablist"] {
      display: flex;
      position: relative;
      width: 100%;
    }

    [role="tab"] {
      @apply border-b-2 border-transparent;
      position: relative;
      bottom: -1px;

      .coco-button {
        @apply text-content-dark-muted;

        &:hover {
          @apply text-content-dark-2;
        }
      }

      &.active {
        @apply border-background-dark-1;

        .coco-button {
          @apply text-content-dark-1;
        }
      }
    }

    &[data-fit="full"] [role="tab"] {
      width: 100%;
    }
  }
}