.icon-button {
    flex: 0 0 auto;
    padding: 12px;
    overflow: visible;
    font-size: 1.5rem;
    text-align: center;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 50%;
    color: var(--palette-action-default);

    &.button {
        min-width: unset;
        border-radius: var(--default-borderradius);
    }

    &:hover, &:focus-visible {
        background-color: var(--palette-action-default-hover);
    }

    &:disabled {
        color: var(--palette-action-disabled);
        background-color: transparent;
    }

    &.readonly, .readonly:hover {
        cursor: default;
    }
}

.icon-button-color-inherit {
    color: inherit;

    &:hover, &:focus-visible {
        background-color: var(--palette-action-default-hover);
    }
}

.icon-button-label {
    width: 100%;
    display: flex;
    align-items: inherit;
    justify-content: inherit;
}

.icon-button-edge-start {
    margin-left: -12px;
    margin-inline-start: -12px;
    margin-inline-end: unset;
}

.icon-button-edge-end {
    margin-right: -12px;
    margin-inline-end: -12px;
    margin-inline-start: unset;
}

.icon-button-edge-margin-end {
    margin-right: 8px;
    margin-inline-end: 8px;
    margin-inline-start: unset;
}

.icon-button-size-small {
    padding: 3px;
    font-size: 1.125rem;

    &.icon-button-edge-start {
        margin-left: -3px;
        margin-inline-start: -3px;
        margin-inline-end: unset;
    }

    &.icon-button-edge-end {
        margin-right: -3px;
        margin-inline-end: -3px;
        margin-inline-start: unset;
    }
}


.icon-button-size-large.button > .icon-button-label > .icon-size-large {
    font-size: 2rem;
}