$pathFont: '../fonts/';
$fonts: (
        icomoon: icomoon
);

@mixin font-face($fontName, $folderName, $fileName, $fontWeight: normal, $fontStyle: normal) {
    @font-face {
        font-display: swap;
        font-family: $fontName;
        src: url('#{$pathFont}#{$folderName}/#{$fileName}.eot');
        src: url('#{$pathFont}#{$folderName}/#{$fileName}.eot?#iefix') format('embedded-opentype'),
        url('#{$pathFont}#{$folderName}/#{$fileName}.woff') format('woff');
        //url('#{$pathFont}#{$folderName}/#{$fileName}.ttf') format('truetype'),
        //url('#{$pathFont}#{$folderName}/#{$fileName}.svg##{$fontName}') format('svg');
        font-weight: $fontWeight;
        font-style: $fontStyle;
    }
}

@each $item, $value in $fonts {
    @include font-face('#{$value}', '#{$value}', '#{$item}', normal);
}

.icon {
    &-square {
        @apply w-8 lg:w-14 lg:h-14 lg:rounded-lg;
    }


    &-rect {
        @apply w-14;
    }

    &-square, &-rect {
        @apply flex items-center leading-none cursor-pointer justify-center h-8 rounded-sm bg-alt transition-colors duration-500 ease-in-out;

        &:hover, &.active {
            @apply bg-alt2;
        }
    }

}

.icon-circle {
    @apply flex items-center justify-center rounded-full w-5 h-5 text-10 border bg-accent border-accent-alt2 text-white;

    &.error {
        @apply bg-error border-error-alt;
    }
}

