Sengi-Windows-MacOS-Linux/src/sass/_buttons.scss

@import "variables";

.btn-custom-primary {
    background-color: $btn-primary-color;
    border-color: $btn-primary-color;
    color: $btn-primary-font-color;
    font-size: 14px;

    &:hover,
    &:focus,
    &:active,
    &:active {
        background-color: $btn-primary-color-hover;
        border-color: $btn-primary-color-hover;
        box-shadow: none;
    }

    // &:focus {
    //     background-color: $btn-primary-color-hover;
    //     border-color: $btn-primary-color-hover;
    //     outline: none;
    // }
    // &:active {
    //     background-color: $btn-primary-color-hover;
    //     border-color: $btn-primary-color-hover;
    //     outline: none;
    // }
    // &:active:focus {
    //     background-color: $btn-primary-color-hover;
    //     border-color: $btn-primary-color-hover;
    //     outline: none;
    // }
    // &:visited {
    //     outline: none;
    // }
}

.btn-custom-secondary {
    border: none;
    outline: none;
    cursor: pointer;
    background-color: $button-background-color;
    color: $button-color;
    transition: all .2s;

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

.sengi-btn {
    transition: all .2s;
    text-decoration: none;
    display: block; // width: calc(100% - 20px);
    width: calc(100% - 15px); // height: 30px;
    padding: 5px 10px; // border: solid 1px black;
    margin-left: 5px;

    &--icon {
        float: right;
    }

    &--disabled {
        cursor: default;
        background-color: darken($color-primary, 4);

        &:hover {
            background-color: darken($color-primary, 4);
        }
    }

    &--margin-bottom {
        &:not(:last-child) {
            margin-bottom: 5px;
        }
    }

    &__blue {
        background-color: $color-primary;
        color: #fff;

        &:hover {
            background-color: lighten($color-primary, 15);
        }
    }

    &__red {
        $red-button-color: rgb(65, 3, 3);
        background-color: $red-button-color !important;
        color: #fff;

        &:hover {
            background-color: lighten($red-button-color, 15) !important;
        }
    }

    &__medium {
        float: left;
        width: calc((100% - 15px)/2 - 5px);
    }
}