// https://m3.material.io/components/floating-action-button/specs

@mixin square($size, $radius: none) {
    width: $size;
    height: $size;
    border-radius: $radius;
}

@mixin square-icon($size) {
    display: inline-block;
    width: $size;
    height: $size;
    font-size: 24px;
    line-height: 24px;
}

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

.sd-fab {
    // @include elevation-level1;
    @include square(56px, 16px);
    @include display-inline-flex-center;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent; // remove webkit blue tap effect
    transition: all 200ms;
    font-size: inherit;

    &:hover {
        filter: brightness(96%);
    }
    &:active {
        filter: brightness(92%);
    }
    &:focus-visible {
        outline: none;
        filter: brightness(88%);
    }

    &-icon {
        @include square-icon(24px);
        color: currentColor;
        text-align: center;
    }

    &[data-sd-size='small'] {
        @include square(40px, 12px);
        .sd-fab-icon {
            @include square-icon(36);
        }
    }

    &[data-sd-size='large'] {
        @include square(96px, 28px);
        .sd-fab-icon {
            @include square-icon(36);
        }
    }

    &[data-sd='surface'] {
        background: var(--md-sys-color-surface-container-high);
        color: var(--md-sys-color-primary);
    }
    &[data-sd='secondary'] {
        background: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-on-secondary-container);
    }
    &[data-sd='tertiary'] {
        background: var(--md-sys-color-tertiary);
        color: var(--md-sys-color-on-tertiary-container);
    }

    &[data-sd-extended='true'] {
        width: max-content !important;
        padding: 0 1rem;
        .sd-fab-icon {
            width: max-content !important;
            font-size: 85%;
            font-weight: bold;
            display: inline-flex;
            gap: 0.5rem;
            flex-wrap: nowrap;
            justify-content: space-between;
        }
    }
    &[data-sd-disabled='true'] {
        pointer-events: none;
        filter: grayscale(98%) opacity(40%);
    }
}