.ik-icon--clickable {
    cursor: pointer;
}

.ik-icon--clickable:hover {
    opacity: 0.75;
}

.ik-icon--disabled {
    opacity: 0.6;
    cursor: default;
}

.ik-icon--circle {
    /* display style forced to unable async fontawesome load */
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    padding: 4px 5px 4px 5px;
    border-radius: 50%;
    background-color: var(--surface-darken-color);
}

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

.ik-icon--default {
    color: var(--on-surface-darken-color-3);
}

.ik-icon--success {
    color: var(--success-color);
}

.ik-icon--accent {
    color: var(--accent-color);
}

.ik-icon--danger {
    color: var(--error-color);
}

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

.ik-icon--default.ik-icon--circle {
    background-color: var(--surface-darken-color);
}

.ik-icon--success.ik-icon--circle {
    background-color: var(--success-color-o1);
}

.ik-icon--accent.ik-icon--circle {
    background-color: var(--accent-color-o1);
}

.ik-icon--danger.ik-icon--circle {
    background-color: var(--error-color-o1);
}