// badge
.badge {
    padding: 9px 12px 8px;
    text-transform: uppercase;
    letter-spacing: .5px;

    &-primary {
        color: #fff;
    }

    &--blue {
        color: $blue;
        background-color: lighten($blue, 40%);
    }

    &--orange {
        color: $orange;
        background-color: lighten($orange, 40%);
    }

    &--teal {
        color: $teal;
        background-color: lighten($teal, 45%);
    }

    &--green {
        color: $green;
        background-color: lighten($green, 42%);
    }

    &--cyan {
        color: $cyan;
        background-color: lighten($cyan, 42%);
    }
}
// button
.btn {
    font-weight: 400;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
    transition: all .2s ease-in-out;

    &:active, &.active,
    &:focus, &.focus,
    &:active:focus,
    &:focus:active {
        outline: 0;
        box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
    }

    &:hover {
        // transform: translateY(-2px);
        box-shadow: 0 .25rem 1rem rgba(0,0,0,.2);
    }

    &:active {
        transform: translateY(0);
        box-shadow: 0 .25rem .75rem rgba(0,0,0,.15);
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active {
        &:focus {
            outline: 0;
            box-shadow: 0 .25rem .5rem rgba(0,0,0,.15);
        }
    }

    &-link {
        box-shadow: 0 0 0 transparent !important;
    }

    &-default {
        background-color: #fff;
        border-color: $gray-300;

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

    &-primary {
        color: #fff;

        &:hover {
            border-color: transparent;
        }
    }

    &-secondary {
        &:hover {
            border-color: transparent;
        }
    }

    &-outline-primary {
        &:hover {
            color: #fff;
        }
    }

    &.no-translate {
        // transform: translate(0, 0) !important;
    }
    // socical
    &-social {
        position: relative;
        color: #fff;
        background-color: $gray-800;
        padding-left: 3.25rem;

        &__icon {
            display: block;
            position: absolute;
            top: 50%;
            left: .5rem;
            margin-top: -1rem;
            width: 2rem;
            height: 2rem;
            line-height: 2rem;
            text-align: center;

            img {
                max-width: 1.25rem;
                max-height: 1.25rem;
            }

            i.mdi {
                display: inline-block;
                vertical-align: top;
                line-height: 2rem;
                font-size: 1.5rem;
            }
        }

        &:hover {
            color: #fff;
        }

        &--facebook {
            background-color: $facebook;
        }

        &--zalo {
            background-color: $zalo;
        }
    }
    // app download
    &-app-download {
        display: inline-block;

        &:hover {
            transform: translateY(-.125rem);
            opacity: .8;
        }

        &:active {
            transform: translateY(-.25rem);
        }
    }
}


// form

.form-label {
    margin-bottom: .25rem;
    font-size: .875rem;
    font-weight: 400;
    color: $gray-900;
}
.form-control {
    //
}

// breadcrumb
.breadcrumb {
    margin: 0;
    padding: .5rem .75rem;
    background-color: rgba(#000,.02);
    border: 0;
    flex-wrap: nowrap;
    overflow: auto;
    .breadcrumb-item {
        font-size: .875rem;
        white-space: nowrap;
        & + .breadcrumb-item::before {
            color: $gray-400;
        }
        &.active{
            color: $gray-600;
        }
    }
}