@font-face {
    font-display: swap;
    font-family: 'eui-icons';
    font-style: normal;
    font-weight: normal;
    src: url('#{$eui-assets-path}/fonts/eui-icons/eui-icons.eot');
    src:
        url('#{$eui-assets-path}/fonts/eui-icons/eui-icons.eot#iefix') format('embedded-opentype'),
        url('#{$eui-assets-path}/fonts/eui-icons/eui-icons.woff2?v=2.4') format('woff2'),
        url('#{$eui-assets-path}/fonts/eui-icons/eui-icons.woff?v=2.4') format('woff'),
        url('#{$eui-assets-path}/fonts/eui-icons/eui-icons.ttf?v=2.4') format('truetype'),
        url('#{$eui-assets-path}/fonts/eui-icons/eui-icons.svg#eui-icons') format('svg');
}

.eui-icon {
    display: inline-block;
    font-family: v(eui-base-font-family-icons);
    font-size: v(eui-base-icon-size);   // DS aligned 24pt
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal !important;
    font-weight: normal !important;
    letter-spacing: normal;
    line-height: 1;     // Sets to 1:1 ratio to allow squared 24x24 icons
    position: relative;
    text-rendering: auto;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
}

// SPECIFIC SIZES RATIOS
.eui-icon-2x {
    font-size: calc(2rem / #{v(eui-base-scale-factor)});
    height: calc(2 * #{v(eui-base-font-size)});
    width: calc(2 * #{v(eui-base-font-size)});
}

.eui-icon-3x {
    font-size: calc(3rem / #{v(eui-base-scale-factor)});
    height: calc(3 * #{v(eui-base-font-size)});
    width: calc(3 * #{v(eui-base-font-size)});
}

.eui-icon-4x {
    font-size: calc(4rem / #{v(eui-base-scale-factor)});
    height: calc(4 * #{v(eui-base-font-size)});
    width: calc(4 * #{v(eui-base-font-size)});
}

.eui-icon-5x {
    font-size: calc(5rem / #{v(eui-base-scale-factor)});
    height: calc(5 * #{v(eui-base-font-size)});
    width: calc(5 * #{v(eui-base-font-size)});
}

.eui-icon-fw {
    text-align: center;
    width: auto;
}

.eui-icon-ul {
    list-style-type: none;
    margin-left: calc(#{v(eui-base-spacing-xl)} + #{v(eui-base-spacing-3xs)});
    padding-left: 0;
}

.eui-icon-ul > li {
    position: relative;
}

.eui-icon-li {
    left: -2.14285714em;
    position: absolute;
    text-align: center;
    top: 0.14285714em;
    width: 2.14285714em;
}

.eui-icon-li.eui-icon-lg {
    left: -1.85714286em;
}

// SPIN ANIMATION
.eui-icon--spin {
    animation: eui-icon-spin-animation 1s infinite linear;
}
@keyframes eui-icon-spin-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359dg);
        transform: rotate(359deg);
    }
}


///////////////////////////////////////////
// ICONS HERE => Please do NOT format this!
///////////////////////////////////////////
/* stylelint-disable */
.eui-icon-add {&::before {content: $eui-icon-add;}}
.eui-icon-add-circle {&::before {content: $eui-icon-add-circle;}}
.eui-icon-add-circle-o {&::before {content: $eui-icon-add-circle-o;}}
.eui-icon-adjust {&::before {content: $eui-icon-adjust;}}
.eui-icon-angle-down {&::before {content: $eui-icon-angle-down;}}
.eui-icon-angle-left {&::before {content: $eui-icon-angle-left;}}
.eui-icon-angle-right {&::before {content: $eui-icon-angle-right;}}
.eui-icon-angle-up {&::before {content: $eui-icon-angle-up;}}
.eui-icon-apps {&::before {content: $eui-icon-apps;}}
.eui-icon-arrow-down {&::before {content: $eui-icon-arrow-down;}}
.eui-icon-arrow-down-thin {&::before {content: $eui-icon-arrow-down-thin;}}
.eui-icon-arrow-left {&::before {content: $eui-icon-arrow-left;}}
.eui-icon-arrow-left-thin {&::before {content: $eui-icon-arrow-left-thin;}}
.eui-icon-arrow-right {&::before {content: $eui-icon-arrow-right;}}
.eui-icon-arrow-right-thin {&::before {content: $eui-icon-arrow-right-thin;}}
.eui-icon-arrow-up {&::before {content: $eui-icon-arrow-up;}}
.eui-icon-arrow-up-thin {&::before {content: $eui-icon-arrow-up-thin;}}
.eui-icon-bank {&::before {content: $eui-icon-bank;}}
.eui-icon-bars {&::before {content: $eui-icon-bars;}}
.eui-icon-bell {&::before {content: $eui-icon-bell;}}
.eui-icon-bolt {&::before {content: $eui-icon-bolt;}}
.eui-icon-book-o {&::before {content: $eui-icon-book-o;}}
.eui-icon-bookmark {&::before {content: $eui-icon-bookmark;}}
.eui-icon-bookmark-o {&::before {content: $eui-icon-bookmark-o;}}
.eui-icon-briefcase-o {&::before {content: $eui-icon-briefcase-o;}}
.eui-icon-calendar {&::before {content: $eui-icon-calendar;}}
.eui-icon-camera {&::before {content: $eui-icon-camera;}}
.eui-icon-camera-add {&::before {content: $eui-icon-camera-add;}}
.eui-icon-caret-down {&::before {content: $eui-icon-caret-down;}}
.eui-icon-caret-first {&::before {content: $eui-icon-caret-first;}}
.eui-icon-caret-last {&::before {content: $eui-icon-caret-last;}}
.eui-icon-caret-left {&::before {content: $eui-icon-caret-left;}}
.eui-icon-caret-right {&::before {content: $eui-icon-caret-right;}}
.eui-icon-caret-up {&::before {content: $eui-icon-caret-up;}}
.eui-icon-chain {&::before {content: $eui-icon-chain;}}
.eui-icon-chart-area {&::before {content: $eui-icon-chart-area;}}
.eui-icon-chart-bar {&::before {content: $eui-icon-chart-bar;}}
.eui-icon-chart-line {&::before {content: $eui-icon-chart-line;}}
.eui-icon-chart-pie {&::before {content: $eui-icon-chart-pie;}}
.eui-icon-check {&::before {content: $eui-icon-check;}}
.eui-icon-check-circle {&::before {content: $eui-icon-check-circle;}}
.eui-icon-check-m {&::before {content: $eui-icon-check-m;}}
.eui-icon-checkbox {&::before {content: $eui-icon-checkbox;}}
.eui-icon-checkbox-intermediate {&::before {content: $eui-icon-checkbox-intermediate;}}
.eui-icon-checkbox-outline {&::before {content: $eui-icon-checkbox-outline;}}
.eui-icon-chevron-down {&::before {content: $eui-icon-chevron-down;}}
.eui-icon-chevron-left {&::before {content: $eui-icon-chevron-left;}}
.eui-icon-chevron-right {&::before {content: $eui-icon-chevron-right;}}
.eui-icon-chevron-up {&::before {content: $eui-icon-chevron-up;}}
.eui-icon-circle {&::before {content: $eui-icon-circle;}}
.eui-icon-circle-o {&::before {content: $eui-icon-circle-o;}}
.eui-icon-circle-thin {&::before {content: $eui-icon-circle-thin;}}
.eui-icon-clock {&::before {content: $eui-icon-clock;}}
.eui-icon-close-m {&::before {content: $eui-icon-close-m;}}
.eui-icon-code {&::before {content: $eui-icon-code;}}
.eui-icon-comment {&::before {content: $eui-icon-comment;}}
.eui-icon-copy-o {&::before {content: $eui-icon-copy-o;}}
.eui-icon-copy-page-o {&::before {content: $eui-icon-copy-page-o;}}
.eui-icon-copyright {&::before {content: $eui-icon-copyright;}}
.eui-icon-create {&::before {content: $eui-icon-create;}}
.eui-icon-credit-card {&::before {content: $eui-icon-credit-card;}}
.eui-icon-dashboard {&::before {content: $eui-icon-dashboard;}}
.eui-icon-dedent {&::before {content: $eui-icon-dedent;}}
.eui-icon-delete {&::before {content: $eui-icon-delete;}}
.eui-icon-delete-forever {&::before {content: $eui-icon-delete-forever;}}
.eui-icon-delete-o {&::before {content: $eui-icon-delete-o;}}
.eui-icon-drag-indicator {&::before {content: $eui-icon-drag-indicator;}}
.eui-icon-e-help {&::before {content: $eui-icon-e-help;}}
// ECL ///////////////////////////////////
.eui-icon-ecl-audio {&::before {content: $eui-icon-ecl-audio;}}
.eui-icon-ecl-book {&::before {content: $eui-icon-ecl-book;}}
.eui-icon-ecl-calendar {&::before {content: $eui-icon-ecl-calendar;}}
.eui-icon-ecl-close {&::before {content: $eui-icon-ecl-close;}}
.eui-icon-ecl-close-filled {&::before {content: $eui-icon-ecl-close-filled;}}
.eui-icon-ecl-copy {&::before {content: $eui-icon-ecl-copy;}}
.eui-icon-ecl-digital {&::before {content: $eui-icon-ecl-digital;}}
.eui-icon-ecl-download {&::before {content: $eui-icon-ecl-download;}}
.eui-icon-ecl-edit {&::before {content: $eui-icon-ecl-edit;}}
.eui-icon-ecl-error {&::before {content: $eui-icon-ecl-error;}}
.eui-icon-ecl-external {&::before {content: $eui-icon-ecl-external;}}
.eui-icon-ecl-facebook {&::before {content: $eui-icon-ecl-facebook;}}
.eui-icon-ecl-faq {&::before {content: $eui-icon-ecl-faq;}}
.eui-icon-ecl-feedback {&::before {content: $eui-icon-ecl-feedback;}}
.eui-icon-ecl-file {&::before {content: $eui-icon-ecl-file;}}
.eui-icon-ecl-fullscreen {&::before {content: $eui-icon-ecl-fullscreen;}}
.eui-icon-ecl-gear {&::before {content: $eui-icon-ecl-gear;}}
.eui-icon-ecl-generic-lang {&::before {content: $eui-icon-ecl-generic-lang;}}
.eui-icon-ecl-global {&::before {content: $eui-icon-ecl-global;}}
.eui-icon-ecl-growth {&::before {content: $eui-icon-ecl-growth;}}
.eui-icon-ecl-hamburger {&::before {content: $eui-icon-ecl-hamburger;}}
.eui-icon-ecl-image {&::before {content: $eui-icon-ecl-image;}}
.eui-icon-ecl-infographic {&::before {content: $eui-icon-ecl-infographic;}}
.eui-icon-ecl-information {&::before {content: $eui-icon-ecl-information;}}
.eui-icon-ecl-instagram {&::before {content: $eui-icon-ecl-instagram;}}
.eui-icon-ecl-linkedin {&::before {content: $eui-icon-ecl-linkedin;}}
.eui-icon-ecl-livestreaming {&::before {content: $eui-icon-ecl-livestreaming;}}
.eui-icon-ecl-multiple-files {&::before {content: $eui-icon-ecl-multiple-files;}}
.eui-icon-ecl-organigram {&::before {content: $eui-icon-ecl-organigram;}}
.eui-icon-ecl-pinterest {&::before {content: $eui-icon-ecl-pinterest;}}
.eui-icon-ecl-print {&::before {content: $eui-icon-ecl-print;}}
.eui-icon-ecl-regulation {&::before {content: $eui-icon-ecl-regulation;}}
.eui-icon-ecl-skype {&::before {content: $eui-icon-ecl-skype;}}
.eui-icon-ecl-solid-arrow {&::before {content: $eui-icon-ecl-solid-arrow;}}
.eui-icon-ecl-spinner {&::before {content: $eui-icon-ecl-spinner;}}
.eui-icon-ecl-spreadsheet {&::before {content: $eui-icon-ecl-spreadsheet;}}
.eui-icon-ecl-twitter {&::before {content: $eui-icon-ecl-twitter;}}
.eui-icon-ecl-video {&::before {content: $eui-icon-ecl-video;}}
.eui-icon-ecl-youtube {&::before {content: $eui-icon-ecl-youtube;}}
// ECL END /////////////////////

.eui-icon-edit {&::before {content: $eui-icon-edit;}}
.eui-icon-envelope {&::before {content: $eui-icon-envelope;}}
.eui-icon-envelope-o {&::before {content: $eui-icon-envelope-o;}}
.eui-icon-eur {&::before {content: $eui-icon-eur;}}
.eui-icon-exclamation {&::before {content: $eui-icon-exclamation;}}
.eui-icon-exclamation-circle {&::before {content: $eui-icon-exclamation-circle;}}
.eui-icon-exclamation-triangle {&::before {content: $eui-icon-exclamation-triangle;}}
.eui-icon-exit {&::before {content: $eui-icon-exit;}}
.eui-icon-file {&::before {content: $eui-icon-file;}}
.eui-icon-file-o {&::before {content: $eui-icon-file-o;}}
.eui-icon-files-o {&::before {content: $eui-icon-files-o;}}
.eui-icon-filter {&::before {content: $eui-icon-filter;}}
.eui-icon-flag {&::before {content: $eui-icon-flag;}}
.eui-icon-flag-o {&::before {content: $eui-icon-flag-o;}}
.eui-icon-folder {&::before {content: $eui-icon-folder;}}
.eui-icon-folder-o {&::before {content: $eui-icon-folder-o;}}
.eui-icon-folder-open {&::before {content: $eui-icon-folder-open;}}
.eui-icon-folder-open-o {&::before {content: $eui-icon-folder-open-o;}}
.eui-icon-gender-f {&::before {content: $eui-icon-gender-f;}}
.eui-icon-gender-fm {&::before {content: $eui-icon-gender-fm;}}
.eui-icon-gender-m {&::before {content: $eui-icon-gender-m;}}
.eui-icon-grid {&::before {content: $eui-icon-grid;}}
.eui-icon-home {&::before {content: $eui-icon-home;}}
.eui-icon-home-o {&::before {content: $eui-icon-home-o;}}
.eui-icon-home-thin {&::before {content: $eui-icon-home;}}
.eui-icon-home-thin-o {&::before {content: $eui-icon-home-o;}}
.eui-icon-image {&::before {content: $eui-icon-image;}}
.eui-icon-image-add {&::before {content: $eui-icon-image-add;}}
.eui-icon-indent {&::before {content: $eui-icon-indent;}}
.eui-icon-info {&::before {content: $eui-icon-info;}}
.eui-icon-info-circle {&::before {content: $eui-icon-info-circle;}}
.eui-icon-info-circle-thin {&::before {content: $eui-icon-info-circle-thin;}}
.eui-icon-info-circle-thin-o {&::before {content: $eui-icon-info-circle-thin-o;}}
.eui-icon-language-selector {&::before {content: $eui-icon-language-selector;}}
.eui-icon-laptop {&::before {content: $eui-icon-laptop;}}
.eui-icon-level-down {&::before {content: $eui-icon-level-down;}}
.eui-icon-level-up {&::before {content: $eui-icon-level-up;}}
.eui-icon-link {&::before {content: $eui-icon-link;}}
.eui-icon-list {&::before {content: $eui-icon-list;}}
.eui-icon-list-thin {&::before {content: $eui-icon-list-thin;}}
.eui-icon-lock {&::before {content: $eui-icon-lock;}}
.eui-icon-lock-o {&::before {content: $eui-icon-lock-o;}}
.eui-icon-logout-thin {&::before {content: $eui-icon-logout-thin;}}
.eui-icon-map-marker {&::before {content: $eui-icon-map-marker;}}
.eui-icon-minus {&::before {content: $eui-icon-minus;}}
.eui-icon-minus-circle {&::before {content: $eui-icon-minus-circle;}}
.eui-icon-minus-circle-thin {&::before {content: $eui-icon-minus-circle-thin;}}
.eui-icon-minus-circle-thin-o {&::before {content: $eui-icon-minus-circle-thin-o;}}
.eui-icon-more-horizontal {&::before {content: $eui-icon-more-horizontal;}}
.eui-icon-more-vertical {&::before {content: $eui-icon-more-vertical;}}
.eui-icon-navigate {&::before {content: $eui-icon-navigate;}}
.eui-icon-navigate-circle-o {&::before {content: $eui-icon-navigate-circle-o;}}
.eui-icon-pencil {&::before {content: $eui-icon-pencil;}}
.eui-icon-person {&::before {content: $eui-icon-person;}}
.eui-icon-person-group {&::before {content: $eui-icon-person-group;}}
.eui-icon-person-thin {&::before {content: $eui-icon-person-thin;}}
.eui-icon-person-thin-o {&::before {content: $eui-icon-person-thin-o;}}
.eui-icon-plug {&::before {content: $eui-icon-plug;}}
.eui-icon-plus {&::before {content: $eui-icon-plus;}}
.eui-icon-plus-circle {&::before {content: $eui-icon-plus-circle;}}
.eui-icon-plus-circle-thin {&::before {content: $eui-icon-plus-circle-thin;}}
.eui-icon-plus-circle-thin-o {&::before {content: $eui-icon-plus-circle-thin-o;}}
.eui-icon-power-settings {&::before {content: $eui-icon-power-settings;}}
.eui-icon-pricetag {&::before {content: $eui-icon-pricetag;}}
.eui-icon-print {&::before {content: $eui-icon-print;}}
.eui-icon-printer {&::before {content: $eui-icon-printer;}}
.eui-icon-printer-o {&::before {content: $eui-icon-printer-o;}}
.eui-icon-pulse {&::before {content: $eui-icon-pulse;}}
.eui-icon-question {&::before {content: $eui-icon-question;}}
.eui-icon-question-circle {&::before {content: $eui-icon-question-circle;}}
.eui-icon-question-circle-o {&::before {content: $eui-icon-question-circle-o;}}
.eui-icon-question-thin {&::before {content: $eui-icon-question-thin;}}
.eui-icon-radio-button-checked {&::before {content: $eui-icon-radio-button-checked;}}
.eui-icon-radio-button-unchecked {&::before {content: $eui-icon-radio-button-unchecked;}}
.eui-icon-refresh {&::before {content: $eui-icon-refresh;}}
.eui-icon-remove {&::before {content: $eui-icon-remove;}}
.eui-icon-remove-circle {&::before {content: $eui-icon-remove-circle;}}
.eui-icon-remove-circle-o {&::before {content: $eui-icon-remove-circle-o;}}
.eui-icon-rss {&::before {content: $eui-icon-rss;}}
.eui-icon-rss-o {&::before {content: $eui-icon-rss-o;}}
.eui-icon-search {&::before {content: $eui-icon-search;}}
.eui-icon-search-m {&::before {content: $eui-icon-search-m;}}
.eui-icon-send {&::before {content: $eui-icon-send;}}
.eui-icon-settings {&::before {content: $eui-icon-settings;}}
.eui-icon-share {&::before {content: $eui-icon-share;}}
.eui-icon-sign-out{&::before {content: $eui-icon-sign-out;}}
.eui-icon-sitemap {&::before {content: $eui-icon-sitemap;}}
.eui-icon-sliders {&::before {content: $eui-icon-sliders;}}
.eui-icon-smartphone {&::before {content: $eui-icon-smartphone;}}
.eui-icon-sort {&::before {content: $eui-icon-sort;}}
.eui-icon-sort-asc {&::before {content: $eui-icon-sort-asc;}}
.eui-icon-sort-desc {&::before {content: $eui-icon-sort-desc;}}
.eui-icon-spinner {&::before {content: $eui-icon-spinner;}}
.eui-icon-star {&::before {content: $eui-icon-star;}}
.eui-icon-star-o {&::before {content: $eui-icon-star-o;}}
.eui-icon-swap-horizontal {&::before {content: $eui-icon-swap-horizontal;}}
.eui-icon-swap-vertical {&::before {content: $eui-icon-swap-vertical;}}
.eui-icon-sync {&::before {content: $eui-icon-sync;}}
.eui-icon-tablet {&::before {content: $eui-icon-tablet;}}
.eui-icon-tag {&::before {content: $eui-icon-tag;}}
.eui-icon-television {&::before {content: $eui-icon-television;}}
.eui-icon-thumb-down {&::before {content: $eui-icon-thumb-down;}}
.eui-icon-thumb-up {&::before {content: $eui-icon-thumb-up;}}
.eui-icon-times {&::before {content: $eui-icon-times;}}
.eui-icon-times-circle {&::before {content: $eui-icon-times-circle;}}
.eui-icon-times-circle-thin {&::before {content: $eui-icon-times-circle-thin;}}
.eui-icon-today {&::before {content: $eui-icon-today;}}
.eui-icon-upload {&::before {content: $eui-icon-upload;}}
.eui-icon-user-circle {&::before {content: $eui-icon-user-circle;}}
.eui-icon-user-circle-o {&::before {content: $eui-icon-user-circle-o;}}
.eui-icon-visibility {&::before {content: $eui-icon-visibility;}}
.eui-icon-visibility-off {&::before {content: $eui-icon-visibility-off;}}
.eui-icon-work {&::before {content: $eui-icon-work;}}
.eui-icon-work-o {&::before {content: $eui-icon-work-o;}}
.eui-icon-zoom-in {&::before {content: $eui-icon-zoom-in;}}
.eui-icon-zoom-out {&::before {content: $eui-icon-zoom-out;}}
.eui-icon-undo {&::before {content: $eui-icon-undo;}}
.eui-icon-redo {&::before {content: $eui-icon-redo;}}
