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

@mixin cds-feedback($feedback-color) {

    $_strong: var(--cds-color-feedback-#{$feedback-color}-strong);
    $_main: var(--cds-color-feedback-#{$feedback-color}-main);
    $_pale: var(--cds-color-feedback-#{$feedback-color}-pale);
    color: $_strong;
    background-color: $_pale;
    border-color: transparent;

    $_icon: config.$default-icon-information; // icons.$cds-ico-info-circle-solid;

    @if ($feedback-color =="success") {
        $_icon: config.$default-icon-success; // icons.$cds-ico-check-circle-solid;
    }

    @else if ($feedback-color =="alert") {
        $_icon: config.$default-icon-alert; // icons.$cds-ico-warning-circle-solid;
    }

    @else if ($feedback-color =="error") {
        $_icon: config.$default-icon-error; // icons.$cds-ico-close-circle-solid;
    }

    @include mixins.cds-icon($_icon);

    &::before {
        color: $_main;
    }

    & a.cds-link {
        &:hover {
            color: $_main;
            text-decoration-color: $_main;
        }

        &:active {
            color: $_strong;
            text-decoration-color: $_strong;
        }
    }

    [class^="__icon"],
    [class*="__icon "] {
        color: $_main;
    }

    &::after {
        //Linea del toast
        background-color: $_main;
    }

    &.is-highlighted {
        color: var(--cds-color-text-inverse);
        background-color: $_main;
        border-color: transparent;

        & a.cds-link {
            &:hover {
                color: $_pale;
                text-decoration-color: $_pale;
            }

            &:active {
                color: var(--cds-color-text-inverse);
                text-decoration-color: var(--cds-color-text-inverse);
            }
        }

        &[class^="__icon"],
        [class*="__icon "],
        [class^="__close"],
        [class*="__close "],
        ::before {
            color: $_pale;
        }

        &::before {
            color: $_pale;
        }

        &::after {
            background-color: $_pale;
        }
    }
}