.hms-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
    background: var(--hms-text-colour);
}

.hms-icon.hms-sidebar {
    width: 1.5rem;
    height: 1.5rem;
    -webkit-mask: url("../images/sidebar.svg") center / contain no-repeat;
    mask: url("../images/sidebar.svg") center / contain no-repeat;
}

.hms-icon.hms-sparkles {
    -webkit-mask: url("../images/sparkles.svg") center / contain no-repeat;
    mask: url("../images/sparkles.svg") center / contain no-repeat;
}

/* for FontAwesome icons */
.fa-ai-gradient {
    background: linear-gradient(135deg, var(--hms-sparkles-gradient-color-1) 30%, var(--hms-sparkles-gradient-color-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* for custom icons */
.hms-ai-gradient {
    background: linear-gradient(135deg, var(--hms-sparkles-gradient-color-1) 30%, var(--hms-sparkles-gradient-color-2) 100%);
}