// @import "../core/core";
// @import "../_generated/icon";
@mixin dc-icon--base {
    line-height: 1;
}

//  = ICONS (font)
//  (others mixins are generated with iconfont plugin @see _generated/_icon.scss)
//  ---------------------------------------------------------------------------------
@mixin dc-icon--interactive {
    cursor: pointer;
    &:hover {  color: $dc-blue20;  }
}

//  = SVG ICON (FIXME  - to be removed, heare for legacy reasons)
//  ---------------------------------------------------------------------------
@mixin dc-svg-icon($svg-selector: "svg, .dc-svg") {
    display: inline-block;
    margin-bottom: $dc-font250;
    padding: $dc-space100;
    border: 1px solid $dc-gray60;
    background-color: $dc-white;
    text-align: center;

    .#{$svg-selector} {
        margin-bottom: $dc-font50;
        vertical-align: middle;
    }
}

@mixin dc-svg-icon--interactive {
    &:hover {
        [fill^="#"] {
            fill: $dc-blue30;
        }

        [stroke^="#"] {
            stroke: $dc-blue30;
        }
    }

    &:active {
        transform: scale(.85);
        shape-rendering: optimizeSpeed;
        -webkit-tap-highlight-color: transparent;
    }
}

@mixin dc-svg-icon--alternate {
    &:hover {
        [fill^="#"] {
            fill: $dc-orange40;
        }

        [stroke^="#"] {
            stroke: $dc-orange40;
        }
    }
}

@mixin dc-icon--spin {
    display: inline-flex;
    animation: dc--spin 2s infinite linear;
}

@mixin dc-icon-selectors {

    @include dc-icon-generated-selectors;

    .dc-icon {
        @include dc-icon--base
    }

    .dc-icon--interactive {
        @include dc-icon--interactive;
    }

    .dc-svg-icon--interactive {
        @include dc-svg-icon--interactive;
    }

    .dc-svg-icon--alternate {
        @include dc-svg-icon--alternate;
    }

    .dc-icon--spin {
        @include dc-icon--spin;
    }
}