$levels: 'rgb', 'hover', 'deep', 'active', 'disabled', 'smooth';
$textLevels: 'text', 'placeholder';
$colors: 'regular', 'primary', 'success', 'accent', 'warn';
$baseColors: 'base', 'background';
$alphas: 10, 20, 30, 40, 50, 60, 70, 80, 90 100;

@function rgba-to-rgb($rgba, $background: #fff) {
    @return mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%);
}

@mixin background-opacity($color, $opacity: 1) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

@mixin disabled-state() {
    &.disabled, &[disabled], &--disabled {
        pointer-events: none;
        cursor: default;
        opacity: 0.5;
    }
}

@each $color in $colors {
    .sdk-#{$color}-color {
        color: var(--#{$color}-a90-rgb);

        &:hover {
            color: var(--#{$color}-a100-rgb);
            background-color: var(--#{$color}-a10-rgb);
        }

        &.active, &--active {
            color: var(--#{$color}-a80-rgb);
        }

        @include disabled-state;
    }

    .sdk-#{$color}-background {
        background-color: var(--#{$color}-a90-rgb);
        color: var(--#{$color}-text);

        &:hover {
            background-color: var(--#{$color}-a100-rgb);
            color: var(--#{$color}-text);
        }

        &.active, &--active {
            background-color: var(--#{$color}-a80-rgb);
            color: var(--#{$color}-text);
        }

        @include disabled-state;
    }

    .sdk-#{$color}-border {
        border-color: var(--#{$color}-a90-rgb);

        &:hover {
            border-color: var(--#{$color}-a100-rgb);
        }

        &.active, &--active {
            border-color: var(--#{$color}-a80-rgb);
        }

        @include disabled-state;
    }
}

$standardShadow: 0 1px 0 0 rgba(26, 26, 26, 0.04), 0 1px 2px 0 rgba(26, 26, 26, 0.08);
$expandedShadow: 0 7px 6px 0 rgba(26, 26, 26, 0.13), 0 9px 19px 0 rgba(26, 26, 26, 0.19);
$hugeShadow: 0 15px 12px 0 rgba(26, 26, 26, 0.22), 0 19px 38px 0 rgba(26, 26, 26, 0.30);