@use '../abstracts/variables';
@use '../abstracts/mixins';

// -----------------------------------------------------
//  Button
// -----------------------------------------------------

@mixin pep-button-size($size) {

    $button-horizontal-spacing: var(--pep-button-md-horizontal-spacing);
    $button-min-width: var(--pep-button-md-min-width);
    $button-height: var(--pep-button-md-height);
    $button-font-size: var(--pep-button-sm-font-size);
    $button-icon-height: 1.5rem;
    $button-icon-with-text-height: 1.1rem;

    @if $size == 'xl' {
        $button-horizontal-spacing: var(--pep-button-xl-horizontal-spacing);
        $button-min-width: var(--pep-button-xl-min-width);
        $button-height: var(--pep-button-xl-height);
        $button-font-size: var(--pep-button-xl-font-size);
        $button-icon-height: 2rem;
        $button-icon-with-text-height: 1.5rem;
    }
    @else if $size == 'lg' {
        $button-horizontal-spacing: var(--pep-button-lg-horizontal-spacing);
        $button-min-width: var(--pep-button-lg-min-width);
        $button-height: var(--pep-button-lg-height);
        $button-font-size: var(--pep-button-md-font-size);
        $button-icon-height: 1.75rem;
        $button-icon-with-text-height: 1.3rem;
    }
    @else if $size == 'sm' {
        $button-horizontal-spacing: var(--pep-button-sm-horizontal-spacing);
        $button-min-width: var(--pep-button-sm-min-width);
        $button-height: var(--pep-button-sm-height);
        $button-font-size: var(--pep-button-xs-font-size);
        $button-icon-height: 1.25rem;
        $button-icon-with-text-height: 1rem;
    }
    @else if $size == 'xs' {
        $button-horizontal-spacing: var(--pep-button-xs-horizontal-spacing);
        $button-min-width: var(--pep-button-xs-min-width);
        $button-height: var(--pep-button-xs-height);
        $button-font-size: var(--pep-button-xs-font-size);
        $button-icon-height: 1rem;
        $button-icon-with-text-height: 0.8rem;
    }
    @else if $size == '2xs' {
        $button-horizontal-spacing: var(--pep-button-xxs-horizontal-spacing);
        $button-min-width: var(--pep-button-xxs-min-width);
        $button-height: var(--pep-button-xxs-height);
        $button-font-size: var(--pep-button-xxs-font-size);
        $button-icon-height: 1rem;
        $button-icon-with-text-height: 0.8rem;
    }

    padding-left: $button-horizontal-spacing;
    padding-right: $button-horizontal-spacing;
    min-width: $button-min-width;
    height: $button-height;
    font-size: $button-font-size;
    //line-height: inherit;
    line-height: $button-height;

    // For icon with text
    .mat-icon {
        height: $button-icon-with-text-height;
        width: $button-icon-with-text-height;
        // height: $button-icon-with-text-height !important;
        // width: $button-icon-with-text-height !important;
    }

    // For icon only
    &.icon-button {
        padding-left: 0;
        padding-right: 0;

        .mat-icon {
            height: $button-icon-height;
            width: $button-icon-height;
            // height: $button-icon-height !important;
            // width: $button-icon-height !important;
            @include mixins.align-center();
        }
    }
}

@mixin pep-button-state-none() {
    @include mixins.pep-button-states(none);
}

@mixin pep-button-state-weak-invert() {
    @include mixins.pep-button-states(weak-invert);
}

@mixin pep-button-state-weak($color: null) {
    @include mixins.pep-button-states(weak, $color);
}

@mixin pep-button-state-regular($color: null) {
    @include mixins.pep-button-states(regular, $color);
}

@mixin pep-button-state-strong($color: null) {
    @include mixins.pep-button-states(strong, $color);
}

