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

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

@font-face {
    font-family: 'inter-regular';
    src: url('../fonts/inter2.woff2') format('woff2');
}

/*********************** 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-size: 100% 100%;
    background-color: #84919A;
    mask-image: url('../assets/images/info.svg');
}

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

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

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

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

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

.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-size: 100% 100%;
    background-color: #f76659;
    mask-image: url('../assets/images/stop.svg');
}

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

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

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

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

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

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

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

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

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

.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: #B0BABF;
}

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

/* end UI */

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

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

.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: #5f6368;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-clock-in-process {
    mask-image: url('../assets/images/clock-in-process.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;
}