@use "sass:color";

@forward 'cds-variant-accent';
@forward 'cds-variant-primary';
@forward 'cds-variant-secondary';
@forward 'cds-variant-tertiary';
@forward 'cds-variant-feedback';
@forward 'cds-variant-alternative';
@forward 'cds-variant-inverse';


///TEST VARIANTS!!!
/// 
/// 
/// DISABLED STRIPES
/// --------------------
@mixin cds-disabled {
    background: repeating-linear-gradient(-45deg, var(--cds-color-background-medium), var(--cds-color-background-medium) 10px, var(--cds-color-background-soft) 10px, var(--cds-color-background-soft) 20px);
    color: var(--cds-color-text-muted);
    border-color: var(--cds-color-background-medium);

    & * {
        color: var(--cds-color-text-muted);
    }
}

/// GRADIENTS
/// --------------------
@mixin cds-gradientss($color, $darken: 20%) {
    background: linear-gradient(135deg, $color, color.scale($color, $lightness: -$darken));
    background-size: 150%;
    background-position: 50%;
    border: 1px solid transparent;

    & * {
        @if (lightness(color.scale($color, $lightness: -$darken)) > 50%) {
            color: var(--cds-color-text-default) !important;
        }

        @else {
            color: var(--cds-color-text-inverse) !important;
        }
    }
}

@mixin cds-gradient-css {
    background: linear-gradient(90deg, color-mix(in srgb, var(--cds-color-accent-primary-main) 80%, var(--cds-color-text-default)), color-mix(in srgb, var(--cds-color-accent-primary-main) 80%, var(--cds-color-background-default)));
    background-size: 150%;
    background-position: 50%;
    border: 1px solid transparent;

    & * {
        color: var(--cds-color-text-inverse) !important;
    }
}