:root {
    --tab-main-height: calc(100vh - 3rem);
}

.tabs {
    @apply z-10;
}

.tab-main {
    @apply z-1;
    @apply border-l;
    @apply border-r;
    @apply border-b;
    @apply border-tint-300;
    min-height: var(--tab-main-height);
}

.tab-content {
    @apply bg-white;
    @apply text-sm;
    min-height: var(--tab-main-height);
}

.tab-content-section {
    @apply py-8;
    @apply border-t-2;
    @apply border-tint-200;
}

.tab-content-section:first-child {
    @apply border-t-0;
}

.tab-nav {
    position: sticky;
    position: -webkit-sticky;
    @apply grid;
    @apply justify-center;
    @apply cols-auto;
    @apply gap-2;
    @apply top-0;
    @apply w-full;
    @apply z-10;
    @apply bg-gray-700;
    @apply p-1;
    @apply shadow-lg;
    @apply rounded-t-sm;
    @apply text-xs;
}

.tab-bar {
    @apply grid;
    @apply cols-auto;
    @apply justify-start;
    @apply gap-1;
    @apply overflow-x-auto;
    @apply overflow-y-hidden;
}

.tab-bar::-webkit-scrollbar {
    height: 2px;
}

@screen sm {
    .tab-bar {
        @apply justify-center;
    }
}

.tab {
    @apply px-4;
    @apply text-gray-300;
    @apply whitespace-no-wrap;
    @apply rounded-sm;
    @apply h-10;
    @apply text-sm;
}

.tab-delimiter {
    @apply border-l;
    @apply border-gray-600;
}

.tab:hover {
    @apply bg-tint-400;
    @apply text-white;
}

.tab-active,
.tab-active:hover {
    @apply bg-tint-600;
    @apply text-white;
}