@use "../../core";
@use "../../core/size";
@use "variables" as *;

/// Primary button
$button--primary: (
    background-color: $button-primary-color-background-default,
    background-color--hover: $button-primary-color-background-hover,
    background-color--active: $button-primary-color-background-active,
    background-color--focus: $button-primary-color-background-focus,
    color: $button-primary-color-text-default,
    color--hover: $button-primary-color-text-hover,
    color--active: $button-primary-color-text-active,
    color--focus: $button-primary-color-text-focus,
    shadow: var(--f-button-shadow),
    shadow--hover: var(--f-button-shadow-hover),
    shadow--active: var(--f-button-shadow-active),
    padding-top: core.densify(var(--f-button-primary-padding-top)),
    padding-right: var(--f-button-primary-padding-right),
    padding-bottom: core.densify(var(--f-button-primary-padding-bottom)),
    padding-left: var(--f-button-primary-padding-left),
) !default;

/// Secondary button
$button--secondary: (
    background-color: $button-secondary-color-background-default,
    background-color--hover: $button-secondary-color-background-hover,
    background-color--active: $button-secondary-color-background-active,
    background-color--focus: $button-secondary-color-background-focus,
    border-color: $button-secondary-color-border-default,
    border-color--hover: $button-secondary-color-border-hover,
    border-color--active: $button-secondary-color-border-active,
    color: $button-secondary-color-text-default,
    color--hover: $button-secondary-color-text-hover,
    color--active: $button-secondary-color-text-active,
    color--focus: $button-secondary-color-text-focus,
    shadow: var(--f-button-shadow),
    shadow--hover: var(--f-button-shadow-hover),
    shadow--active: var(--f-button-shadow-active),
    padding-top: core.densify(var(--f-button-secondary-padding-top)),
    padding-right: var(--f-button-secondary-padding-right),
    padding-bottom: core.densify(var(--f-button-secondary-padding-bottom)),
    padding-left: var(--f-button-secondary-padding-left),
) !default;

/// Discrete button
$button--discrete: (
    background-color: transparent,
    background-color--hover: none,
    background-color--disabled: transparent,
    border-color--disabled: transparent,
    border-width: 0,
    color: $button-tertiary-color-text-default,
    color--hover: $button-discrete-color-text-hover,
    color--disabled: $button-tertiary-color-text-disabled,
    shadow: none,
    shadow--hover: var(--f-button-shadow-hover),
    padding-top: core.densify(var(--f-button-discrete-padding-top)),
    padding-right: var(--f-button-discrete-padding-right),
    padding-bottom: core.densify(var(--f-button-discrete-padding-bottom)),
    padding-left: var(--f-button-discrete-padding-left),
) !default;

/// Discrete inverted button
$button--discrete-inverted: (
    background-color: transparent,
    background-color--disabled: transparent,
    border-color--disabled: transparent,
    border-width: 0,
    color: $button-tertiary-inverted-color-text-default,
    color--hover: $button-discrete-inverted-color-text-hover,
    color--disabled: $button-tertiary-inverted-color-text-disabled,
    shadow: none,
    shadow--hover: var(--f-button-shadow-hover),
    padding-top: core.densify(var(--f-button-discrete-padding-top)),
    padding-right: var(--f-button-discrete-padding-right),
    padding-bottom: core.densify(var(--f-button-discrete-padding-bottom)),
    padding-left: var(--f-button-discrete-padding-left),
) !default;

/// Tertiary button
$button--tertiary: (
    background-color: $button-tertiary-color-background-default,
    background-color--hover: $button-tertiary-color-background-hover,
    background-color--active: $button-tertiary-color-background-active,
    background-color--focus: $button-tertiary-color-background-focus,
    background-color--disabled: $button-tertiary-color-background-disabled,
    border-color--disabled: $button-tertiary-color-border-disabled,
    color: $button-tertiary-color-text-default,
    color--hover: $button-tertiary-color-text-hover,
    color--active: $button-tertiary-color-text-active,
    color--focus: $button-tertiary-color-text-focus,
    color--disabled: $button-tertiary-color-text-disabled,
    shadow: none,
    padding-top: core.densify(var(--f-button-tertiary-padding-top)),
    padding-right: var(--f-button-tertiary-padding-right),
    padding-bottom: core.densify(var(--f-button-tertiary-padding-bottom)),
    padding-left: var(--f-button-tertiary-padding-left),
) !default;

