/* Icons */
.icon-global {
    --svg: url(../icons/global.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-arrow-down {
    --svg: url(../icons/arrow-down.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-arrow-right {
    --svg: url(../icons/arrow-right.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-switch-line {
    --svg: url(../icons/switch-line.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-cloud {
    --svg: url(../icons/cloud.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-sun {
    --svg: url(../icons/sun.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-phone-line {
    --svg: url(../icons/phone-line.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-mail-line {
    --svg: url(../icons/mail-line.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-map {
    --svg: url(../icons/map.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-arrow-right-long {
    --svg: url(../icons/arrow-right-long.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-home-2 {
    --svg: url(../icons/home-2.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-map-2 {
    --svg: url(../icons/map-2.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-menu-fill {
    --svg: url(../icons/menu-fill.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-close-line {
    --svg: url(../icons/close-line.svg);
    -webkit-mask: var(--svg) no-repeat 50% 50%;
    mask: var(--svg) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}


/* Icons Settings */

.icon-size {
    --default-icon-size: 1.5rem;
    width: var(--default-icon-size);
    height: var(--default-icon-size);
}

.icon-size-xs {
    --default-icon-size: 0.75rem;
    width: var(--default-icon-size);
    height: var(--default-icon-size);
    min-width: var(--default-icon-size);
}

.icon-size-s {
    --default-icon-size: 1rem;
    width: var(--default-icon-size);
    height: var(--default-icon-size);
    min-width: var(--default-icon-size);
}

.icon-size-m {
    --default-icon-size: 2rem;
    width: var(--default-icon-size);
    height: var(--default-icon-size);
    min-width: var(--default-icon-size);
}


.icon-size-l {
    --default-icon-size: 2.5rem;
    width: var(--default-icon-size);
    height: var(--default-icon-size);
    min-width: var(--default-icon-size);
}

.icon {
    background-color: var(--main-text-color);
    width: 100%;
    height: 100%;
    transition: background-color var(--transition), transform var(--transition);
}

.icon-white {
    background-color: var(--white);
}

.icon-main {
    background-color: var(--main-text-color);
}

.icon-primary {
    background-color: var(--primary);
}

.icon-sub {
    background-color: var(--sub-text-color);
}