/*
    TODO:
    Шрифты подгружаются только глобально, а не в кажом компоненте
    (Можно и в отдельный файл, но иконки уже в проектах подключены)
*/

/*********************** fonts ***********************/

/* cyrillic-ext */
@font-face {
    font-family: 'inter-regular';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/inter-cyrillic-ext.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'inter-regular';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/inter-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
    font-family: 'inter-regular';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/inter-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'inter-regular';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/inter-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}




/*********************** icons ***********************/

.icon-xs {
    min-width: 10px;
    max-width: 10px;
    height: 10px;
}

.icon-sm {
    min-width: 16px;
    max-width: 16px;
    height: 16px;
}

.icon-md {
    min-width: 24px;
    max-width: 24px;
    height: 24px;
}

.icon-lg {
    min-width: 32px;
    max-width: 32px;
    height: 32px;
}

.icon-big-blue {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 6px;
    background-color: #4094f7;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* start UI */

.icon-plane {
    mask-image: url('../assets/images/plane.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-train {
    mask-image: url('../assets/images/train.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-bed {
    mask-image: url('../assets/images/bed.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-info {
    mask-image: url('../assets/images/info.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-chevron-right {
    mask-image: url('../assets/images/chevron-right.svg');
    mask-size: 100% 100%;
    background-color: #84919a;
}

.icon-chevron-down {
    mask-image: url('../assets/images/chevron-down.svg');
    mask-size: 100% 100%;
    background-color: #84919a;
}

.icon-chevron-up {
    mask-image: url('../assets/images/chevron-up.svg');
    mask-size: 100% 100%;
    background-color: #84919a;
}

.icon-up-arrow {
    mask-image: url('../assets/images/up-arrow.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-down-arrow {
    mask-image: url('../assets/images/down-arrow.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-little {
    mask-image: url('../assets/images/little.svg');
    background-color: #252c32;
    mask-size: 100% 100%;
}

.icon-more {
    mask-image: url('../assets/images/more.svg');
    background-color: #252c32;
    mask-size: 100% 100%;
}

.icon-rotate {
    mask-image: url('../assets/images/rotate.svg');
    background-color: #252c32;
    mask-size: 100% 100%;
}

.icon-stop {
    mask-image: url('../assets/images/stop.svg');
    mask-size: 100% 100%;
    background-color: #f76659;
}

.icon-approved {
    mask-image: url('../assets/images/approved.svg');
    mask-size: 100% 100%;
    background-color: #87d19e;
}

.icon-alarm {
    mask-image: url('../assets/images/alarm.svg');
    mask-size: 100% 100%;
    background-color: #f8c51b;
}

.icon-eye {
    mask-image: url('../assets/images/eye.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-download {
    mask-image: url('../assets/images/download.svg');
    mask-size: 100% 100%;
    background-color: #252c32;
}

.icon-change {
    mask-image: url('../assets/images/change.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-close {
    mask-image: url('../assets/images/close.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-close-all {
    mask-image: url('../assets/images/close-all.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-calendar {
    mask-image: url('../assets/images/calendar.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-back {
    mask-image: url('../assets/images/back.svg');
    mask-size: 100% 100%;
    background-color: #4094F7;
}

.icon-back-forward {
    mask-image: url('../assets/images/back-forward.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-search {
    mask-image: url('../assets/images/search.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-plus {
    mask-image: url('../assets/images/plus.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-upload {
    mask-image: url('../assets/images/upload.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-update {
    mask-image: url('../assets/images/update.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-distributing {
    mask-image: url('../assets/images/distributing.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-markers {
    mask-image: url('../assets/images/markers.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-notification {
    mask-image: url('../assets/images/notification.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-gutter-vertical {
    mask-image: url('../assets/images/gutter-vertical.svg');
    mask-size: 100% 100%;
    background-color: #252C32;
}

.icon-gutter-horizontal {
    mask-image: url('../assets/images/gutter-horizontal.svg');
    mask-size: 100% 100%;
    background-color: #252C32;
}

.icon-bus {
    mask-image: url('../assets/images/bus.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-business {
    mask-image: url('../assets/images/business.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-check {
    mask-image: url('../assets/images/check.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-delete {
    mask-image: url('../assets/images/delete.svg');
    mask-size: 100% 100%;
    background-color: #f76659;
}

.icon-pencil {
    mask-image: url('../assets/images/pencil.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-folder {
    mask-image: url('../assets/images/folder.svg');
    mask-size: 100% 100%;
    background-color: #f6f8f9;
}

.icon-right {
    mask-image: url('../assets/images/right.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-login {
    mask-image: url('../assets/images/login.svg');
    mask-size: 100% 100%;
    background-color: #B0BABF;
}

.icon-logout {
    mask-image: url('../assets/images/logout.svg');
    mask-size: 100% 100%;
    background-color: #4094f7;
}

.icon-minus {
    mask-image: url('../assets/images/minus.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-checkbox {
    mask-image: url('../assets/images/checkbox.svg');
    mask-size: 100% 100%;
    background-color: #4094f7;
}

.icon-picture {
    mask-image: url('../assets/images/picture.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-video {
    mask-image: url('../assets/images/video.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

/* end UI */

.icon-empty {
    mask-image: url('../assets/images/empty-opacity.svg');
    mask-size: 100% 100%;
    background-color: #b0babf;
}

.icon-list {
    mask-image: url('../assets/images/list.svg');
    mask-size: 100% 100%;
    background-color: #fff;
}

.icon-search-fill {
    mask-image: url('../assets/images/search-filled.svg');
    mask-size: 100% 100%;
    background-color: #e5e9eb;
}

.icon-save {
    mask-image: url('../assets/images/save.svg');
    mask-size: 100% 100%;
    background-color: #252c32;
}

.icon-link {
    mask-image: url('../assets/images/link.svg');
    mask-size: 100% 100%;
    background-color: #84919a;
}

.icon-email {
    mask-image: url('../assets/images/email.svg');
    mask-size: 100% 100%;
    background-color: #84919a;
}

.icon-redo {
    mask-image: url('../assets/images/redo.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-undo {
    mask-image: url('../assets/images/undo.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-bold {
    mask-image: url('../assets/images/bold.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-italic {
    mask-image: url('../assets/images/italic.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-underline {
    mask-image: url('../assets/images/underlined.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-strikethrough {
    mask-image: url('../assets/images/strikethrough.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-justify-left {
    mask-image: url('../assets/images/justify-left.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-justify-center {
    mask-image: url('../assets/images/justify-center.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-justify-right {
    mask-image: url('../assets/images/justify-right.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-align-justify {
    mask-image: url('../assets/images/align-justify.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-indent {
    mask-image: url('../assets/images/indent.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-outdent {
    mask-image: url('../assets/images/outdent.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-unordered-list {
    mask-image: url('../assets/images/unordered-list.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-ordered-list {
    mask-image: url('../assets/images/ordered-list.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-remove-format {
    mask-image: url('../assets/images/remove-format.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-subscript {
    mask-image: url('../assets/images/subscript.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-superscript {
    mask-image: url('../assets/images/superscript.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.icon-addlink {
    mask-image: url('../assets/images/addlink.svg');
    mask-size: 100% 100%;
    background-color: #84919A;
}

.notification-badge::after {
    content: " ";
    position: absolute;
    top: -3px;
    left: -3px;
    background-color: #F8C51B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 10px;
    height: 10px;
}

.icon-check-mark {
    mask-image: url('../assets/images/check-mark.svg');
    mask-size: 100% 100%;
    background-color: #87D19E;
}

.icon-waiting {
    mask-image: url('../assets/images/waiting.svg');
    mask-size: 100% 100%;
    background-color: #F8C51B;
}

.icon-send {
    mask-image: url('../assets/images/send.svg');
    mask-size: 100% 100%;
    background-color: #4094F7;
}

.icon-forward-research {
    mask-image: url('../assets/images/forward-research.svg');
    mask-size: 100% 100%;
    background-color: #4094F7;
}

.icon-area-resize {
    mask-image: url('../assets/images/area-resize.svg');
    mask-size: 100% 100%;
    background-color: #B0BABF;
}

.icon-spinner {
    mask-image: url('../assets/images/spinner.svg');
    mask-size: 100% 100%;
    background-color: #B0BABF;
}

.icon-file {
    mask-image: url('../assets/images/file.svg');
    mask-size: 100% 100%;
    background-color: #B0BABF;
}

.icon-receipt {
    mask-image: url('../assets/images/receipt.svg');
    mask-size: 100% 100%;
    background-color: #B0BABF;
}

.icon-skipped {
    mask-image: url('../assets/images/skipped.svg');
    mask-size: 100% 100%;
    background-color: #84919a;
}

.icon-in-progress {
    mask-image: url('../assets/images/in-progress.svg');
    mask-size: 100% 100%;
    background-color: #4094F7;
}

.icon-cancelled {
    mask-image: url('../assets/images/cancelled.svg');
    mask-size: 100% 100%;
    background-color: #F76659;
}

.icon-bell {
    mask-image: url('../assets/images/bell.svg');
    mask-size: 100% 100%;
    background-color: #B0BABF;
}