.icon, [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-climate-control:before {
    content: "\e9da";
}
.icon-occupants:before {
    content: "\e9db";
}

.icon-high-priority:before {
    content: "\e9d2";
}
.icon-medium-priority .path1:before {
    content: "\e9d3";
}
.icon-medium-priority .path2:before {
    content: "\e9d4";
    opacity: .5;
}
.icon-medium-priority .path3:before {
    content: "\e9d5";
}
.icon-low-priority .path1:before {
    content: "\e9d6";
}
.icon-low-priority .path2:before {
    content: "\e9d7";
    opacity: .5;
}
.icon-low-priority .path3:before {
    content: "\e9d8";
    opacity: .5;
}
.icon-no-priority:before {
    content: "\e9d9";
}
.icon-dollar-disabled:before {
    content: "\e900";
}
.icon-dollar:before {
    content: "\e901";
}
.icon-exchange:before {
    content: "\e902";
}
.icon-service:before {
    content: "\e903";
}
.icon-table-view:before {
    content: "\e904";
}
.icon-http-referrer:before {
    content: "\e905";
}
.icon-ios-id:before {
    content: "\e906";
}
.icon-android-fingerprint:before {
    content: "\e907";
}
.icon-warning:before {
    content: "\e908";
}
.icon-ip-address:before {
    content: "\e909";
}
.icon-http:before {
    content: "\e90a";
}
.icon-ip:before {
    content: "\e90b";
}
.icon-android:before {
    content: "\e90c";
}
.icon-ios:before {
    content: "\e90d";
}
.icon-filled-go:before {
    content: "\e90e";
}
.icon-go:before {
    content: "\e90f";
}
.icon-loader:before {
    content: "\e910";
}
.icon-checkmark:before {
    content: "\e911";
}
.icon-close:before {
    content: "\e912";
}
.icon-goal-1:before {
    content: "\e913";
}
.icon-collaborate:before {
    content: "\e914";
}
.icon-quality:before {
    content: "\e915";
}
.icon-vision:before {
    content: "\e916";
}
.icon-goal:before {
    content: "\e917";
}
.icon-grow:before {
    content: "\e918";
}
.icon-filled-archive-cards:before {
    content: "\e919";
}
.icon-archive-cards:before {
    content: "\e91a";
}
.icon-filledtailored:before {
    content: "\e91b";
}
.icon-tailored:before {
    content: "\e91c";
}
.icon-filled-graph-equal-bars-squared:before {
    content: "\e91d";
}
.icon-graph-equal-bars-squared:before {
    content: "\e91e";
}
.icon-filled-shredded:before {
    content: "\e91f";
}
.icon-shredded:before {
    content: "\e920";
}
.icon-email:before {
    content: "\e921";
}
.icon-app:before {
    content: "\e922";
}
.icon-logo-chargetrip:before {
    content: "\e923";
}
.icon-logo-youtube:before {
    content: "\e924";
}
.icon-logo-wordpress:before {
    content: "\e925";
}
.icon-filled-squared-terminal:before {
    content: "\e926";
}
.icon-squared-terminal:before {
    content: "\e927";
}
.icon-filled-wrench:before {
    content: "\e928";
}
.icon-wrench:before {
    content: "\e929";
}
.icon-brand-ecomovement:before {
    content: "\e92a";
}
.icon-logo-linkedin:before {
    content: "\e92b";
}
.icon-logo-twitter:before {
    content: "\e92c";
}
.icon-logo-instagram:before {
    content: "\e92d";
}
.icon-logo-github:before {
    content: "\e92e";
}
.icon-large-squared-slashes:before {
    content: "\e92f";
}
.icon-large-location-center:before {
    content: "\e930";
}
.icon-large-stations-along-route:before {
    content: "\e931";
}
.icon-truck:before {
    content: "\e932";
}
.icon-filled-graph-bars-squared:before {
    content: "\e933";
}
.icon-graph-bars-squared:before {
    content: "\e934";
}
.icon-filled-profile:before {
    content: "\e935";
}
.icon-profile:before {
    content: "\e936";
}
.icon-filled-person-circle:before {
    content: "\e937";
}
.icon-person-circle:before {
    content: "\e938";
}
.icon-filled-contact:before {
    content: "\e939";
}
.icon-contact:before {
    content: "\e93a";
}
.icon-filled-receipt:before {
    content: "\e93b";
}
.icon-receipt:before {
    content: "\e93c";
}
.icon-filled-reports:before {
    content: "\e93d";
}
.icon-reports:before {
    content: "\e93e";
}
.icon-filled-question-mark-circle:before {
    content: "\e93f";
}
.icon-question-mark-circle:before {
    content: "\e940";
}
.icon-filled-notifications-1:before {
    content: "\e941";
}
.icon-filled-notifications:before {
    content: "\e942";
}
.icon-notifications-1:before {
    content: "\e943";
}
.icon-notifications:before {
    content: "\e944";
}
.icon-filled-terminal:before {
    content: "\e945";
}
.icon-terminal-1:before {
    content: "\e946";
}
.icon-filled-lightning:before {
    content: "\e947";
}
.icon-lightning:before {
    content: "\e948";
}
.icon-filled-playground:before {
    content: "\e949";
}
.icon-playground:before {
    content: "\e94a";
}
.icon-filled-voyager:before {
    content: "\e94b";
}
.icon-voyager-1:before {
    content: "\e94c";
}
.icon-filled-home:before {
    content: "\e94d";
}
.icon-home:before {
    content: "\e94e";
}
.icon-filled-light-mode:before {
    content: "\e94f";
}
.icon-filled-dark-mode:before {
    content: "\e950";
}
.icon-filled-announcement:before {
    content: "\e951";
}
.icon-announcement:before {
    content: "\e952";
}
.icon-filled-car:before {
    content: "\e953";
}
.icon-car-1:before {
    content: "\e954";
}
.icon-filled-route:before {
    content: "\e955";
}
.icon-route:before {
    content: "\e956";
}
.icon-filled-charge-stations:before {
    content: "\e957";
}
.icon-charge-stations:before {
    content: "\e958";
}
.icon-phone:before {
    content: "\e959";
}
.icon-filled-phone:before {
    content: "\e95a";
}
.icon-layers:before {
    content: "\e95b";
}
.icon-filled-layers:before {
    content: "\e95c";
}
.icon-projects:before {
    content: "\e95d";
}
.icon-filled-brand:before {
    content: "\e95e";
}
.icon-brand:before {
    content: "\e95f";
}
.icon-filled-projects:before {
    content: "\e960";
}
.icon-fan:before {
    content: "\e961";
}
.icon-filled-fan:before {
    content: "\e962";
}
.icon-filled-location-center:before {
    content: "\e963";
}
.icon-location-center:before {
    content: "\e964";
}
.icon-slashes-1:before {
    content: "\e965";
}
.icon-dashboard-alt:before {
    content: "\e966";
}
.icon-dashboard:before {
    content: "\e967";
}
.icon-faq-alt-2:before {
    content: "\e968";
}
.icon-faq-alt:before {
    content: "\e969";
}
.icon-question:before {
    content: "\e96a";
}
.icon-voyager:before {
    content: "\e96b";
}
.icon-new-app:before {
    content: "\e96c";
}
.icon-close-1:before {
    content: "\e96d";
}
.icon-bullets:before {
    content: "\e96e";
}
.icon-components:before {
    content: "\e96f";
}
.icon-location:before {
    content: "\e970";
}
.icon-qr-code:before {
    content: "\e971";
}
.icon-circle-chevron-down:before {
    content: "\e972";
}
.icon-circle-cross:before {
    content: "\e973";
}
.icon-circle-pending:before {
    content: "\e974";
}
.icon-circle-checkmark:before {
    content: "\e975";
}
.icon-heart:before {
    content: "\e976";
}
.icon-building-blocks:before {
    content: "\e977";
}
.icon-slashes:before {
    content: "\e978";
}
.icon-documentation:before {
    content: "\e979";
}
.icon-globe:before {
    content: "\e97a";
}
.icon-menu:before {
    content: "\e97b";
}
.icon-image:before {
    content: "\e97c";
}
.icon-circle-minus:before {
    content: "\e97d";
}
.icon-circle-plus:before {
    content: "\e97e";
}
.icon-search:before {
    content: "\e97f";
}
.icon-car:before {
    content: "\e980";
}
.icon-eye-invisible:before {
    content: "\e981";
}
.icon-eye-visible:before {
    content: "\e982";
}
.icon-clipboard:before {
    content: "\e983";
}
.icon-edit:before {
    content: "\e984";
}
.icon-delete:before {
    content: "\e985";
}
.icon-circle-arrow-down:before {
    content: "\e986";
}
.icon-circle-arrow-up:before {
    content: "\e987";
}
.icon-side-panel-bottom:before {
    content: "\e988";
}
.icon-side-panel-top:before {
    content: "\e989";
}
.icon-side-panel-right:before {
    content: "\e98a";
}
.icon-side-panel-left:before {
    content: "\e98b";
}
.icon-map-marker:before {
    content: "\e98c";
}
.icon-warning-triangle:before {
    content: "\e98d";
}
.icon-warning-circle:before {
    content: "\e98e";
}
.icon-info:before {
    content: "\e98f";
}
.icon-filter-alt:before {
    content: "\e990";
}
.icon-filter:before {
    content: "\e991";
}
.icon-export:before {
    content: "\e992";
}
.icon-import:before {
    content: "\e993";
}
.icon-log-out:before {
    content: "\e994";
}
.icon-log-in:before {
    content: "\e995";
}
.icon-terminal:before {
    content: "\e996";
}
.icon-graph-bars:before {
    content: "\e997";
}
.icon-graph-line:before {
    content: "\e998";
}
.icon-add-project:before {
    content: "\e999";
}
.icon-next:before {
    content: "\e99a";
}
.icon-survey:before {
    content: "\e99b";
}
.icon-code:before {
    content: "\e99c";
}
.icon-arrow-up:before {
    content: "\e99d";
}
.icon-arrow-down:before {
    content: "\e99e";
}
.icon-off-indicator:before {
    content: "\e99f";
}
.icon-on-indicator:before {
    content: "\e9a0";
}
.icon-slash:before {
    content: "\e9a1";
}
.icon-enter:before {
    content: "\e9a2";
}
.icon-minus:before {
    content: "\e9a3";
}
.icon-chevron-down:before {
    content: "\e9a4";
}
.icon-chevron-up:before {
    content: "\e9a5";
}
.icon-chevron-right:before {
    content: "\e9a6";
}
.icon-chevron-left:before {
    content: "\e9a7";
}
.icon-arrow-left:before {
    content: "\e9a8";
}
.icon-arrow-right:before {
    content: "\e9a9";
}
.icon-arrow-up-left:before {
    content: "\e9aa";
}
.icon-arrow-up-right:before {
    content: "\e9ab";
}
.icon-add:before {
    content: "\e9ac";
}
.icon-italic:before {
    content: "\e9ad";
}
.icon-bold:before {
    content: "\e9ae";
}
.icon-h3:before {
    content: "\e9af";
}
.icon-h2:before {
    content: "\e9b0";
}
.icon-h1:before {
    content: "\e9b1";
}
.icon-default:before {
    content: "\e9b2";
}
.icon-chademo:before {
    content: "\e9b3";
}
.icon-iec_62196_t3a_c:before {
    content: "\e9b4";
}
.icon-tesla_r:before {
    content: "\e9b5";
}
.icon-tesla_s:before {
    content: "\e9b6";
}
.icon-iec_62196_t1:before {
    content: "\e9b7";
}
.icon-iec_62196_t2:before {
    content: "\e9b8";
}
.icon-iec_62196_t1_combo:before {
    content: "\e9b9";
}
.icon-iec_62196_t2_combo:before {
    content: "\e9ba";
}
.icon-domestic_l:before {
    content: "\e9bb";
}
.icon-domestic_k:before {
    content: "\e9bc";
}
.icon-domestic_j:before {
    content: "\e9bd";
}
.icon-domestic_i:before {
    content: "\e9be";
}
.icon-domestic_h:before {
    content: "\e9bf";
}
.icon-domestic_g:before {
    content: "\e9c0";
}
.icon-domestic_f:before {
    content: "\e9c1";
}
.icon-domestic_e:before {
    content: "\e9c2";
}
.icon-domestic_d:before {
    content: "\e9c3";
}
.icon-domestic_c:before {
    content: "\e9c4";
}
.icon-domestic_b:before {
    content: "\e9c5";
}
.icon-domestic_a:before {
    content: "\e9c6";
}
.icon-stations-along-route:before {
    content: "\e9c7";
}
.icon-archive:before {
    content: "\e9c8";
}
.icon-large-connected:before {
    content: "\e9c9";
}
.icon-large-disconnected:before {
    content: "\e9ca";
}
.icon-connect:before {
    content: "\e9cb";
}
.icon-disconnect:before {
    content: "\e9cc";
}
.icon-large-search:before {
    content: "\e9cd";
}
.icon-auto-add:before {
    content: "\e9ce";
}
.icon-circle-arrow-right-up:before {
    content: "\e9cf";
}
.icon-envelope:before {
    content: "\e9d0";
}
.icon-filled-envelope:before {
    content: "\e9d1";
}