.btn {
    position: relative;
    cursor: pointer;
    width: auto;
    display: block;
    font-size: 12pt;
    font-weight: 700;
    padding: 20px 50px;   
    text-align: center; 
    @include transition(all, .5s, ease);

    &.btn-white {
        color: $white;
        border: 1px solid $white;
        background-color: transparent;
        
        &:hover {
            color: $white;
            background-color: rgba($white, .2);
        }
    }

    &.btn-black {
        color: $black;
        border: 1px solid $black;
        background-color: transparent;

        &:hover {
            color: $black;
            background-color: rgba($black, .2);
        }
    }

    &.btn-solid-black {
        color: $white;
        border: 1px solid $black;
        background-color: $black;
        
        &:hover {
            border: 1px solid rgba($black, .9);
            background-color: rgba($black, .9);
        }
    }

    &.btn-checkout {
        display: block;
        color: $white;
        width: 100%;
        padding: 25px 50px; 
        border: 1px solid $black;
        background-color: $black;
    }

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

    &.btn-fit-content {
        width: fit-content;
        margin: 0 auto;
    }
}

.item-add-to-cart {
    cursor: pointer;
    position: absolute;
    left: 0;
    bottom: 0;
    width: -webkit-fill-available;
    border: 0;
    display: block;
    margin: $size-sm;  
    font-weight: 500;
    text-align: center;
    padding: 15px 0;    
    z-index: 1;
    
    @include media-breakpoint-up(lg) {
        opacity: 0;
        visibility: hidden;
        @include translate(0, 20px);
        @include transition(all, .5s, ease);
    }

    @include media-breakpoint-up(xxl) {
        padding: 30px 0;
        font-size: 12pt;
    }

    &.btn-black {
        background: $black;
        color: $white;
        
        @include media-breakpoint-up(lg) {
            background: $black-alpha;
            
            &:hover {
                background: $black;
            }
        }        
    }

    &.btn-white {
        background: $white;
        color: $black;
        
        @include media-breakpoint-up(lg) {
            background: $white-alpha;
            
            &:hover {
                background: $white;
            }
        }
    }
}

.item-add-to-favorites {
    cursor: pointer;
    position: absolute;
    top: calc($size-sm / 2);
    right: calc($size-sm / 2);
    z-index: 1;
    
    &::before {
        @extend .bi, .bi-heart, .text-xl;  
        @include transition(all, .5s, ease);
    }
    
    &:hover,
    &.active {
        &::before {
            color: red;
            @extend .bi, .bi-heart-fill, .text-xl;        
        }
    }
}