.ui-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

/* Size M: 40×40px, padding 8px, icon 24px */
.ui-icon--size-m {
    width: 40px;
    height: 40px;
    padding: 8px;
    font-size: 24px;
}

/* Size S: 24×24px, padding 2px, icon 20px */
.ui-icon--size-s {
    width: 24px;
    height: 24px;
    padding: 2px;
    font-size: 20px;
}

/* Colors */
.ui-icon--color-default {
    background: var(--secondary-50);
    color: var(--secondary-600);
}

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

.ui-icon--color-success {
    background: var(--validation-success-100);
    color: var(--validation-success-400);
}

.ui-icon--color-warning {
    background: var(--validation-warning-100);
    color: var(--validation-warning-400);
}

.ui-icon--color-error {
    background: var(--validation-error-100);
    color: var(--validation-error-400);
}

.ui-icon--color-info {
    background: var(--validation-info-100);
    color: var(--validation-info-400);
}

.ui-typography__icon-xs,
.ui-typography__icon-sm {
    font-size: 20px;
}

.ui-typography__icon-sm,
.ui-typography__icon-md {
    vertical-align: middle;
}

.ui-typography__icon-md {
    font-size: 24px;
}

.ui-typography__icon-lg {
    font-size: 48px;
}

.ui-typography__clickable-icon {
    border-radius: 2px;
    color: var(--secondary-500);
    cursor: pointer;
}

.ui-typography__clickable-icon:hover {
    background-color: var(--secondary-50);
}