@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/button';

@mixin msk-button {
    @include button.button;

    /* ----- Global ----- */
    .#{$prefix}--btn {
        --#{$prefix}-button-focus-color: #{c.$msk--black-100};
        --#{$prefix}-body-compact-01-font-size: #{v.$msk--size-2};
        --#{$prefix}-body-compact-01-font-weight: #{v.$button-font-weight};
        --#{$prefix}-body-compact-01-line-height: 1;
        --#{$prefix}-body-compact-01-letter-spacing: 0;
        --#{$prefix}-layout-size-height-local: unset;

        border-radius: m.msk-rem(4px);
        padding: m.msk-rem(12px) m.msk-rem(16px);
    }

    /* ----- Button Stylings ----- */
    // Primary Button
    .#{$prefix}--btn--primary {
        @include m.msk-btn-primary;
    }

    // Ghost Button
    .#{$prefix}--btn--ghost {
        @include m.msk-btn-ghost;
    }

    // Tertiary Button
    // Includes ghost button stylings
    .#{$prefix}--btn--tertiary {
        @include m.msk-btn-tertiary;
    }

    .#{$prefix}--btn--secondary {
        @include m.msk-btn-tertiary;

        &:focus {
            border-color: c.$msk--black-100;
            box-shadow: inset 0 0 0 1px c.$msk--white-0;
        }
    }

    // Danger Button
    .#{$prefix}--btn--danger {
        @include m.msk-btn-danger;
    }

    // Danger--Ghost Button
    .#{$prefix}--btn--danger--ghost {
        @include m.msk-btn-danger-ghost;
    }

    // Danger--Tertiary Button
    // Includes danger--ghost button styling
    .#{$prefix}--btn--danger--tertiary {
        @include m.msk-btn-danger-ghost;

        border-color: c.$msk--red-70;
    }

    /* ----- Disabled States ----- */
    // Ghost and Danger--Ghost Disabled Buttons
    .#{$prefix}--btn--ghost,
    .#{$prefix}--btn--danger--ghost {
        @include m.msk-btn-disabled;
    }

    // Primary and Danger Disabled Buttons
    .#{$prefix}--btn--primary,
    .#{$prefix}--btn--danger {
        &:disabled,
        &:hover:disabled,
        &:focus:disabled {
            @include m.msk-btn-disabled;

            background-color: tk.$msk--color-bg-inverse-disabled;
        }
    }

    // Tertiary and Danger--Tertiary Disabled Buttons
    .#{$prefix}--btn--tertiary,
    .#{$prefix}--btn--danger--tertiary {
        &:disabled,
        &:hover:disabled,
        &:focus:disabled {
            @include m.msk-btn-disabled;

            background-color: tk.$msk--color-bg-inverse-disabled;
            border-color: c.$msk--warm-gray-70;
        }
    }

    /* ----- Icon Styles ----- */
    .#{$prefix}--btn-icon-only {
        padding: m.msk-rem(13px);

        &.#{$prefix}--btn--field {
            padding: m.msk-rem(9px);
        }

        &.#{$prefix}--btn--sm {
            padding: m.msk-rem(5px);
        }
    }
    .#{$prefix}--btn {
        &.msk-btn--icon-top {
            flex-direction: column;
            justify-content: flex-start;
            padding-bottom: 0;
            padding-top: m.msk-rem(5px);

            > .material-icons-sharp,
            > .msk-icon {
                align-self: unset;
                order: -1;
            }
        }

        &.msk-btn--icon-left {
            > .material-icons-sharp,
            > .msk-icon {
                margin-right: m.msk-rem(16px);
            }
        }

        &.msk-btn--icon-right {
            > .material-icons-sharp,
            > .msk-icon {
                margin-left: m.msk-rem(16px);
            }
        }
    }
}

