.icon-default {
    color: var(--palette-text-secondary);
}


.disabled {
    .icon-root, .svg-icon, .icon-default {
        color: var(--palette-text-disabled);
    }
}

.icon-root {
    width: 1em;
    height: 1em;
    display: inline-block;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    flex-shrink: 0;
    user-select: none;

    &:focus {
        outline: none;
    }

    &.svg-icon {
        fill: currentColor;
    }
}

.icon-size-small {
    font-size: 1.25rem;
}

.icon-size-medium {
    font-size: 1.5rem;
}

.icon-size-large {
    font-size: 2.25rem;
}