.image-button-component {
    display: flex;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    color: var(--color-text);
    transition-property: color, filter;
    transition-timing-function: var(--transition-timing-function);
    transition-duration: var(--transition-duration);
}

.image-button-component-image {
    height: 40px;
    width: 40px;
    transition-property: font-size, line-height;
    transition-timing-function: var(--transition-timing-function);
    transition-duration: var(--transition-duration);
}

/* Default variant */
.image-button-component.variant-default:hover {
    cursor: pointer;
    color: var(--color-highlight);
    filter: var(--shadow-drop-highlight);
}

.image-button-component.variant-default:hover .image-button-component-image {
    font-size: 32px;
    line-height: 32px;
}

/* Highlighted variant */
.image-button-component.variant-highlighted {
    color: var(--color-highlight);
    filter: var(--shadow-drop-highlight);
}

.image-button-component.variant-highlighted .image-button-component-image {
    font-size: 32px;
    line-height: 32px;
}