.btn {
    border-radius: @button-radius;
}

.btn {
    height: @input-height-base;
}
.btn-lg {
    height: @input-height-large;
}
.btn-sm {
    height: @input-height-small;
}

.btn.btn-link {
    height: auto;
}

.panel-heading .btn-sm {
    height: auto;
}

.input-group {
    .input-group-btn > {
        .btn {
            height: @input-height-base;
        }
    }

    &.input-group-sm {
        .input-group-btn > {
            .btn {
                height: @input-height-small;
            }
        }
    }
    &.input-group-lg {
        .input-group-btn > {
            .btn {
                height: @input-height-large;
            }
        }
    }
}

.btn-icon {
    width: 36px;
    padding-left: 0;
    padding-right: 0;

    .fa, .fas {
        position: relative;
        width: 16px;
        text-align: center;
    }
    .fa-sm {
        top: -1px;
    }
}

.btn-icon.btn-sm {
    .fa-sm {
        top: 0;
    }
}

.btn-icon.btn-sm {
    width: 34px;

    .fa, .fas {
        font-size: 12px;
        width: 12px;
    }
}

.btn.btn-wide  {
    min-width: 100px;
}

.btn.btn-x-wide  {
    min-width: 150px;
}

.btn.btn-xx-wide  {
    min-width: 200px;
}

.btn.btn-icon-wide  {
    width: 54px;
}

.btn.btn-icon-x-wide  {
    width: 76px;
}

.btn.btn-icon-xx-wide  {
    width: 100px;
}

.btn-default > .fa,
.btn-default > .fas {
    color: @gray-soft;
}

.btn-default > .fa.text-muted,
.btn-default > .fas.text-muted {
    color: @gray-light;
}

.btn-default.disabled > .fa,
.btn-default.disabled > .fas {
    color: @gray-light;
}

.btn-text {
    color: @gray-dark;
    border-radius: 0;

    .far,
    .fas {
        color: @gray-soft;
    }

    &,
    &:active,
    &.active,
    &[disabled],
    fieldset[disabled] & {
        background-color: transparent;
        .box-shadow(none);
    }
    &,
    &:hover,
    &:focus,
    &:active {
        border-color: transparent;
    }
    &:hover,
    &:focus {
        color: @gray-dark;
        text-decoration: none;
        background-color: transparent;
        .far,
        .fas {
            color: @gray-dark;
        }
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &:hover,
        &:focus {
            color: @gray-light;
            text-decoration: none;
        }
        color: @gray-light;
        .far,
        .fas {
            color: @gray-light;
        }
    }
    &.active {
        border-bottom: 1px solid @gray-light;
    }

    font-weight: 400;
}
