@import './var.scss';

:root {
    --button-height-xs: #{$button-height-xs};
    --button-height-sm: #{$button-height-sm};
    --button-height-md: #{$button-height-md};
    --button-height-lg: #{$button-height-lg};
    --button-line-height: #{$button-line-height};
    --button-padding-h-xs: #{$button-padding-h-xs};
    --button-padding-h-sm: #{$button-padding-h-sm};
    --button-padding-h-md: #{$button-padding-h-md};
    --button-padding-h-lg: #{$button-padding-h-lg};
    --button-font-size-xs: #{$button-font-size-xs};
    --button-font-size-sm: #{$button-font-size-sm};
    --button-font-size-md: #{$button-font-size-md};
    --button-font-size-lg: #{$button-font-size-lg};
    --button-border-radius: #{$button-border-radius};
    --button-border-radius-round: #{$button-border-radius-round};
    --button-plain-bg: #{$button-plain-bg};
    --button-loading-bg: #{$button-loading-bg};
    --button-disabled-color: #{$button-disabled-color};
    --button-disabled-bg: #{$button-disabled-bg};
    --button-disabled-opacity: #{$button-disabled-opacity};
    --button-default-color: #{$button-default-color};
    --button-default-border-color: #{$button-default-border-color};
    --button-default-bg: #{$button-default-bg};
    --button-primary-color: #{$button-primary-color};
    --button-primary-border-color: #{$button-primary-border-color};
    --button-primary-bg: #{$button-primary-bg};
    --button-second-primary-color: #{$button-second-primary-color};
    --button-second-primary-border-color: #{$button-second-primary-border-color};
    --button-second-primary-bg: #{$button-second-primary-bg};
    --button-fixed-bottom-bg: #{$button-fixed-bottom-bg};
    --button-group-padding-h: #{$button-group-padding-h};
    --button-group-padding-v: #{$button-group-padding-v};
}

@mixin jing-loading-color {
    .jing-button__content {
        svg {
            circle {
                stroke: var(--button-loading-bg);
            }
        }
    }
}

@mixin jing-button-group-count($size) {
    &.jing-button-group {
        justify-content: space-between;
    }
    .jing-button {
        width: calc((100% - 3% * ($size - 1)) / $size);
    }
}

.jing-button {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: var(--button-default-height);
    margin: 0;
    padding: 0;
    font-size: var(--button-font-size-md);
    line-height: var(--button-line-height);
    text-align: center;
    border: 0;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    transition: opacity var(--animation-duration-fast);
    -webkit-appearance: none;

    &::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background-color: #fff;
        border: inherit;
        border-color: #fff;
        border-radius: inherit;
        transform: translate(-50%, -50%);
        opacity: 0;
        content: ' ';
    }

    &:active::before {
        opacity: 0.1;
    }

    &--loading,
    &--disabled {
        &::before {
            display: none;
        }
    }

    &--default {
        color: var(--button-default-color);
        background: var(--button-default-bg);
        border: 1px solid var(--button-default-border-color);
        @include jing-loading-color;
    }

    &--primary {
        color: var(--button-primary-color);
        background: var(--button-primary-bg);
        @include jing-loading-color;
    }

    &--second-primary {
        color: var(--button-second-primary-color);
        background: var(--button-second-primary-bg);
        @include jing-loading-color;
    }

    &--plain {
        border: 1px solid transparent;
        background: var(--button-plain-bg);
        &.jing-button--primary {
            //   border: 0;
            border: 1px solid var(--button-primary-border-color);
            color: var(--button-primary-border-color);
        }
        &.jing-button--second-primary {
            //   border: 0;
            border: 1px solid var(--button-second-primary-border-color);
            color: var(--button-second-primary-border-color);
        }
    }

    &--disabled {
        border: 0;
        color: var(--button-disabled-color);
        background: var(--button-disabled-bg);
        cursor: not-allowed;
        opacity: var(--button-disabled-opacity);
    }

    &--loading {
        opacity: 0.75;
        cursor: wait;
        // color: currentColor;
    }

    &--round {
        border-radius: var(--button-border-radius-round);
    }

    &--large {
        height: var(--button-height-lg);
        font-size: var(--button-font-size-lg);
        padding: 0 var(--button-padding-h-sm);
    }

    &--normal {
        height: var(--button-height-md);
        font-size: var(--button-font-size-md);
        padding: 0 var(--button-padding-h-md);
    }

    &--small {
        height: var(--button-height-sm);
        font-size: var(--button-font-size-sm);
        padding: 0 var(--button-padding-h-sm);
    }

    &--mini {
        height: var(--button-height-xs);
        font-size: var(--button-font-size-xs);
        padding: 0 var(--button-padding-h-sm);
    }

    &--block {
        display: block;
        width: 100%;
    }

    &__content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        .jing-icon + &-span,
        .jing-icon--loading + &-span,
        &-span + .jing-icon,
        &-span + .jing-icon--loading {
            margin-left: var(--padding-base);
        }
    }
}

.jing-button-group {
    &--default {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    &--fixed-bottom {
        z-index: 1000;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--button-fixed-bottom-bg);
        padding: var(--button-group-padding-h) var(--button-group-padding-v);
    }

    &--1 {
        @include jing-button-group-count(1);
    }

    &--2 {
        @include jing-button-group-count(2);
    }

    &--3 {
        @include jing-button-group-count(3);
    }

    &--4 {
        @include jing-button-group-count(4);
    }

    &--5 {
        @include jing-button-group-count(5);
    }

    &__content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}