/* 8. AppearanceTabs Component */
.appearance-tabs {
    @apply inline-flex gap-1 p-1;
    border-radius: var(--radius);
    background-color: var(--muted);

    .appearance-tabs__tab {
        @apply flex cursor-pointer items-center px-3.5 py-1.5 transition-colors;
        border-radius: calc(var(--radius) - 2px);
        color: var(--muted-foreground);

        &:hover {
            color: var(--foreground);
            background-color: rgba(0, 0, 0, 0.05);
        }

        &.appearance-tabs__tab--active {
            background-color: var(--card);
            color: var(--card-foreground);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

            &:hover {
                background-color: var(--card);
            }
        }
    }

    .appearance-tabs__icon {
        @apply -ml-1 h-4 w-4;
    }

    .appearance-tabs__label {
        @apply ml-1.5 text-sm;
    }
}