// ----------------------------------
//  Base style.
// ----------------------------------


.button {
    display: inline-block;
    padding: 0.5rem 2rem;
    cursor: pointer;
    vertical-align: middle;
    // Resets for <button> elements.
    border: 1px solid transparent;
    transition: all .2s ease-in-out;

    &:active,
    &:hover {
        color: inherit;
        text-decoration: none;
    }

    &.disabled {
        cursor: not-allowed;
    }
}

// ----------------------------------
//  Variants
// ----------------------------------


//    Round button
// ----------------------------------

.button-round {
    padding: 0;
    @include button-circle(40px);
}

//    Colors
// ----------------------------------

.button-default { @include button-variant($text-color, $button-bg-color); }
.button-primary { @include button-variant($button-primary-color, $button-primary-bg); }
.button-brand { @include button-variant($button-brand-color, $button-brand-bg); }
.button-light { @include button-variant($text-light-color, $button-bg-color, $button-hover-color); }

.button-info { @include button-variant($button-info-color, $button-info-bg); }
.button-success { @include button-variant($button-success-color, $button-success-bg); }
.button-warning { @include button-variant($button-warning-color, $button-warning-bg); }
.button-danger { @include button-variant($button-danger-color, $button-danger-bg); }

.button-github { @include button-variant($button-github-color, $button-github-bg); }
.button-gitlab { @include button-variant($button-gitlab-color, $button-gitlab-bg); }
.button-google { @include button-variant($button-google-color, $button-google-bg); }
.button-linkedin { @include button-variant($button-linkedin-color, $button-linkedin-bg); }

//    Outline
// ----------------------------------

.button-outline-primary { @include button-outline-variant($text-color, $button-bg-color); }

//    Sizes
// ----------------------------------

.button-large { font-size: $font-size-large; }
.button-small { font-size: 0.6em; }

//    Block button
// ----------------------------------

.button-block {
    display: block;
    width: 100%;
}