/* stylelint-disable */
@use 'sass:math';

.icon {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    overflow: visible;

    --fill: inherit;
    --stroke: inherit;

    &:not(.mod-stroke) {
        fill: var(--fill);
    }

    &.mod-stroke {
        stroke: var(--stroke);
    }

    &.mod-black {
        --fill: var(--grey-100);
        --stroke: var(--grey-100);
    }

    &.mod-info {
        --fill: var(--info-60);
        --stroke: var(--info-60);
    }

    &.documentation-link {
        --fill: var(--links-color);
        --stroke: var(--links-color);
    }

    &.no-link {
        --fill: var(--grey-60);
        --stroke: var(--grey-60);
    }

    &.disabled {
        --fill: var(--grey-40);
        --stroke: var(--grey-40);
    }

    &.mod-error {
        --fill: var(--critical-70);
        --stroke: var(--critical-70);
    }

    &.mod-warning {
        --fill: var(--warning-70);
        --stroke: var(--warning-70);
    }

    &.mod-success {
        --fill: var(--success-60);
        --stroke: var(--success-60);
    }

    &.mod-white {
        --fill: var(--white);
        --stroke: var(--white);
    }

    &.office365-red {
        --fill: var(--deprecated-red);
        --stroke: var(--deprecated-red);
    }

    &.salesforce-blue {
        --fill: var(--salesforce-blue);
        --stroke: var(--salesforce-blue);
    }

    &.mod-small {
        width: 0.7em;
        height: 0.7em;
    }

    &.mod-normal {
        width: 1em;
        height: 1em;
    }

    &.mod-align-with-text {
        line-height: 1em;
        vertical-align: -0.2em;
    }

    &.mod-badge {
        width: 14px;
        height: 14px;
        top: 1px;
        display: flex;
    }

    @for $i from 5 through 36 {
        $size: $i * 2;
        &.mod-#{$size} {
            min-width: $size + px;
            width: $size + px;
            height: $size + px;
            line-height: $size + px;
            vertical-align: -0.5 * ceil($size * 0.25) + px;
        }
    }

    /* makes the icon 33% larger relative to the icon container */
    &.mod-lg {
        width: math.div(4em, 3);
        height: math.div(4em, 3);
        line-height: math.div(4em, 3);
        vertical-align: -0.1em;
    }

    &.mod-2x {
        width: 2em;
        height: 2em;
        vertical-align: -0.5em;
    }

    &.mod-3x {
        width: 3em;
        height: 3em;
        vertical-align: -1em;
    }

    &.mod-4x {
        width: 4em;
        height: 4em;
        vertical-align: -1.5em;
    }

    &.mod-5x {
        width: 5em;
        height: 5em;
        vertical-align: -2em;
    }
}

.icon-container {
    display: inline-block;
}

.shadow svg {
    position: absolute;
    left: calc(50%);
    z-index: 1;
    display: none;
    transform: translateX(calc(-50% + #{$icon-hover-offset}));
}

.with-hover svg {
    position: relative;
    z-index: 2;
    transition: fill 0.5s ease;
}

.icon-hover-right:hover {
    .shadow svg {
        display: initial;
    }

    .with-hover svg {
        fill: var(--deprecated-orange);
    }
}

.hover-wrapper {
    position: relative;
    display: inline;
}