/* *****************************************************************************
*
*  Button Icon
*
* ***************************************************************************** */


.bf-button-icon {
    position: relative;
    display: inline-block;

    &__inner {
        position: relative;
        display: inline-block;
        width: auto;
        margin: 0;
        padding: var(--bf-spacer-2);
        background: none;
        border: none;
        color: inherit;
        border-radius: 50%;
        transition: background-color .25s;

        &:hover {
            background-color: var(--bf-color-bg-action-no-bg-hover);
        }
        &.disabled,
        &[disabled] {
            pointer-events: none;

            .bf-icon {
                color: var(--bf-color-neutral-tertiary);
            }
        }
    }
    &__badge {
        position: absolute;
        top: 1px;
        right: 1px;

        .bf-badge__inner {
            justify-content: center;
            height: 1rem;
            min-height: auto;
            min-width: 1rem;
            padding-inline: 4px;

            .bf-badge__label {
                display: block;
                letter-spacing: 0px;
                font-size: 0.7rem;
                padding: 0 0 0 1px;
            }
        }
    }
}