@use "sass:math";

$crc: '.h-button';

#{$crc} {
    border-radius: $v-control-border-radius;
    border-width: $v-control-border-width;
    border-style: solid;
    font-size: $fs-default;
    background: transparent;
    transition: color $t-fast-standard, background $t-fast-standard, border-color $t-fast-standard, box-shadow $t-fast-standard;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;

    --button-text-color: #{$c-default-text};


    &.-styling-subtle {
        border: none;

        &.-color-primary {
            --button-text-color: #{$c-primary-text};

            &:hover, &:focus {
                background: rgba($c-primary-border, $o-48);
                box-shadow: $sd-hover--primary-box-shadow;
            }

            &:active {
                --button-text-color: #{$c-active--primary-text};
            }

            &:disabled {
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-negative {
            --button-text-color: #{$c-negative-text};

            &:hover, &:focus {
                background: rgba($c-negative-border, $o-48);
                box-shadow: $sd-hover--negative-box-shadow;
            }

            &:active {
                --button-text-color: #{$c-active--negative-text};
            }

            &:disabled {
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-success {
            --button-text-color: #{$c-success-text};

            &:hover, &:focus {
                background: rgba($c-success-border, $o-48);
                box-shadow: $sd-hover--success-box-shadow;
            }

            &:active {
                --button-text-color: #{$c-active--success-text};
            }

            &:disabled {
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-warning {
            --button-text-color: #{$c-warning-text};

            &:hover, &:focus {
                background: rgba($c-warning-border, $o-48);
                box-shadow: $sd-hover--warning-box-shadow;
            }

            &:active {
                --button-text-color: #{$c-active--warning-text};
            }

            &:disabled {
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-danger {
            --button-text-color: #{$c-danger-text};

            &:hover, &:focus {
                background: rgba($c-danger-border, $o-48);
                box-shadow: $sd-hover--danger-box-shadow;
            }

            &:active {
                --button-text-color: #{$c-active--danger-text};
            }

            &:disabled {
                --button-text-color: #{$c-dark-text};
            }
        }
    }

    &.-styling-simple {
        border-width: $v-control-border-width;
        border-style: solid;

        &.-color-primary {
            --button-text-color: #{$c-primary-text};
            background: $c-primary-background;
            border-color: $c-primary-border;

            &:hover, &:focus {
                border-color: $c-hover--primary-border;
                box-shadow: $sd-hover--primary-box-shadow;
            }

            &:active {
                --button-text-color: #{$c-active--primary-text};
                border-color: $c-active--primary-border;
                box-shadow: $sd-active--primary-box-shadow;
            }

            &:disabled {
                background: $c-disabled--primary-background;
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-negative {
            --button-text-color: #{$c-negative-text};
            background: $c-negative-background;
            border-color: $c-negative-border;

            &:hover, &:focus {
                border-color: $c-hover--negative-border;
                box-shadow: $sd-hover--negative-box-shadow;
            }

            &:active {
                --button-text-color: #{$c-active--negative-text};
                border-color: $c-active--negative-border;
                box-shadow: $sd-active--negative-box-shadow;
            }

            &:disabled {
                background: $c-disabled--negative-background;
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-success {
            --button-text-color: #{$c-success-text};
            background: $c-success-background;
            border-color: $c-success-border;

            &:hover, &:focus {
                border-color: $c-hover--success-border;
                box-shadow: $sd-hover--success-box-shadow;
            }

            &:active {
                --button-text-color: #{$c-active--success-text};
                border-color: $c-active--success-border;
                box-shadow: $sd-active--success-box-shadow;
            }

            &:disabled {
                background: $c-disabled--success-background;
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-warning {
            --button-text-color: #{$c-warning-text};
            background: $c-warning-background;
            border-color: $c-warning-border;

            &:hover, &:focus {
                border-color: $c-hover--warning-border;
                box-shadow: $sd-hover--warning-box-shadow;
            }

            &:active {
                --button-text-color: #{$c-active--warning-text};
                border-color: $c-active--warning-border;
                box-shadow: $sd-active--warning-box-shadow;
            }

            &:disabled {
                background: $c-disabled--warning-background;
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-danger {
            --button-text-color: #{$c-danger-text};
            background: $c-danger-background;
            border-color: $c-danger-border;

            &:hover, &:focus {
                border-color: $c-hover--danger-border;
                box-shadow: $sd-hover--danger-box-shadow;
            }

            &:active {
                --button-text-color: #{$c-active--danger-text};
                border-color: $c-active--danger-border;
                box-shadow: $sd-active--danger-box-shadow;
            }

            &:disabled {
                background: $c-disabled--danger-background;
                --button-text-color: #{$c-dark-text};
            }
        }
    }

    &.-styling-block {
        border-width: $v-control-border-width;
        border-style: solid;

        &.-color-primary {
            --button-text-color: #{$c-fill};
            background: $c-primary;
            border-color: $c-primary;

            &:hover, &:focus {
                border-color: $c-dark-primary;
                box-shadow: $sd-hover--primary-box-shadow;
            }

            &:active {
                border-color: $c-active--primary-border;
                box-shadow: $sd-active--primary-box-shadow;
            }

            &:disabled {
                border-color: $c-primary-border;
                background: $c-disabled--primary-background;
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-negative {
            --button-text-color: #{$c-fill};
            background: $c-negative;
            border-color: $c-negative;

            &:hover, &:focus {
                border-color: $c-dark-negative;
                box-shadow: $sd-hover--negative-box-shadow;
            }

            &:active {
                border-color: $c-active--negative-border;
                box-shadow: $sd-active--negative-box-shadow;
            }

            &:disabled {
                border-color: $c-negative-border;
                background: $c-disabled--negative-background;
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-success {
            --button-text-color: #{$c-default-text};
            background: $c-success;
            border-color: $c-success;

            &:hover, &:focus {
                border-color: $c-dark-success;
                box-shadow: $sd-hover--success-box-shadow;
            }

            &:active {
                border-color: $c-active--success-border;
                box-shadow: $sd-active--success-box-shadow;
            }

            &:disabled {
                border-color: $c-success-border;
                background: $c-disabled--success-background;
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-warning {
            --button-text-color: #{$c-default-text};
            background: $c-warning;
            border-color: $c-warning;

            &:hover, &:focus {
                border-color: $c-dark-warning;
                box-shadow: $sd-hover--warning-box-shadow;
            }

            &:active {
                border-color: $c-active--warning-border;
                box-shadow: $sd-active--warning-box-shadow;
            }

            &:disabled {
                border-color: $c-warning-border;
                background: $c-disabled--warning-background;
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-danger {
            --button-text-color: #{$c-fill};
            background: $c-danger;
            border-color: $c-danger;

            &:hover, &:focus {
                border-color: $c-dark-danger;
                box-shadow: $sd-hover--danger-box-shadow;
            }

            &:active {
                border-color: $c-active--danger-border;
                box-shadow: $sd-active--danger-box-shadow;
            }

            &:disabled {
                border-color: $c-danger-border;
                background: $c-disabled--danger-background;
                --button-text-color: #{$c-dark-text};
            }
        }
    }

    &.-styling-none {
        background: transparent;
        border-color: transparent;

        &.-color-primary {
            --button-text-color: #{$c-primary-text};

            &:active {
                --button-text-color: #{$c-active--primary-text};
            }

            &:disabled {
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-negative {
            --button-text-color: #{$c-negative-text};

            &:active {
                --button-text-color: #{$c-active--negative-text};
            }

            &:disabled {
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-success {
            --button-text-color: #{$c-success-text};

            &:active {
                --button-text-color: #{$c-active--success-text};
            }

            &:disabled {
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-warning {
            --button-text-color: #{$c-warning-text};

            &:active {
                --button-text-color: #{$c-active--warning-text};
            }

            &:disabled {
                --button-text-color: #{$c-dark-text};
            }
        }

        &.-color-danger {
            --button-text-color: #{$c-danger-text};

            &:active {
                --button-text-color: #{$c-active--danger-text};
            }

            &:disabled {
                --button-text-color: #{$c-dark-text};
            }
        }
    }


    &.-size-small {
        padding: 0 $g-20;
        min-width: $v-control-height-small;
        height: $v-control-height-small;
        line-height: $v-control-height-small;

        &.-rounded {
            border-radius: math.div($v-control-height-small, 2);
        }

        &.-has-icon {
            padding: 0 $g-12;
        }

        &.-loading {
            &:not(.-has-icon) {
                #{$crc}__content {
                    transform: translate($g-12, 0);
                }

                #{$crc}__loading-container {
                    transform: translate(-16px - $g-8, 0);
                }
            }
        }
    }

    &.-size-normal {
        padding: 0 $g-24;
        min-width: $v-control-height;
        height: $v-control-height;
        line-height: $v-control-height;

        &.-rounded {
            border-radius: math.div($v-control-height, 2);
        }

        &.-has-icon {
            padding: 0 $g-16;
        }

        &.-loading {
            &:not(.-has-icon) {
                #{$crc}__content {
                    transform: translate($g-12, 0);
                }

                #{$crc}__loading-container {
                    transform: translate(-16px - $g-8, 0);
                }
            }
        }
    }

    &.-size-large {
        padding: 0 $g-32;
        min-width: $v-control-height-large;
        height: $v-control-height-large;
        line-height: $v-control-height-large;

        &.-rounded {
            border-radius: math.div($v-control-height-large, 2);
        }

        &.-has-icon {
            padding: 0 $g-16;
        }

        #{$crc}__loading-container {
            left: $g-12 - $v-control-border-width;
        }

        &.-has-icon #{$crc}__loading-container {
            left: $g-12;
        }

        &.-loading {
            #{$crc}__content {
                transform: translate($g-12, 0);
            }

            &.-has-icon {
                #{$crc}__content {
                    transform: translate(0, 0);
                }
            }
        }
    }


    &.-loading {
        pointer-events: none;

        #{$crc}__loading-container {
            opacity: 1;
        }

        #{$crc}__icon {
            opacity: $o-0;
        }
    }


    &.-icon-only {
        padding: 0;

        #{$crc}__icon {
            margin-right: 0;
        }

        #{$crc}__loading-container {
            left: 0;
        }
    }

    &:disabled {
        color: $c-disabled--negative-text;
        opacity: $v-control-disabled-opacity;
        pointer-events: none;
    }
}

#{$crc}__content {
    color: var(--button-text-color);
    display: flex;
    align-items: center;
    position: relative;
}

#{$crc}__loading-spinner, #{$crc}__icon {
    color: var(--button-text-color);
}

#{$crc}__icon {
    vertical-align: middle;
    opacity: 1;
    margin-right: $g-8;
    transition: opacity $t-fast-standard;
}

#{$crc}__loading-container {
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    opacity: $o-0;
}

#{$crc}__loading-spinner {
    width: 12px;
    height: 12px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--button-text-color);
    border-right-color: transparent;
    border-bottom-color: transparent;
    box-sizing: border-box;
    border-radius: 50%;
    animation: h-button__loading-spinner-rotate 1500ms cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite;
    transition: border-color $t-medium-standard;
}

#{$crc}__loading-container, #{$crc}__content, #{$crc}__icon {
    transition: $t-medium-standard;
}

@keyframes h-button__loading-spinner-rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}