@import '../mixins';
@import '../keyframes';

$dot-size: 10px;

.evo-button {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 96px;
    height: 40px;
    padding: 0 24px;
    color: $color-white;
    font-weight: 500;
    font-size: 16px;
    font-family: var(--evo-font-secondary);
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    text-transform: uppercase;
    background: $color-primary none;
    border: solid 1px transparent;
    border-radius: 30px;
    outline: none;
    cursor: pointer;
    transition: background-color .3s, color .3s, border .3s;
    user-select: none;

    &:hover {
        color: $color-white;
        background-color: $color-primary-hover;
    }

    &:active,
    &:focus {
        color: $color-white;
        background-color: $color-primary-active;
        outline: none;
    }

    &:disabled,
    &_disabled {
        color: $color-white !important;
        background: rgba($color-black, .16) !important;
        border-color: transparent !important;
        pointer-events: none;
    }

    /*  COLORS  */
    &_lined {
        color: $color-primary;
        background-color: $color-white;
        border: 1px solid $color-primary;

        &:hover {
            color: $color-white;
            background-color: $color-primary;
        }

        &:active,
        &:focus {
            color: $color-white;
            background-color: $color-primary-active;
            border-color: $color-primary-active;
        }
    }

    &_darkblue {
        background-color: #546E7A;

        &:hover {
            background-color: #7596A5;
        }

        &:active,
        &:focus {
            background-color: #283239;
        }
    }

    &_darkblue-lined {
        color: $color-secondary-light;
        background-color: $color-white;
        border: 1px solid $color-secondary-light;

        &:hover {
            color: $color-white;
            background-color: $color-secondary-light;
        }

        &:active,
        &:focus {
            color: $color-white;
            background-color: #343031;
            border-color: #343031;
        }
    }

    &_green {
        background-color: $color-success;

        &:hover {
            background-color: #4cd2a2;
        }

        &:active,
        &:focus {
            background-color: #1c9e6e;
        }
    }

    &_green-lined {
        color: $color-success;
        background-color: $color-white;
        border: 1px solid $color-success;

        &:hover {
            color: $color-white;
            background-color: $color-success;
        }

        &:active,
        &:focus {
            color: $color-white;
            background-color: #1c9e6e;
            border-color: #1c9e6e;
        }
    }

    &_red {
        color: $color-white;
        background-color: $color-error;

        &:hover {
            background-color: $color-error-hover;
        }

        &:active,
        &:focus {
            background-color: $color-error-active;
        }
    }

    &_purple {
        background-color: $color-bonus;

        &:hover {
            background-color: #d255be;
        }

        &:active,
        &:focus {
            background-color: #9f228b;
        }
    }

    &_white {
        background-color: transparent;
        border: 1px solid $color-white;

        &:hover {
            color: $color-secondary-light;
            background-color: $color-white;
        }

        &:active,
        &:focus {
            color: $color-white;
            background-color: transparent;
        }
    }

    /*  COLORS  */


    &_small {
        min-width: 72px;
        height: 32px;
        padding: 0 16px;
        font-size: 14px;
    }

    &_large {
        min-width: 120px;
        height: 56px;
        padding: 0 40px;
        font-size: 18px;
    }

    /*  SIZES   */


    /*with icon*/
    &_icon {
        display: inline-flex;
        align-items: center;
        padding-right: 22px;
        padding-left: 22px;
    }

    &_loading {
        position: relative;
        pointer-events: none;
    }

    &__dots {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -5px;
        margin-left: -30px;
    }

    &__dot {
        float: left;
        width: $dot-size;
        height: $dot-size;
        margin: 0 5px;
        background: currentColor;
        border-radius: 50%;
        transform: scale(0);
        @include animation();

        &:nth-child(2) {
            @include animation($animation-speed * 0.3);
        }

        &:nth-child(3) {
            @include animation($animation-speed * 0.6);
        }
    }
}

