// https://m3.material.io/components/icon-buttons/specs

// reset
button.sd-icon_button {
    border: none;
    outline: none;
}

.sd-icon_button {
    @include display-inline-flex-center;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent; // remove webkit blue tap effect

    // center the internal icon
    &-icon {
        @include display-inline-flex-center;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-weight: 500;
    }

    &[disabled],
    &[data-sd-disabled='true'] {
        color: var(--md-sys-color-on-surface);
        opacity: 0.38;
        pointer-events: none;
    }

    // filled

    &-filled {
        color: var(--md-sys-color-on-primary);
        background: var(--md-sys-color-primary);
        &[data-sd-selected='false'] {
            color: var(--md-sys-color-primary);
            background: var(--md-sys-color-surface-container-highest);
        }
    }

    // tonal

    &-tonal {
        color: var(--md-sys-color-on-secondary-container);
        background: var(--md-sys-color-secondary-container);
        &[data-sd-selected='false'] {
            color: var(--md-sys-color-on-surface-variant);
            background: var(--md-sys-color-surface-container-highest);
        }
    }

    // outlined

    &-outlined {
        outline: var(--md-sys-color-outline) 1px solid;
        color: var(--md-sys-color-on-inverse-surface);
        background: inherit;
        &[data-sd-selected='false'] {
            color: var(--md-sys-color-surface-variant);
            background: var(--md-sys-color-outline);
        }
    }

    // standard

    &-standard {
        color: var(--md-sys-color-on-surface-variant);
        background: inherit;
        &[data-sd-selected='true'] {
            color: var(--md-sys-color-primary);
        }
    }

    &-outlined,
    &-standard {
        &:hover {
            background: rgb(0 0 0 / 0.04);
        }
        &:active {
            background: rgb(0 0 0 / 0.08);
        }
        &:focus-visible {
            background: rgb(0 0 0 / 0.12);
        }
    }
    &-tonal,
    &-filled {
        &:hover {
            filter: brightness(96%);
        }
        &:active {
            filter: brightness(92%);
        }
        &:focus-visible {
            filter: brightness(88%);
        }
    }
}