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

@mixin cds-color-alternative($color-number) {
    color: var(--cds-color-alternative-#{$color-number}-strong);
    background-color: var(--cds-color-alternative-#{$color-number}-pale);
    border-color: var(--cds-color-alternative-#{$color-number}-pale);

    & *,
    [class^="__icon"],
    [class*="__icon "] {
        color: var(--cds-color-alternative-#{$color-number}-strong);
    }

    &.is-highlighted {
        color: var(--cds-color-alternative-#{$color-number}-pale);
        background-color: var(--cds-color-alternative-#{$color-number}-main);
        border-color: transparent;

        & *,
        [class^="__icon"],
        [class*="__icon "] {
            color: var(--cds-color-alternative-#{$color-number}-pale);
        }
    }
}

@mixin cds-color-alternative--hover($color-number) {
    cursor: pointer;
    color: var(--cds-color-alternative-#{$color-number}-strong);
    background-color: var(--cds-color-alternative-#{$color-number}-pale--hover);
    border-color: var(--cds-color-alternative-#{$color-number}-pale--hover);

    &.is-highlighted {
        color: var(--cds-color-alternative-#{$color-number}-pale);
        background-color: var(--cds-color-alternative-#{$color-number}-main--hover);
        border-color: transparent;
    }
}

@mixin cds-color-alternative--active($color-number) {
    cursor: pointer;
    color: var(--cds-color-alternative-#{$color-number}-strong);
    background-color: var(--cds-color-alternative-#{$color-number}-pale--active);
    border-color: var(--cds-color-alternative-#{$color-number}-pale--active);

    &.is-highlighted {
        color: var(--cds-color-alternative-#{$color-number}-pale);
        background-color: var(--cds-color-alternative-#{$color-number}-main--active);
        border-color: transparent;
    }
}