@function getShadeFgColor($colorVariantBase) {
    $fgShade: 100;

    @if ($colorVariantBase == "warning") {
        $fgShade: 130;
    } @else if ($colorVariantBase == "accent") {
        $fgShade: 140;
    }
    @return $fgShade;
}

@mixin eui-color-variant($colorVariantBase, $shade: 100) {
    background-color: var(--eui-base-color-#{$colorVariantBase}-#{$shade});
    border-color: var(--eui-base-color-#{$colorVariantBase}-#{$shade});
    color: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);

    .eui-icon-svg {
        svg {
            color: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
            fill: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
        }
    }
}
@mixin eui-color-variant-border($colorVariantBase, $shade: 100) {
    border-color: var(--eui-base-color-#{$colorVariantBase}-#{$shade});
}

@mixin eui-color-variant-icon($colorVariantBase, $shade: 100) {
    .eui-icon-svg {
        svg {
            color: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
            fill: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
        }
    }
}

@mixin eui-color-variant-hover($colorVariantBase, $shade: 110) {
    &:active,
    &:focus,
    &:hover {
        background-color: var(--eui-base-color-#{$colorVariantBase}-#{$shade});
        color: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
        $borderShade: index(map-keys(map-get($eui-base-tokens-colors, $colorVariantBase)), $shade);

        .eui-icon-svg {
            svg {
                color: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
                fill: var(--eui-base-color-#{$colorVariantBase}-#{$shade}-contrast);
            }
        }
    }
}

@mixin eui-color-variant-outline($colorVariantBase, $transparent: false) {
    $fgShade: getShadeFgColor(($colorVariantBase));
    @if $transparent {
        background-color: transparent;
        border: 1px solid transparent;
    } @else {
        background-color: var(--eui-base-color-white);
        border: 1px solid var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
    }
    color: var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});

    .eui-icon-svg {
        svg {
            color: var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
            fill: var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
        }
    }
}

@mixin eui-color-variant-outline-hover($colorVariantBase, $shade: 10) {
    &:active,
    &:focus,
    &:hover {
        background-color: var(--eui-base-color-#{$colorVariantBase}-#{$shade});
    }
}

@mixin eui-color-variant-fg($colorVariantBase, $shade: false) {
    $fgShade: $shade;
    @if ($shade == false) {
        $fgShade: getShadeFgColor(($colorVariantBase));
    }
    color: var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
}

@mixin eui-color-variant-fg-icon($colorVariantBase, $shade: false) {
    $fgShade: $shade;
    @if ($shade == false) {
        $fgShade: getShadeFgColor(($colorVariantBase));
    }

    .eui-icon-svg {
        svg {
            color: var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
            fill: var(--eui-base-color-#{$colorVariantBase}-#{$fgShade});
        }
    }
}
