@import "../../next-core/lib/next.scss";

@import "./scss/function.scss";
@import "./scss/mixin.scss";
@import "./scss/placeholder.scss";

@font-face {
    font-family: $icon-font-family;
    src: url('#{$icon-font-path}.eot');
    src: url('#{$icon-font-path}.eot?#iefix') format('embedded-opentype'),
    //url('#{$icon-font-path}.woff2') format('woff2'),
    url('#{$icon-font-path}.woff') format('woff'),
    url('#{$icon-font-path}.ttf') format('truetype'),
    url('#{$icon-font-path}.svg#articonsvg') format('svg');
}

.#{$icon-prefix}{
    position: relative;
    display: inline-block;
    font-family: $icon-font-family;
    font-style: normal;
    font-weight: normal;
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.1px;
    -moz-osx-font-smoothing: grayscale;

    &:before {
        display: inline-block;
        speak: none;
        font-size: $icon-s;
        line-height: $icon-s;
        vertical-align: middle;
        text-align: center;
    }
    &-left {
        margin-right: $s-1;
    }
    &-right{
        margin-left: $s-1;
    }
    /*建议写在 button 中*/
    /*&.icon-btn{*/
    /*    cursor: pointer;*/
    /*    color: $color-brand2-6;*/
    /*}*/
    /*&.icon-btn:hover{*/
    /*    color: $color-brand1-6;*/
    /*}*/
    /*&.icon-btn.disabled{*/
    /*    color: $color-text1-2;*/
    /*}*/
    &-xxs {
        @include icon-size($icon-xxs);
    }
    &-xs {
        @include icon-size($icon-xs);
    }
    &-small {
        @include icon-size($icon-s);
    }
    &-medium {
        @include icon-size($icon-m);
    }
    &-large {
        @include icon-size($icon-l);
    }
    &-xl {
        @include icon-size($icon-xl);
    }
    &-xxl {
        @include icon-size($icon-xxl);
    }
    &-xxxl {
        @include icon-size($icon-xxxl);
    }

    @keyframes loadingCircle {
        0% {
            transform-origin: 50% 50%;
            transform: rotate(0deg);
        }

        100% {
            transform-origin: 50% 50%;
            transform: rotate(360deg);
        }
    }

    &-loading:before {
        content: $icon-content-loading;
        animation: loadingCircle 2s infinite linear;
    }

    /* 不要删除，用来批量修改icon变量的标识*/
    /*MEXT_ICON_START*/

    &-all:before { content: $icon-content-all; }
    &-cart:before { content: $icon-content-cart; }
    &-comments:before { content: $icon-content-comments; }
    &-cry:before { content: $icon-content-cry; }
    &-email:before { content: $icon-content-email; }
    &-favorite:before { content: $icon-content-favorite; }
    &-folder:before { content: $icon-content-folder; }
    &-form:before { content: $icon-content-form; }
    &-help:before { content: $icon-content-help; }
    &-refresh:before { content: $icon-content-refresh; }
    &-set:before { content: $icon-content-set; }
    &-training:before { content: $icon-content-training; }
    &-account:before { content: $icon-content-account; }
    &-atm:before { content: $icon-content-atm; }
    &-clock:before { content: $icon-content-clock; }
    &-attachment:before { content: $icon-content-attachment; }
    &-3column:before { content: $icon-content-3column; }
    &-4column:before { content: $icon-content-4column; }
    &-discount:before { content: $icon-content-discount; }
    &-service:before { content: $icon-content-service; }
    &-print:before { content: $icon-content-print; }
    &-box:before { content: $icon-content-box; }
    &-process:before { content: $icon-content-process; }
    &-bags:before { content: $icon-content-bags; }
    &-electronics:before { content: $icon-content-electronics; }
    &-gifts:before { content: $icon-content-gifts; }
    &-lights:before { content: $icon-content-lights; }
    &-auto:before { content: $icon-content-auto; }
    &-browse:before { content: $icon-content-browse; }
    &-atm-away:before { content: $icon-content-atm-away; }
    &-scanning:before { content: $icon-content-scanning; }
    &-compare:before { content: $icon-content-compare; }
    &-filter:before { content: $icon-content-filter; }
    &-pin:before { content: $icon-content-pin; }
    &-history:before { content: $icon-content-history; }
    &-similar-product:before { content: $icon-content-similar-product; }
    &-link:before { content: $icon-content-link; }
    &-cut:before { content: $icon-content-cut; }
    &-table:before { content: $icon-content-table; }
    &-nav-list:before { content: $icon-content-nav-list; }
    &-image-text:before { content: $icon-content-image-text; }
    &-text:before { content: $icon-content-text; }
    &-move:before { content: $icon-content-move; }
    &-subtract:before { content: $icon-content-subtract; }
    &-dollar:before { content: $icon-content-dollar; }
    &-office:before { content: $icon-content-office; }
    &-operation:before { content: $icon-content-operation; }
    &-download:before { content: $icon-content-download; }
    &-map:before { content: $icon-content-map; }
    &-bad:before { content: $icon-content-bad; }
    &-good:before { content: $icon-content-good; }
    &-skip:before { content: $icon-content-skip; }
    &-play:before { content: $icon-content-play; }
    &-stop:before { content: $icon-content-stop; }
    &-compass:before { content: $icon-content-compass; }
    &-security:before { content: $icon-content-security; }
    &-share:before { content: $icon-content-share; }
    &-store:before { content: $icon-content-store; }
    &-phone:before { content: $icon-content-phone; }
    &-ellipsis:before { content: $icon-content-ellipsis; }
    &-email-filling:before { content: $icon-content-email-filling; }
    &-favorites-filling:before { content: $icon-content-favorites-filling; }
    &-account-filling:before { content: $icon-content-account-filling; }
    &-credit-level:before { content: $icon-content-credit-level; }
    &-credit-level-filling:before { content: $icon-content-credit-level-filling; }
    &-mobile-phone:before { content: $icon-content-mobile-phone; }
    &-smile:before { content: $icon-content-smile; }
    &-personal-center:before { content: $icon-content-personal-center; }
    &-arrow-up-filling:before { content: $icon-content-arrow-up-filling; }
    &-arrow-right:before { content: $icon-content-arrow-right; }
    &-arrow-left:before { content: $icon-content-arrow-left; }
    &-arrow-down:before { content: $icon-content-arrow-down; }
    &-arrow-up:before { content: $icon-content-arrow-up; }
    &-add:before { content: $icon-content-add; }
    &-minus:before { content: $icon-content-minus; }
    &-delete-filling:before { content: $icon-content-delete-filling; }
    &-edit:before { content: $icon-content-edit; }
    &-error:before { content: $icon-content-error; }
    &-select:before { content: $icon-content-select; }
    &-ashbin:before { content: $icon-content-ashbin; }
    &-calendar:before { content: $icon-content-calendar; }
    &-time:before { content: $icon-content-time; }
    &-success:before { content: $icon-content-success; }
    &-warning:before { content: $icon-content-warning; }
    &-search:before { content: $icon-content-search; }
    &-display:before { content: $icon-content-display; }
    &-category:before { content: $icon-content-category; }
    &-prompt:before { content: $icon-content-prompt; }
    &-arrow-down-filling:before { content: $icon-content-arrow-down-filling; }
    &-sorting:before { content: $icon-content-sorting; }
    &-ascending:before { content: $icon-content-ascending; }
    &-descending:before { content: $icon-content-descending; }
    &-success-filling:before { content: $icon-content-success-filling; }
    &-picture:before { content: $icon-content-picture; }
    &-close:before { content: $icon-content-close; }
    &-semi-select:before { content: $icon-content-semi-select; }
    &-tag-subscript:before { content: $icon-content-tag-subscript; }
    &-survey:before { content: $icon-content-survey; }
    &-arrow-double-left:before { content: $icon-content-arrow-double-left; }
    &-arrow-double-right:before { content: $icon-content-arrow-double-right; }

/*MEXT_ICON_END*/
}

@-moz-document url-prefix() {
    /* firefox < 57*/
    @supports (-moz-osx-font-smoothing: auto) and (animation: calc(0s)){
        /* mac firefox 57+*/
        .#{$icon-prefix}::before{
            margin-top: -5px;
        }
    }
}