@import "../var.scss";
@import "../mixins/button-color.scss";

$j-prefix-button: "button" !default;

.#{$j-prefix}-#{$j-prefix-button} {
    border: 0;
    border-radius: 1px;
    padding: 0 25px;
    height: 40px;
    border: 1px solid;
    background: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    line-height: 1;
    transition: all 0.1s ease-in-out;
    user-select: none;
    border-color: #000;
    font-size: 14px;

    [data-spinner] {
        position: relative;
        color: transparent !important;
    }

    &.big {
        padding: 0 40px;
        height: 50px;
        font-size: 16px;
    }

    &.medium {
        padding: 0 35px;
        height: 45px;
        font-size: 15px;
    }

    &.main {
        @include button-color-content(
            #fff,
            #fff,
            #fff,
            $j-red,
            $j-red-light,
            $j-red-dark,
            $j-red,
            $j-red-light,
            $j-red-dark
        );

        &[disabled],
        &.disabled {
            background: rgba($color: $j-red, $alpha: 0.2) !important;
            border-color: rgba($color: $j-red, $alpha: 0.01) !important;
            cursor: default;
            color: #fff !important;
        }
    }

    &.second {
        @include button-color-content(
            #fff,
            #fff,
            #fff,
            $j-blue,
            $j-blue-light,
            $j-blue-dark,
            $j-blue,
            $j-blue-light,
            $j-blue-dark
        );

        &[disabled],
        &.disabled {
            background: rgba($color: $j-blue, $alpha: 0.2) !important;
            border-color: rgba($color: $j-blue, $alpha: 0.01) !important;
            cursor: default;
        }
    }

    &.transparent {
        @include button-color-content(
            $j-red,
            #fff,
            #fff,
            #fff,
            $j-red-light,
            $j-red-dark,
            $j-red,
            $j-red-light,
            $j-red-dark
        );

        &.second {
            @include button-color-content(
                $j-blue,
                #fff,
                #fff,
                #fff,
                $j-blue-light,
                $j-blue-dark,
                $j-blue,
                $j-blue-light,
                $j-blue-dark
            );

            &[disabled],
            &.disabled {
                background: rgba($color: $j-blue, $alpha: 0.2) !important;
                border-color: rgba($color: $j-blue, $alpha: 0.01) !important;
                cursor: default;
            }
        }

        &[disabled],
        &.disabled {
            background: #fff !important;
            border-color: $j-gray !important;
            color: $j-gray !important;
            cursor: default;
        }
    }

    &.disabled {
        border-color: $j-gray;
        color: $j-gray !important;
        cursor: default;
    }
}