@use "sass:list";
@use "sass:meta";
$colorNames: (
    primary,
    secondary,
    tertiary,
    border,
    bg,
    hover,
    input,
    card,
    'black',
    'white',
    'gray-900',
    'gray-800',
    'gray-700',
    'gray-600',
    'gray-500',
    'gray-400',
    'gray-300',
    'gray-200',
    'gray-100',
    'accent',
    'accent-1',
    'accent-2',
    'accent-3',
    'accent-light',
    'accent-lighter',
    'accent-lightest',
    'accent-dark',
    'accent-darker',
    'accent-darkest',
    'accent2',
    'accent2-1',
    'accent2-2',
    'accent2-3',
    'accent2-light',
    'accent2-lighter',
    'accent2-lightest',
    'accent2-dark',
    'accent2-darker',
    'accent2-darkest',
);

@if meta.variable-exists(appColorNames) {
    $colorNames: list.join($colorNames, $appColorNames);
}

$states: (
    success, warning, danger, info
);

$variations: (
    'a.hover',
    '.hover',
    '.',
);

@mixin colorvariant ($color) {
    %color#{$color} {
        color: var(--color-#{$color});
    }
    %bg#{$color} {
        background-color: var(--color-#{$color});
        --current-bg: var(--color-#{$color});
        --color-contrast-primary: var(--color-#{$color}-primary);
        --color-contrast-secondary: var(--color-#{$color}-secondary);
    }

    @each $variation in $variations {
        $prefix: #{$variation};
        $suffix: null;
        @if $variation != '.' {
            $prefix: #{$variation}\:
        }
        @if $variation == '.hover' {
            $suffix: ':hover'
        }
        @if $variation == 'a.hover' {
            $suffix: ':hover'
        }

        #{$prefix}color-#{$color}#{$suffix} {
            @extend %color#{$color};
        }
        @if $variation != 'a.hover' {
            #{$prefix}bg-#{$color}#{$suffix} {
                @extend %bg#{$color};
            }
        }
    }
}

@each $color in $colorNames {
    @include colorvariant($color);
}

@each $state in $states {
    @include colorvariant($state);
    @include colorvariant(#{$state}-light);
    @include colorvariant(#{$state}-dark);
    @include colorvariant(#{$state}-theme);
}

.color-contrast, .color-contrast-inside > * {
    --color-primary: var(--color-contrast-primary);
    --color-secondary: var(--color-contrast-secondary);
}

.color-current,
.hover\:color-current:hover,
a.hover\:color-current:hover {
    color: currentColor;
    fill: currentColor;
}

svg:not([fill]) {
    fill: currentColor;
}