// Custom default button
.btn-default {
    &,
    &:hover,
    &:focus {
        color: $default-button-foreground-color;
        text-shadow: none; // Prevent inheritence from `body`
        background-color: $default-button-background-color;
        border: 1px solid $default-button-background-color;
    }
}

// Round Button

%btn-round {
    margin: 4px;
    border-radius: 50%;
    opacity: .9;
}

.btn-round {
    @extend %btn-round;
    width: 45px;
    height: 45px;
    font-size: 20px;
}

.btn-round-big {
    @extend %btn-round;
    width: 55px;
    height: 55px;
    font-size: 22px;
}

.btn-round-xxl {
    @extend %btn-round;
    width: 65px;
    height: 65px;
    font-size: 24px;
}

.btn-round-xs {
    @extend %btn-round;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 10px;
}

.btn-link,
.btn-round,
.btn-round-big,
.btn-round-xxl,
.btn-round-xs {
    &:focus {
        &,
        &:active {
            outline: 0;
        }
    }
}

.overlap {
    position: absolute;
    bottom: 0;
    margin-left: -20px;
    background-color: $light-gray !important;
    border: $lighter-gray;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

.overlap-top {
    position: absolute;
    top: 0;
    margin-left: -20px;
}

.btn-container {
    position: relative;
    display: inline-block;
}

.btn-hand {
    padding-top: 0;
    padding-bottom: 0;
    color: $white;

    &:hover {
        color: $bootstrap-primary;
    }

    i {
        font-size: 21px;
    }
}

.media-right {
    .btn-hand {
        padding-top: 0;
        padding-bottom: 0;
        color: $gray;

        &:hover {
            color: $bootstrap-primary;
        }

        i {
            font-size: inherit;
        }
    }
}
