/* *****************************************************************************
*
*  Icon
*
* ***************************************************************************** */

.bf-icon {
    display: inline-block;
    color: var(--bf-color-neutral-primary);
    border-color: currentColor;
    vertical-align: middle;
    svg {
        width: 100%;
        height: 100%;
        path, circle, line, rect {
            stroke-width: 1;
            vector-effect: non-scaling-stroke;
        }
    }
    // Sizes
    &.size-large {
        width: 4.5rem;
        height: 4.5rem;
        min-width: 4.5rem;
    }
    &.size-medium {
        width: 3rem;
        height: 3rem;
        min-width: 3rem;
    }
    &.size-small {
        width: 1.5rem;
        height: 1.5rem;
        min-width: 1.5rem;
    }
    &.size-xsmall {
        width: 1rem;
        height: 1rem;
        min-width: 1rem;
    }
    &.size-huge {
        width: 18rem;
        height: 18rem;
        @include media-breakpoint-down(md) {
            width: 15rem;
            height: 15rem;
        }
        @include media-breakpoint-down(sm) {
            width: 10rem;
            height: 10rem;
        }
    }
    // Color varitions
    .inversed {stroke: var(--bf-color-bg-ground)}
    .fill-highlight {
        color: var(--bf-color-primary-irreversible);
        circle{
            fill: var(--bf-color-bg-action-primary);
        }
        circle.fill-highlight-on-reversed {
            fill: var(--bf-color-primary-irreversible);
        }
    }
    @at-root .color-succes,
    &.color-success {
        color: var(--bf-color-feedback-success);
        .fill-highlight  circle {
                fill: var(--bf-color-feedback-success);
        }
        circle.fill-highlight-on-reversed {
            fill: var(--bf-color-primary-irreversible);
        }
    }
    @at-root .color-neutral,
    &.color-neutral {
        color: var(--bf-color-feedback-neutral);
        .fill-highlight circle {
            fill: var(--bf-color-feedback-neutral);
        }
        circle.fill-highlight-on-reversed {
            fill: var(--bf-color-primary-irreversible);
        }
    }
    @at-root .color-warning,
    &.color-warning {
        color: var(--bf-color-feedback-warning);
        .fill-highlight circle {
            fill: var(--bf-color-feedback-warning);
        }
        circle.fill-highlight-on-reversed {
            fill: var(--bf-color-primary-irreversible);
        }
    }
    @at-root .color-negative,
    &.color-negative {
        color: var(--bf-color-feedback-negative);
        .fill-highlight {
            color: var(--bf-color-bg-ground);
            circle {
                fill: var(--bf-color-feedback-negative);
            }
            circle.fill-highlight-on-reversed {
                fill:  var(--bf-color-bg-ground);
            }
        }
    }
    @at-root .disabled{
        .bf-icon {
             @extend .bf-color-neutral-tertiary;
        }
    }
}
.reversed {
    .color-negative {
        .fill-highlight {
            color: var(--bf-color-neutral-primary);
        }

    }
}