@import 'fab.less';

.btn {
    display: inline-block;
    min-width: ceil(@font-default-size * 3);
    border: none;
    vertical-align: middle;
    padding: ceil(@font-default-size * .8) ceil(@font-default-size * 1.2);
    margin: ceil(@font-default-size * .2) 0;
    cursor: pointer;
    font: inherit;
    font-size: @font-default-size;
    border-radius: 2px;
    text-align: center;
    line-height: 1;
    box-sizing: border-box;

    & > * {
        font-size: inherit;
        line-height: inherit;
        vertical-align: middle;
    }

    &.btn-block {
        display: block;
        width: 100%;
    }

    &.btn-bordered {
        transition: background-color .3s ease, border-color .3s ease, color .3s ease;
    }

    &.btn-rounded {
        border-radius: 999px;
    }

    &.btn-xs {
        font-size: ceil(@font-default-size * .8);
    }

    &.btn-sm {
        font-size: ceil(@font-default-size * .9);
    }

    &.btn-lg {
        font-size: ceil(@font-default-size * 1.1);
    }

    &.btn-xg {
        font-size: ceil(@font-default-size * 1.2);
    }

    &.btn-disabled,
    &.btn-soft {
        opacity: .6;
    }

    &.btn-material {
        box-shadow: 0 1px 5px rgba(0, 0, 0, .375);
    }

    &.btn-center {
        margin: 0 auto;
    }

    &.btn-default {
        background-color: @base-default-color;
        color: @base-white-color;
    }

    &.btn-default.btn-bordered {
        background-color: transparent;
        color: @base-default-color;
        border: 1px solid @base-default-color;
    }

    &.btn-default:hover {
        background-color: lighten(@base-default-color, 5%);
        color: @base-white-color;
    }

    &.btn-default:active {
        background-color: darken(@base-default-color, 5%);
        color: @base-white-color;
    }

    &.btn-primary {
        background-color: @base-primary-color;
        color: @base-white-color;
    }

    &.btn-primary.btn-bordered {
        background-color: transparent;
        color: @base-primary-color;
        border: 1px solid @base-primary-color;
    }

    &.btn-primary:hover {
        background-color: lighten(@base-primary-color, 5%);
        color: @base-white-color;
    }

    &.btn-primary:active {
        background-color: darken(@base-primary-color, 5%);
        color: @base-white-color;
    }

    &.btn-cobalt {
        background-color: @base-cobalt-color;
        color: @base-white-color;
    }

    &.btn-cobalt.btn-bordered {
        background-color: transparent;
        color: @base-cobalt-color;
        border: 1px solid @base-cobalt-color;
    }

    &.btn-cobalt:hover {
        background-color: lighten(@base-cobalt-color, 5%);
        color: @base-white-color;
    }

    &.btn-cobalt:active {
        background-color: darken(@base-cobalt-color, 5%);
        color: @base-white-color;
    }

    &.btn-success {
        background-color: @base-success-color;
        color: @base-white-color;
    }

    &.btn-success.btn-bordered {
        background-color: transparent;
        color: @base-success-color;
        border: 1px solid @base-success-color;
    }

    &.btn-success:hover {
        background-color: lighten(@base-success-color, 5%);
        color: @base-white-color;
    }

    &.btn-success:active {
        background-color: darken(@base-success-color, 5%);
        color: @base-white-color;
    }

    &.btn-danger {
        background-color: @base-danger-color;
        color: @base-white-color;
    }

    &.btn-danger.btn-bordered {
        background-color: transparent;
        color: @base-danger-color;
        border: 1px solid @base-danger-color;
    }

    &.btn-danger:hover {
        background-color: lighten(@base-danger-color, 5%);
        color: @base-white-color;
    }

    &.btn-danger:active {
        background-color: darken(@base-danger-color, 5%);
        color: @base-white-color;
    }

    &.btn-alert {
        background-color: @base-alert-color;
        color: @base-white-color;
    }

    &.btn-alert.btn-bordered {
        background-color: transparent;
        color: @base-alert-color;
        border: 1px solid @base-alert-color;
    }

    &.btn-alert:hover {
        background-color: lighten(@base-alert-color, 5%);
        color: @base-white-color;
    }

    &.btn-alert:active {
        background-color: darken(@base-alert-color, 5%);
        color: @base-white-color;
    }

    &.btn-notice {
        background-color: @base-notice-color;
        color: @base-white-color;
    }

    &.btn-notice.btn-bordered {
        background-color: transparent;
        color: @base-notice-color;
        border: 1px solid @base-notice-color;
    }

    &.btn-notice:hover {
        background-color: lighten(@base-notice-color, 5%);
        color: @base-white-color;
    }

    &.btn-notice:active {
        background-color: darken(@base-notice-color, 5%);
        color: @base-white-color;
    }

    &.btn-force {
        background-color: @base-force-color;
        color: @base-white-color;
    }

    &.btn-force.btn-bordered {
        background-color: transparent;
        color: @base-force-color;
        border: 1px solid @base-force-color;
    }

    &.btn-force:hover {
        background-color: lighten(@base-force-color, 5%);
        color: @base-white-color;
    }

    &.btn-force:active {
        background-color: darken(@base-force-color, 5%);
        color: @base-white-color;
    }
}