.pepperi-button, .pep-button {
    @include mixins.fix-inline-z-index();
    transition: all 0.25s;
    border-radius: variables.$border-radius-md;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /*width: max-content;*/
    max-width: 100%;
    padding-top: 0;

    .button-title {
        @include mixins.ellipsis();
        max-width: calc(100%); // For none icon
    }

    .button-title-with-icon {
        margin-inline-end: variables.$spacing-sm;
        @include mixins.ellipsis();

        &.icon-before {
            margin-inline-end: unset;
            margin-inline-start: variables.$spacing-sm;
        }
    }
    
    &.chip {
        border-radius: 2rem !important;
    }

    &.pepperi-button-limited-width, &.pep-button-limited-width {
        max-width: 11.25rem;
    }

    @media (max-width: variables.$screen-max-size-sm) {
        &.pepperi-button-limited-width, &.pep-button-limited-width {
            max-width: 8.25rem;
        }
    }

    &.xl {
        @include pep-button-size('xl');

        .button-title-with-icon {
            margin-inline-end: variables.$spacing-md;
            
            &.icon-before {
                margin-inline-end: unset;
                margin-inline-start: variables.$spacing-md;
            }
        }
    }
    &.lg {
        @include pep-button-size('lg');
    }
    &.md {
        @include pep-button-size('md');
    }
    &.sm {
        @include pep-button-size('sm');
    }
    &.xs {
        @include pep-button-size('xs');

        .button-title-with-icon {
            margin-inline-end: variables.$spacing-xs;
            
            &.icon-before {
                margin-inline-end: unset;
                margin-inline-start: variables.$spacing-xs;
            }
        }
    }
    // &.2xs {
    //     @include pep-button-size('2xs');
    // }

    &:hover {
        cursor: pointer;

        &.disable,
        &:disabled {
            cursor: auto;
        }
    }
    &.disable,
    &:disabled {
        cursor: auto;
    }

    // -----------------------------------------------------
    //  Override material style
    // -----------------------------------------------------
    &.mat-button {
        border-radius: variables.$border-radius-md; // override material.

        span {
            &.mat-button-wrapper {
                // display: block !important;
                display: grid!important;
                grid-auto-flow: column;
                @include mixins.ellipsis();
                max-width: inherit;
            }
        }

        .mat-button-wrapper {
            line-height: inherit;
            height: 100%;
            width: 100%;

            @include mixins.align-center();

            .mat-icon {
                @include mixins.align-center();
                vertical-align: unset; // Init material middle style
                line-height: inherit;
                height: inherit;
            }
        }

        .mat-badge-content {
            @include mixins.mat-badge-content();
        }

        &.right-alignment {
            .mat-badge-content {
                left: calc(#{variables.$spacing-xs} * -1) !important;
            }
        }

        &.left-alignment {
            .mat-badge-content {
                right: calc(#{variables.$spacing-xs} * -1) !important;
            }
        }

        &.mat-badge-small {
            .mat-badge-content {
                font-size: 70%;
                max-width: calc(100% + .5rem);
            }
        }
    }
}

@mixin pep-button-theme() {
    .pepperi-button, .pep-button {
        outline: unset;

        &.weak {
            @include pep-button-state-weak();

            &.system-primary {
                @include pep-button-state-weak(color-system-primary);
            }
            &.user-primary {
                @include pep-button-state-weak(color-user-primary);
            }
            &.user-secondary {
                @include pep-button-state-weak(color-user-secondary);
            }
            &.caution {
                @include pep-button-state-weak(color-system-caution);
            }
            &.success {
                @include pep-button-state-weak(color-system-success);
            }
            &.invert {
                @include pep-button-state-weak-invert();
            }
        }

        &.weak-invert {
            @include pep-button-state-weak-invert();
        }

        &.regular {
            @include pep-button-state-regular();

            &.system-primary {
                @include pep-button-state-regular(color-system-primary);
            }
            &.user-primary {
                @include pep-button-state-regular(color-user-primary);
            }
            &.user-secondary {
                @include pep-button-state-regular(color-user-secondary);
            }
            &.caution {
                @include pep-button-state-regular(color-system-caution);
            }
            &.success {
                @include pep-button-state-regular(color-system-success);
            }
        }

        &.strong {
            @include pep-button-state-strong();

            &.system-primary {
                @include pep-button-state-strong(color-system-primary);
            }
            &.user-primary {
                @include pep-button-state-strong(color-user-primary);
            }
            &.user-secondary {
                @include pep-button-state-strong(color-user-secondary);
            }
            &.caution {
                @include pep-button-state-strong(color-system-caution);
            }
            &.success {
                @include pep-button-state-strong(color-system-success);
            }
        }

        &.none {
            @include pep-button-state-none();
        }

        &.focused {
            @include mixins.focus(true);
        }

        &.mat-button {
            @include mixins.pep-badge();

            &:hover {
                .mat-button-focus-overlay {
                    opacity: 0; // Override material default.
                }
            }
        }
    }
}