@use "@angular/material" as mat;

button {
    gap: var(--hy-spacing-small);

    &.mat-mdc-button-base {
        min-width: 0;
        max-width: 100%;

        > .mdc-button__label {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    @include mat.button-overrides(
        (
            filled-horizontal-padding: var(--hy-spacing-medium),
            outlined-horizontal-padding: var(--hy-spacing-medium),
            tonal-horizontal-padding: var(--hy-spacing-medium),
            text-horizontal-padding: var(--hy-spacing-medium),
            text-with-icon-horizontal-padding: var(--hy-spacing-medium),
            outlined-label-text-color: var(--mat-sys-on-surface-variant),
            outlined-outline-color: var(--mat-sys-outline-variant),
            outlined-disabled-outline-color: var(--mat-sys-outline-variant),
            outlined-state-layer-color: color-mix(
                    in srgb,
                    var(--mat-sys-on-surface) var(--hy-state-layer-x-large),
                    transparent
                ),
            outlined-ripple-color: color-mix(
                    in srgb,
                    var(--mat-sys-on-surface) var(--hy-state-layer-medium),
                    transparent
                ),
        )
    );

    &[matButton] {
        > mat-icon.mat-icon {
            margin: 0;
            font-size: 1.25rem;
            height: 1.25rem;
            width: 1.25rem;
        }

        &:disabled {
            background-color: color-mix(
                in srgb,
                var(--mat-sys-on-surface) var(--hy-state-layer-medium),
                transparent
            );
        }
    }

    /* Size variants, icon button and button */

    &[hySize="small"] {
        gap: var(--hy-spacing-x-small);

        @include mat.button-density(-1);
        @include mat.button-overrides(
            (
                filled-horizontal-padding: var(--hy-spacing-medium-small),
                outlined-horizontal-padding: var(--hy-spacing-medium-small),
                tonal-horizontal-padding: var(--hy-spacing-medium-small),
                text-horizontal-padding: var(--hy-spacing-medium-small),
                text-with-icon-horizontal-padding: var(
                        --hy-spacing-medium-small
                    ),
            )
        );
        @include mat.icon-button-overrides(
            (
                state-layer-size: 2rem,
            )
        );

        &[matIconButton] {
            > mat-icon.mat-icon {
                margin: 0;
                font-size: 1.25rem;
                height: 1.25rem;
                width: 1.25rem;
            }
        }
    }

    &[hySize="x-large"] {
        @include mat.button-overrides(
            (
                filled-container-height: 3.5rem,
                outlined-container-height: 3.5rem,
                tonal-container-height: 3.5rem,
                text-container-height: 3.5rem,

                filled-horizontal-padding: var(--hy-spacing-x-large),
                outlined-horizontal-padding: var(--hy-spacing-x-large),
                tonal-horizontal-padding: var(--hy-spacing-x-large),
                text-horizontal-padding: var(--hy-spacing-x-large),
                text-with-icon-horizontal-padding: var(--hy-spacing-x-large),
                filled-label-text-font: var(--mat-sys-title-medium-font),
                outlined-label-text-font: var(--mat-sys-title-medium-font),
                tonal-label-text-font: var(--mat-sys-title-medium-font),
                text-label-text-font: var(--mat-sys-title-medium-font),
                filled-label-text-size: var(--mat-sys-title-medium-size),
                outlined-label-text-size: var(--mat-sys-title-medium-size),
                tonal-label-text-size: var(--mat-sys-title-medium-size),
                text-label-text-size: var(--mat-sys-title-medium-size),
                filled-label-text-tracking: var(--mat-sys-title-medium-tracking),
                outlined-label-text-tracking: var(
                        --mat-sys-title-medium-tracking
                    ),
                tonal-label-text-tracking: var(--mat-sys-title-medium-tracking),
                text-label-text-tracking: var(--mat-sys-title-medium-tracking),
                filled-label-text-weight: var(--mat-sys-title-medium-weight),
                outlined-label-text-weight: var(--mat-sys-title-medium-weight),
                tonal-label-text-weight: var(--mat-sys-title-medium-weight),
                text-label-text-weight: var(--mat-sys-title-medium-weight),
            )
        );

        @include mat.icon-button-overrides(
            (
                state-layer-size: 3.5rem,
            )
        );

        &[matButton] {
            > mat-icon.mat-icon {
                font-size: 1.5rem;
                height: 1.5rem;
                width: 1.5rem;
            }
        }
    }

    /* Appearance variants, icon button and button */
    &[hyAppearance="warning"] {
        @include mat.button-overrides(
            (
                filled-container-color: var(--hy-color-warning),
                filled-label-text-color: var(--hy-color-on-warning),
                filled-state-layer-color: var(--hy-color-on-warning),
                filled-ripple-color: color-mix(
                        in srgb,
                        var(--hy-color-on-warning) var(--hy-state-layer-medium),
                        transparent
                    ),
                text-label-text-color: var(--hy-color-warning),
                text-state-layer-color: var(--hy-color-warning),
                text-ripple-color: color-mix(
                        in srgb,
                        var(--hy-color-warning) var(--hy-state-layer-medium),
                        transparent
                    ),
            )
        );

        @include mat.icon-button-overrides(
            (
                icon-color: var(--hy-color-warning),
                state-layer-color: var(--hy-color-warning),
                ripple-color: color-mix(
                        in srgb,
                        var(--hy-color-warning) var(--hy-state-layer-medium),
                        transparent
                    ),
            )
        );
    }

    /* Icon buttons appearance variants */
    &[hyAppearance="warning-filled"] {
        @include mat.icon-button-overrides(
            (
                icon-color: var(--hy-color-on-warning),
                state-layer-color: var(--hy-color-on-warning),
                ripple-color: color-mix(
                        in srgb,
                        var(--hy-color-on-warning) var(--hy-state-layer-medium),
                        transparent
                    ),
            )
        );

        &[matIconButton]:enabled {
            background-color: var(--hy-color-warning);
        }
    }

    &[hyAppearance="tonal"] {
        @include mat.icon-button-overrides(
            (
                icon-color: var(--mat-sys-on-secondary-container),
                state-layer-color: var(--mat-sys-on-secondary-container),
                ripple-color: color-mix(
                        in srgb,
                        var(--mat-sys-on-secondary-container)
                            var(--hy-state-layer-medium),
                        transparent
                    ),
            )
        );

        &[matIconButton]:enabled {
            background-color: var(--mat-sys-secondary-container);
        }
    }

    &[hyAppearance="filled"] {
        background-color: var(--mat-sys-primary);

        @include mat.icon-button-overrides(
            (
                icon-color: var(--mat-sys-on-primary),
                state-layer-color: var(--mat-sys-on-primary),
                ripple-color: color-mix(
                        in srgb,
                        var(--mat-sys-on-primary) var(--hy-state-layer-medium),
                        transparent
                    ),
            )
        );
    }

    &[hyAppearance="tonal"],
    &[hyAppearance="filled"],
    &[hyAppearance="warning-filled"] {
        &:disabled {
            background-color: color-mix(
                in srgb,
                var(--mat-sys-on-surface) var(--hy-state-layer-medium),
                transparent
            );
        }
    }
}