@use "sass:color";
@use '../abstracts/cds-icons' as icons;
@use 'cds-mixins-icons' as mixins;

@mixin cds-accent {
    color: var(--cds-color-text-inverse);
    background: var(--cds-color-accent-primary-main);
    border: 1px solid transparent;

    & *,
    [class^="__icon"],
        [class*="__icon "] {
        color: var(--cds-color-text-inverse);
    }
}

@mixin cds-accent--hover {
    background-color: var(--cds-color-accent-primary-main--hover);
    border: 1px solid transparent;

    & *,
    [class^="__icon"],
        [class*="__icon "] {
        color: var(--cds-color-text-inverse);
    }
}

@mixin cds-accent--active {
    background-color: var(--cds-color-accent-primary-main--active);
    border: 1px solid transparent;

    & *,
    [class^="__icon"],
        [class*="__icon "] {
        color: var(--cds-color-text-inverse);
    }
}

@mixin cds-accent--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);

    & *,
        [class^="__icon"],
        [class*="__icon "] {
        color: var(--cds-color-text-muted);
    }
}