// Z-levels
.z-depth-0 {
    box-shadow: none !important;
}

.z-depth-1 {
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1), 1px 1px 5px 0px rgba(0, 0, 0, 0.1);
}

.z-depth-1-half {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.z-depth-2 {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-3 {
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-4 {
    box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.z-depth-5 {
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

.hoverable {
    transition: box-shadow .55s;
    box-shadow: 0;
}

.hoverable:hover {
    transition: box-shadow .45s;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

// BUTTONS

.btn {
    min-width: 110px;
    border-radius: 0;
    border: 0;
    @extend .z-depth-1;
    transition: .2s ease-out;
    color: #fff;
    margin: 6px;
        &:hover {
        @extend .z-depth-1-half;
        color: #fff;
    }
    &:active,
    &:focus,
    &.active {
        outline: 0;
        color: #fff;
    }
    .fa {
        margin-top: 3px;
        &.right {
            margin-left: 3px;
        }
        &.left {
            margin-right: 3px;
        }
    }
}
.btn-round{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    display: inline-block;
    padding: 0;
    line-height:3.5rem; 
    margin: 0 5px;
    outline: none;
}
.btn-group {
    .btn {
        margin: 0;
    }
}

// Alert buttons
.btn-secondary {
    background-color: $secondary-color;
    &:hover,
    &:focus {
        background-color: lighten( $secondary-color, 5%)!important; 
        color: #fff;
    }
    &.active {
        background-color: darken( $secondary-color, 20%)!important;
        @extend .z-depth-1-half;
        &:hover {
            color: #fff;
        }
        &:focus {
            color: #fff;
        }
    }
    &.dropdown-toggle {
        color: #fff!important;
        background-color: $secondary-color!important;
        @extend .z-depth-1-half;
        &:hover {
            color: #fff;
            background-color: lighten( $secondary-color, 5%)!important; 
        }
        &:focus {
            color: #fff;
            background-color: $secondary-color;
        }
    }
}

.btn-secondary:active:hover {
    background-color: lighten( $secondary-color, 5%)!important;
    color: #fff; 
}

.btn-primary {
    background: #e65019;
    &:hover,
    &:focus {
        background-color: #f1602b;
    }
    &.active {
        background-color: darken( $primary-color, 20%)!important;
        @extend .z-depth-1-half;
    }
}

.btn-default {
    background: $default-color;
    &:hover,
    &:focus {
        background-color: lighten( $default-color, 5%)!important;
    }
    &.active {
        background-color: darken( $default-color, 20%)!important;
        @extend .z-depth-1-half;
    }
}

.btn-success {
    background: $success-color;
    &:hover,
    &:focus {
        background-color: lighten( $success-color, 2%)!important;
    }
    &.active {
        background-color: darken( $success-color, 20%)!important;
        @extend .z-depth-1-half;
    }
}

.btn-info {
    background: $info-color;
    &:hover,
    &:focus {
        background-color: lighten( $info-color, 5%)!important;
    }
    &.active {
        background-color: darken( $info-color, 20%)!important;
        @extend .z-depth-1-half;
    }
}

.btn-warning {
    background: $warning-color-dark;
    &:hover,
    &:focus {
        background-color: lighten( $warning-color-dark, 6%)!important;
    }
    &.active {
        background-color: darken( $warning-color, 20%)!important;
        @extend .z-depth-1-half;
    }
}

.btn-danger {
    background: $danger-color-dark;
    &:hover,
    &:focus {
        background-color: lighten( $danger-color-dark, 3%)!important;
    }
    &.active {
        background-color: darken( $danger-color-dark, 15%)!important;
        @extend .z-depth-1-half;
    }
}

.btn-link {
    background-color: transparent;
    color: #000;
    box-shadow: none;
    &:hover,
    &:focus{
        background-color: transparent;
        color: #000;
        box-shadow: none;
    }
}

// Additional button styles
.btn-primary-outline {
    border: 2px solid $primary-color;
    color: $primary-color;
    &:hover,
    &:focus {
        background-color: transparent;
        color: $primary-color;
    }
}

.btn-secondary-outline {
    border: 2px solid $secondary-color;
    color: $secondary-color;
    &:hover,
    &:focus {
        background-color: transparent;
        color: $secondary-color;
        border: 2px solid $secondary-color;
    }
}

.btn-default-outline {
    background-color: transparent;
    border: 2px solid $default-color;
    color: $default-color-dark;
    &:hover,
    &:focus {
        background-color: transparent;
        color: $default-color;
    }
}

.btn-success-outline {
    border: 2px solid $success-color;
    color: $success-color-dark;
    &:hover,
    &:focus {
        background-color: transparent;
        color: $success-color;
    }
}

.btn-info-outline {
    border: 2px solid $info-color;
    color: $info-color-dark;
    &:hover,
    &:focus {
        background-color: transparent;
        color: $info-color;
    }
}

.btn-warning-outline {
    border: 2px solid $warning-color;
    color: $warning-color-dark;
    &:hover,
    &:focus {
        background-color: transparent;
        color: $warning-color;
    }
}

.btn-danger-outline {
    border: 2px solid $danger-color;
    color: $danger-color-dark;
    &:hover,
    &:focus {
        background-color: transparent;
        color: $danger-color;
    }
}
.btn-fb {
    background-color: $fb-color;
}
.btn-gplus {
    background-color: $gplus-color;
}
// Pagination

.pager li a {
    border: 0;
    @extend .z-depth-1;
    transition: .2s ease-out;
    &:hover {
        @extend .z-depth-1-half;
    }
}

.btn-toggle {
    background-color: rgba(color('shades','black'),0.1);
    &:hover,
    &:focus {
        background-color: rgba(color('shades','black'),0.4)!important;
        color: #fff;
    }
    &.active {
        background-color: rgba(color('shades','black'),0.8)!important;
        @extend .z-depth-1-half;
        &:hover {
            color: #fff;
        }
        &:focus {
            color: #fff;
        }
    }
    &.dropdown-toggle {
        color: darken( $secondary-color, 20%)!important;
        background-color: rgba(color('shades','black'),0.4)!important;
        @extend .z-depth-1-half;
        &:hover {
            color: #fff;
            background-color: rgba(color('shades','black'),0.4)!important;
        }
        &:focus {
            color: #fff;
            background-color: rgba(color('shades','black'),0.4)!important;
        }
    }
}