%button--default-size {
    line-height: 1.5rem;
    min-width: 9.5rem;
    padding: core.densify(1rem) size.$padding-150;
}

/// Deprecated: Will be removed in next major version (FKUI v4).
.button--text {
    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
    @extend .button--discrete;

    &--black {
        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
        @extend .button--discrete--black;

        color: $button-tertiary-muted-color-text-default;
    }
}

.button {
    align-items: center;
    border-radius: var(--f-border-radius-medium);
    border-style: solid;
    cursor: pointer;
    display: inline-flex;
    font-size: var(--f-font-size-standard);
    font-weight: var(--f-font-weight-medium);
    justify-content: center;
    letter-spacing: var(--f-button-letter-spacing);
    line-height: var(--f-button-default-line-height);
    margin-bottom: core.densify(size.$margin-150);
    margin-top: core.densify(size.$margin-025);
    min-width: var(--f-button-min-width);
    position: relative;
    text-align: center;

    @include core.breakpoint-down(sm) {
        max-width: var(--f-width-full);
        width: var(--f-width-full);
    }

    // A default ".button" is a secondary type button.
    @include core.make-button-variant(".button", $button--secondary...);

    // A default ".button" is a large size button for legacy reasons.
    @extend %button--default-size;

    &--primary {
        @include core.make-button-variant(".button", $button--primary...);
    }

    &--secondary {
        @include core.make-button-variant(".button", $button--secondary...);
    }

    &--discrete {
        width: inherit;
        min-width: 0;
        font-weight: var(--f-font-weight-bold);
        outline-offset: size.$padding-025;
        line-height: calc(1.25 * var(--f-font-size-standard));
        align-items: flex-start;

        @include core.make-button-variant(".button", $button--discrete...);

        @include core.breakpoint-down(sm) {
            width: auto;
        }

        &--black {
            /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */
            padding-top: core.densify(var(--f-button-discrete-black-padding-top));
            padding-right: var(--f-button-discrete-black-padding-right);
            padding-bottom: core.densify(var(--f-button-discrete-black-padding-bottom));
            padding-left: var(--f-button-discrete-black-padding-left);
            /* stylelint-enable declaration-block-no-redundant-longhand-properties */
            color: $button-tertiary-muted-color-text-default;
        }

        &:hover {
            box-shadow: none;
            mix-blend-mode: multiply;
        }
        &,
        &:focus-visible,
        &:active,
        &:hover {
            border-radius: var(--f-button-discrete-radius-hover);
        }
        & > .button__icon {
            flex-shrink: 0;
        }
    }

    &--discrete-inverted {
        width: inherit;
        min-width: 0;
        font-weight: var(--f-font-weight-bold);
        outline-offset: size.$padding-025;
        /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */
        padding-top: core.densify(var(--f-button-discrete-padding-top));
        padding-right: var(--f-button-discrete-padding-right);
        padding-bottom: core.densify(var(--f-button-discrete-padding-bottom));
        padding-left: var(--f-button-discrete-padding-left);
        /* stylelint-enable declaration-block-no-redundant-longhand-properties */
        line-height: calc(1.25 * var(--f-font-size-standard));

        @include core.make-button-variant(".button", $button--discrete-inverted...);

        @include core.breakpoint-down(sm) {
            width: auto;
        }

        &,
        &:focus-visible,
        &:active,
        &:hover {
            border-radius: var(--f-button-discrete-radius-hover);
        }
    }

    &--tertiary {
        outline-offset: size.$padding-025;

        @include core.make-button-variant(".button", $button--tertiary...);

        @include core.breakpoint-down(sm) {
            width: auto;
        }

        &--muted,
        // Deprecated since v6.49.0, replaced by `muted`.
        &--black {
            color: $button-tertiary-muted-color-text-default;

            &:focus-visible {
                color: $button-tertiary-muted-color-text-focus;
            }

            @media (hover: hover) {
                &:hover {
                    color: $button-tertiary-muted-color-text-focus;
                }
            }

            &:active {
                color: $button-tertiary-muted-color-text-focus;
            }
        }

        &--inverted {
            color: $button-tertiary-inverted-color-text-default;

            &:focus-visible {
                color: $button-tertiary-inverted-color-text-focus;
                background-color: $button-tertiary-inverted-color-background-focus;
            }

            @media (hover: hover) {
                &:hover {
                    color: $button-tertiary-inverted-color-text-focus;
                    background-color: $button-tertiary-inverted-color-background-focus;
                }
            }

            &:active {
                color: $button-tertiary-inverted-color-text-focus;
                background-color: $button-tertiary-inverted-color-background-focus;
            }

            &:disabled,
            &[aria-disabled="true"] {
                color: $button-tertiary-inverted-color-text-disabled;
                background-color: $button-tertiary-inverted-color-background-disabled;
            }
        }

        &--underline {
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;

            &:disabled,
            &[aria-disabled="true"] {
                text-decoration: none;
            }
        }

        &.button--align-text {
            padding-left: size.$margin-050;
            padding-right: size.$margin-050;
            margin-left: -(size.$margin-050);
            min-width: 0;
        }

        @include core.breakpoint-down(sm) {
            &.button--full-width {
                min-width: var(--f-width-full);
            }
        }
    }

    &--full-width {
        min-width: var(--f-width-full);
    }

    &--margin-bottom-0 {
        margin-bottom: 0;
    }

    &--small {
        font-size: 14px;
        line-height: 1.25rem;
        min-width: 4rem;
        padding: core.densify(size.$padding-025) size.$padding-075;

        @include core.breakpoint-down(sm) {
            &:not(.button--full-width) {
                width: auto;
            }
        }

        & > .button__icon {
            height: 14px;
            width: 14px;
        }
    }

    &--medium {
        line-height: 1.5rem;
        min-width: 8rem;
        padding: core.densify(0.625rem) size.$padding-125;

        @include core.breakpoint-down(sm) {
            &:not(.button--full-width) {
                width: auto;
            }
        }
    }

    &--large {
        @extend %button--default-size;

        @include core.breakpoint-down(sm) {
            max-width: var(--f-width-full);
            width: var(--f-width-full);
        }
    }

    & .button__icon {
        margin-right: size.$margin-025;

        &:not(:first-child) {
            margin-left: size.$margin-025;
            margin-right: 0;
        }
    }

    &.disabled,
    &.disabled:hover,
    &:disabled,
    &:disabled:hover,
    &[aria-disabled="true"],
    &[aria-disabled="true"]:hover,
    &.button--disabled {
        border-width: var(--f-border-width-medium);
        box-shadow: none;
        cursor: default;
    }

    // Inflight animations
    $button-spinner-animation: button-spinner-rotation $button-spinner-animation-duration linear infinite !default;
    $button-text-animation: width $button-spinner-animation-delay ease-out;

    @keyframes button-spinner-rotation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes button-spinner-delay {
        0%,
        99% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .button__spinner {
        display: inline-block;
        width: var(--f-icon-size-small);
        height: var(--f-icon-size-small);
        animation:
            $button-spinner-animation,
            button-spinner-delay $button-spinner-animation-delay linear;
    }

    .spinner--before,
    .spinner--after {
        display: inline-flex;
        width: calc(var(--f-icon-size-small) * 0.5 + size.$padding-025 * 0.5);
        height: var(--f-icon-size-small);
        align-self: center;
        transition: $button-text-animation;
    }

    &--small {
        .button__spinner {
            width: 14px;
            height: 14px;
        }
        .spinner--before,
        .spinner--after {
            width: calc(7px + size.$padding-025 * 0.5);
            height: 14px;
        }
    }

    &__inflight {
        &.button--small {
            .spinner--after {
                width: 0;
            }
            .spinner--before {
                width: calc(14px + size.$padding-025);
            }
        }

        .spinner--after {
            width: 0;
        }
        .spinner--before {
            width: calc(var(--f-icon-size-small) + size.$padding-025);
        }
    }
}