/*
Icons
==============================================
Basic styling for icon component plus helper classes for sizing and colors.
Credit: https://github.com/FortAwesome/Font-Awesome
*/

// Mixins
// --------------------------

@mixin sw-icon-rotate($degrees, $rotation) {
    filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})';
    transform: rotate($degrees);
}

@mixin sw-icon-flip($horiz, $vert, $rotation) {
    filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)';
    transform: scale($horiz, $vert);
}

@mixin sw-icon-size($size) {
    width: $size;
    height: $size;
}

// Basics
// --------------------------

.icon {
    @include sw-icon-size($icon-base-size);
    display: inline-flex;
    align-self: center;
    font-size: inherit;
    overflow: visible;
    color: $icon-base-color;

    > svg {
        width: 100%;
        height: 100%;
        top: 0.25em;
        position: relative;
        fill: currentColor;

        path,
        use {
            fill: currentColor;
        }
    }
}

// Icon Colors
// -------------------------

.icon-primary {
    color: var(--text-color-brand-primary);
}

.icon-secondary {
    color: $secondary;
}

.icon-success {
    color: $success;
}

.icon-info {
    color: $info;
}

.icon-warning {
    color: $warning;
}

.icon-danger {
    color: $danger;
}

.icon-light {
    color: $gray-200;
}

.icon-dark {
    color: $dark;
}

.icon-review {
    color: $icon-review-color;
}

// Icon Sizes
// -------------------------

.icon-fluid {
    @include sw-icon-size(100%);
}

.icon-lg {
    @include sw-icon-size($icon-base-size / 3 * 4);
}

// 33% bigger icon
.icon-sm {
    @include sw-icon-size($icon-base-size * 0.875);
}

.icon-xs {
    @include sw-icon-size($icon-base-size * 0.75);
}

@for $i from 1 through 10 {
    .icon-#{$i}x {
        width: $i * $icon-base-size;
        height: $i * $icon-base-size;
    }
}

// Rotated & Flipped Icons
// -------------------------

.icon-rotate-90 {
    svg {
        @include sw-icon-rotate(90deg, 1);
    }
}

.icon-rotate-180 {
    svg {
        @include sw-icon-rotate(180deg, 2);
    }
}

.icon-rotate-270 {
    svg {
        @include sw-icon-rotate(270deg, 3);
    }
}

.icon-flip-horizontal {
    svg {
        @include sw-icon-flip(-1, 1, 0);
    }
}

.icon-flip-vertical {
    svg {
        @include sw-icon-flip(1, -1, 2);
    }
}

.icon-flip-both,
.icon-flip-horizontal.icon-flip-vertical {
    svg {
        @include sw-icon-flip(-1, -1, 2);
    }
}

// Hook for IE8-9
// -------------------------

:root {
    .icon-rotate-90,
    .icon-rotate-180,
    .icon-rotate-270,
    .icon-flip-horizontal,
    .icon-flip-vertical,
    .icon-flip-both {
        svg {
            filter: none;
        }
    }
}

// Make them work with bootstrap components
// -------------------------

@each $color, $value in $theme-colors {
    .alert-#{$color} {
        .icon {
            color: $value;
        }
    }
}

@each $color, $value in $theme-colors {
    .btn-#{$color} {
        .icon {
            color: color-contrast($value);
        }
    }
}

.btn {
    .icon {
        > svg {
            top: 6px;
        }
    }
}

.pagination {
    .icon {
        width: 13px;
        height: 13px;

        > svg {
            top: 2px;
        }
    }
}

.is-left,
.offcanvas-start {
    .offcanvas-close {
        svg {
            top: 0;
        }
    }
}

.is-right {
    .offcanvas-close {
        svg {
            top: 0.3rem;
        }
    }
}

.navigation-offcanvas-link-icon {
    .icon > svg {
        top: 0;
    }
}
