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

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

// common

.sd-button {
    svg {
        height: 20px;
        display: inline;
        vertical-align: text-bottom;
    }
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    font-weight: 500;
    line-height: 20px;
    font-size: 14px;
    height: 40px;
    min-width: 40px + 16px;
    border-radius: 40px;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent; // remove webkit blue tap effect

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

    // elevated

    &-elevated {
        background: var(--md-sys-color-surface-container-low);
        color: var(--md-sys-color-primary);
        @include elevation-level1;

        &:hover {
            opacity: 0.8;
            color: var(--md-sys-color-primary);
            @include elevation-level2;
        }
        &:active {
            opacity: unset;
            filter: brightness(95%);
        }
        &:focus-visible {
            outline: none;
            opacity: unset;
            filter: brightness(90%);
        }
    }

    // filled

    &-filled {
        background: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);

        &:hover {
            @include elevation-level1;
        }
        &:active {
            box-shadow: unset;
            filter: contrast(120%);
        }
        &:focus-visible {
            outline: none;
            box-shadow: unset;
            filter: contrast(110%);
        }
    }

    // outlined

    &-outlined {
        color: var(--md-sys-color-primary);
        background: var(--md-sys-color-surface);
        outline: var(--md-sys-color-outline) 1px solid;

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

    // tonal

    &-tonal {
        color: var(--md-sys-color-on-secondary-container);
        background: var(--md-sys-color-secondary-container);
        &:hover {
            @include elevation-level1;
            filter: brightness(96%);
        }
        &:active {
            filter: brightness(92%);
        }
        &:focus-visible {
            outline: none;
            filter: brightness(88%);
        }
    }

    // text

    &-text {
        color: var(--md-sys-color-primary);
        background-color: transparent;

        // TODO: this should be primary color background with opacity layer
        // here just simply use a grey color instead
        &:hover {
            background: rgb(0 0 0 / 0.04);
        }
        &:active {
            background: rgb(0 0 0 / 0.08);
        }
        &:focus-visible {
            outline: none;
            background: rgb(0 0 0 / 0.12);
        }
    }
}