@mixin msk-carbon-button {
    /* ----- Global ----- */
    .msk-btn {
        font-size: v.$msk--btn-font-size;
        font-weight: v.$msk--btn-font-weight;
        padding-inline: m.msk-rem(16px);
        border-radius: v.$msk--btn-border-radius;
        line-height: 1;
        position: relative;
        display: inline-flex;
        align-items: center;
        width: max-content;
        height: max-content;
        flex-shrink: 0;
        margin: 0;
        cursor: pointer;
        outline: none;
        border-width: m.msk-rem(2px);
        border-style: solid;

        &:disabled,
        &:hover:disabled,
        &:focus:disabled,
        &.msk-btn--disabled,
        &.msk-btn--disabled:hover,
        &.msk-btn--disabled:focus {
            box-shadow: none;
            cursor: not-allowed;
        }

        &:not(:disabled):focus {
            box-shadow: inset 0 0 0 m.msk-rem(2px)
                tk.$msk--color-border-focus-inner;
            border-color: tk.$msk--color-border-focus-outer;
            &.msk-btn--disable-focus {
                box-shadow: none;

                &.msk-btn--primary {
                    border-color: var(--msk-color-bg-action-primary-hover);
                    &:hover {
                        border-color: var(--msk-color-bg-action-primary-hover);
                        &:active {
                            border-color: var(
                                --msk-color-bg-action-primary-active
                            );
                        }
                    }
                }

                &.msk-btn--tertiary {
                    border-color: var(
                        --msk-color-border-action-secondary-hover
                    );
                    &:hover {
                        border-color: var(
                            --msk-color-border-action-secondary-hover
                        );
                    }
                    &:active {
                        border-color: var(
                            --msk-color-border-action-secondary-active
                        );
                    }
                }

                &.msk-btn--ghost {
                    border-color: var(--msk-color-bg-action-hover);
                    &:hover {
                        border-color: var(--msk-color-bg-action-hover);
                        &:active {
                            border-color: var(--msk-color-bg-action-active);
                        }
                    }
                }

                &.msk-btn--danger {
                    border-color: var(
                        --msk-color-border-action-primary-danger-hover
                    );
                    &:hover {
                        border-color: var(
                            --msk-color-border-action-primary-danger-hover
                        );
                        &:active {
                            border-color: var(
                                --msk-color-border-action-primary-danger-active
                            );
                        }
                    }
                }
                &.msk-btn--danger--tertiary {
                    border-color: var(
                        --msk-color-bg-action-primary-danger-hover
                    );
                    &:hover {
                        border-color: var(
                            --msk-color-bg-action-primary-danger-hover
                        );
                        &:active {
                            border-color: var(
                                --msk-color-bg-action-primary-danger-active
                            );
                        }
                    }
                }

                &.msk-btn--danger--ghost {
                    border-color: var(--msk-color-bg-action-danger-hover);
                    &:hover {
                        border-color: var(--msk-color-bg-action-danger-hover);
                        &:active {
                            border-color: var(
                                --msk-color-bg-action-danger-active
                            );
                        }
                    }
                }
            }
        }

        .msk-icon.msk-btn--icon {
            color: inherit;
        }

        &.msk-btn--sm {
            font-size: v.$msk--size-1;
            min-height: m.msk-rem(32px);
        }

        &.msk-btn--md {
            min-height: m.msk-rem(40px);
        }

        &.msk-btn--lg {
            min-height: m.msk-rem(48px);
        }
    }

    // Reset intrinsic padding in Firefox (see #731)
    .msk-btn::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    //----------------------------------------------
    // Button Kinds
    // ---------------------------------------------

    // Primary Button
    .msk-btn--primary {
        @include m.msk-edge-btn-primary;
    }

    // Secondary Button
    .msk-btn--secondary {
        @include m.msk-edge-btn-secondary;
    }

    // Ghost Button
    .msk-btn--ghost {
        @include m.msk-edge-btn-ghost;
    }

    // Tertiary Button
    // Includes ghost button stylings
    .msk-btn--tertiary {
        @include m.msk-edge-btn-tertiary;
    }

    // Danger Button
    .msk-btn--danger {
        @include m.msk-edge-btn-danger;
    }

    // Danger--Ghost Button
    .msk-btn--danger--ghost {
        @include m.msk-edge-btn-danger-ghost;
    }

    // Danger--Tertiary Button
    // Includes danger--ghost button styling
    .msk-btn--danger--tertiary {
        @include m.msk-edge-btn-danger-tertiary;
    }

    //----------------------------------------------
    // Icon styling
    // ---------------------------------------------

    .msk-btn--icon-only {
        justify-content: center;

        &.msk-btn--sm {
            width: m.msk-rem(32px);
        }

        &.msk-btn--md {
            width: m.msk-rem(40px);
        }

        &.msk-btn--lg {
            width: m.msk-rem(48px);
        }
    }

    .msk-btn--icon-left {
        .msk-btn--icon {
            margin-right: m.msk-rem(16px);
        }
    }

    .msk-btn--icon-right {
        .msk-btn--icon {
            margin-left: m.msk-rem(16px);
        }
    }

    .msk-btn--icon-top {
        flex-direction: column;
        justify-content: center;
        padding-block: m.msk-rem(8px);

        &.msk-btn--sm {
            padding-block: m.msk-rem(4px);
        }

        &.msk-btn--field {
            padding-top: m.msk-rem(6px);
        }
    }

    //----------------------------------------------
    // Button sets
    // ---------------------------------------------
    .msk-btn-set {
        display: flex;

        > .msk-btn {
            margin-left: 0.25rem;
            margin-right: 0.25rem;

            &:first-child {
                margin-left: 0;
            }

            &:last-child {
                margin-right: 0;
            }
        }

        &.msk-btn-set--responsive {
            > .msk-btn {
                @media (width <= 767px) {
                    flex: 1;
                    justify-content: center;
                    max-width: unset;
                }
            }
        }

        &.msk-btn-set--center {
            justify-content: center;
        }

        &.msk-btn-set--right {
            justify-content: right;
        }

        &.msk-btn-set--opposite {
            justify-content: space-between;
        }

        &.msk-btn-set--full {
            > .#{$prefix}--btn,
            > .msk-btn {
                flex: 1;
                justify-content: center;
                max-width: unset;
            }
        }

        &.msk-btn-set--vertical {
            flex-direction: column;

            > .msk-btn {
                margin-left: 0;
                margin-right: 0;
            }
        }
    }

    .msk-btn-set--grid {
        > .msk-btn--set {
            margin-top: 0.5rem;

            &:first-child {
                margin-top: 0;
            }
        }
    }
}