.icon {
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentcolor;
    mask-image: var(--icon-mask-image);
    mask-position: center;
    mask-repeat: no-repeat;
}

.icon-image {
    width: 1.25rem;
    height: 1.25rem;
    background-image: var(--icon-background-image);
    background-position: center;
    background-repeat: no-repeat;
}

.icon-back {
    --icon-mask-image: url("/images/back.svg");
}
.icon-close {
    --icon-mask-image: url("/images/close.svg");
}
.icon-demos {
    --icon-mask-image: url("/images/demos.svg");
}
.icon-docs {
    --icon-mask-image: url("/images/doc.svg");
}
.icon-menu {
    --icon-mask-image: url("/images/menu.svg");
}

/* pages */
.icon-ai-chat {
    --icon-mask-image: url("/images/pages/chat-sparkle.svg");
}
.icon-send {
    --icon-mask-image: url("/images/pages/send.svg");
}
.icon-eye {
    --icon-mask-image: url("/images/pages/eye.svg");
}
.icon-chart {
    --icon-mask-image: url("/images/pages/data-pie.svg");
}
.icon-counter {
    --icon-mask-image: url("/images/pages/counter.svg");
}
.icon-home {
    --icon-mask-image: url("/images/pages/home.svg");
}
.icon-pdf-viewer {
    --icon-mask-image: url("/images/pages/document-pdf.svg");
}
.icon-scheduler {
    --icon-mask-image: url("/images/pages/calendar.svg");
}
.icon-weather {
    --icon-mask-image: url("/images/pages/weather.svg");
}

/* account */
.icon-email {
    --icon-mask-image: url("/images/account/manage-email.svg");
}
.icon-external {
    --icon-mask-image: url("/images/account/user.svg");
}
.icon-log-in {
    --icon-mask-image: url("/images/account/log-in.svg");
}
.icon-log-out {
    --icon-mask-image: url("/images/account/log-out.svg");
}
.icon-password {
    --icon-mask-image: url("/images/account/manage-password.svg");
}
.icon-personal {
    --icon-mask-image: url("/images/account/manage-personal.svg");
}
.icon-profile {
    --icon-mask-image: url("/images/account/manage-profile.svg");
}
.icon-settings {
    --icon-mask-image: url("/images/account/settings.svg");
}
.icon-two-factor {
    --icon-mask-image: url("/images/account/manage-two-factor.svg");
}
.icon-user {
    --icon-mask-image: url("/images/account/user.svg");
}

/* actions */
.icon-add {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}
.icon-edit {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>");
}
.icon-save {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><polyline points='17 21 17 13 7 13 7 21'/><polyline points='7 3 7 8 15 8'/></svg>");
}
.icon-delete {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/><line x1='10' y1='11' x2='10' y2='17'/><line x1='14' y1='11' x2='14' y2='17'/></svg>");
}
.icon-trash {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/><line x1='10' y1='11' x2='10' y2='17'/><line x1='14' y1='11' x2='14' y2='17'/></svg>");
}
.icon-refresh {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg>");
}
.icon-search {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}
.icon-upload {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='m7 8 5-5 5 5'/><path d='M5 21h14a2 2 0 0 0 2-2v-4'/><path d='M3 15v4a2 2 0 0 0 2 2'/></svg>");
}
.icon-camera {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 4 16 7h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3l1.5-3z'/><circle cx='12' cy='13' r='4'/></svg>");
}
.icon-scan {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7V5a2 2 0 0 1 2-2h2'/><path d='M17 3h2a2 2 0 0 1 2 2v2'/><path d='M21 17v2a2 2 0 0 1-2 2h-2'/><path d='M7 21H5a2 2 0 0 1-2-2v-2'/><path d='M7 12h10'/><path d='M7 16h10'/></svg>");
}
.icon-list {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>");
}
.icon-kanban {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='5' height='16' rx='1'/><rect x='10' y='4' width='5' height='10' rx='1'/><rect x='17' y='4' width='4' height='13' rx='1'/></svg>");
}
.icon-copy {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
}
.icon-export {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
}
.icon-clear {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>");
}
.icon-check {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.icon-star {
    --icon-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
}

/* account/providers */
.icon-facebook {
    --icon-background-image: url("/images/account/providers/facebook-logo.svg");
}
.icon-google {
    --icon-background-image: url("/images/account/providers/google-logo.svg");
}
.icon-microsoft {
    --icon-background-image: url("/images/account/providers/microsoft-logo.svg");
}
.icon-twitter {
    --icon-background-image: url("/images/account/providers/x-logo.svg");
}