.icon__download::before,
.icon__play-filled::before,
.icon__link::before,
.icon__document::before,
.icon__alert::before,
.icon__plus::before {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    background: currentColor;
    vertical-align: middle;
    transition: inherit;
}

.icon__download::before {
    -webkit-mask-image: url(/Frontend/Client/Assets/Icons/cloud-arrow-down.svg);
    mask-image: url(/Frontend/Client/Assets/Icons/cloud-arrow-down.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.icon__play-filled::before {
    -webkit-mask-image: url(/Frontend/Client/Assets/Icons/play-filled.svg);
    mask-image: url(/Frontend/Client/Assets/Icons/play-filled.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.icon__link::before {
    -webkit-mask-image: url(/Frontend/Client/Assets/Icons/link.svg);
    mask-image: url(/Frontend/Client/Assets/Icons/link.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.icon__document::before {
    -webkit-mask-image: url(/Frontend/Client/Assets/Icons/pen-to-square.svg);
    mask-image: url(/Frontend/Client/Assets/Icons/pen-to-square.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.icon__alert::before {
    -webkit-mask-image: url(/Frontend/Client/Assets/Icons/triangle-exclamation.svg);
    mask-image: url(/Frontend/Client/Assets/Icons/triangle-exclamation.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    width: 64px;
    height: 64px;
    color: #2e6b75;
}

.icon__plus::before {
    -webkit-mask-image: url(/Frontend/Client/Assets/Icons/plus.svg);
    mask-image: url(/Frontend/Client/Assets/Icons/plus.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    width: 64px;
    height: 64px;
    color: #2e6b75;
}