.btn-group {
    display: inline-block;
    vertical-align: middle;
    position: relative;

    .btn {
        float: left;
        border: 1px solid darken(@base-white-color, 10%);
        margin: 0;
        border-radius: 0;
        margin-left: -1px;
        position: relative;
        z-index: 0;

        &:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
            margin-left: 0;

            &.btn-rounded {
                border-top-left-radius: 999px;
                border-bottom-left-radius: 999px;
            }
        }

        &:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;

            &.btn-rounded {
                border-top-right-radius: 999px;
                border-bottom-right-radius: 999px;
            }
        }

        &.btn-default {
            border-color: darken(@base-default-color, 10%);
        }

        &.btn-force {
            border-color: darken(@base-force-color, 10%);
        }

        &.btn-primary {
            border-color: darken(@base-primary-color, 10%);
        }

        &.btn-notice {
            border-color: darken(@base-notice-color, 10%);
        }

        &.btn-cobalt {
            border-color: darken(@base-cobalt-color, 10%);
        }

        &.btn-danger {
            border-color: darken(@base-danger-color, 10%);
        }

        &.btn-alert {
            border-color: darken(@base-alert-color, 10%);
        }

        &.btn-success {
            border-color: darken(@base-success-color, 10%);
        }

        &.btn-material {
            box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.375);
        }
    }

    &:after,
    &:before {
        display: block;
    }

    &.btn-group-xs .btn {
        font-size: 85%;
    }

    &.btn-group-sm .btn {
        font-size: 95%;
    }

    &.btn-group-lg .btn {
        font-size: 105%;
    }

    &.btn-group-xg .btn {
        font-size: 115%;
        padding: 1em 2em;
    }
}

.btn-file {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    overflow: hidden;
}

.btn-file > span {
    display: block;
}

.btn-file .file {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 1000px;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.btn-file:hover .btn-default {
    background-color: @base-default-color;
    color: @base-white-color;
}

.btn-file:active .btn-default {
    background-color: @color-dark-silver;
    color: @font-default-color;
}

.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple.btn-ripple-start {
    transform: translateZ(0);
}

.btn-ripple .btn-ripple-effect {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .375);
    opacity: .2;
    transform: scale(.4);
    transition: transform .3s ease, opacity .75s ease;
}

.btn-ripple.btn-ripple-dark .btn-ripple-effect {
    background-color: rgba(0, 0, 0, .5);
}

.btn-ripple .btn-ripple-effect.anim-end {
    transition: transform .3s ease, opacity .5s ease;
}