@import 'mixins';
@import 'basket';
@import 'catalogue';
@import 'customer';
@import 'checkout';
@import 'privacy';
@import 'blogs';
@import 'popup_basket';

.breadcrumb{
    @extend .mb-0, .py-3;
}

.fa-stack{
    width: $font-size-base;
    height: $font-size-base;
    line-height: $font-size-base;
}

.fa-stack i{
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}

.btn.icon-left i{ @extend .me-2; }
.btn.icon-right i{ @extend .me-2; }

a.text-dark{
    &:hover{
        color: $gray-900;
    }
}

.help-block{
    @extend .text-muted;
    font-size: .75rem;
}

.align-data-middle tr td, .align-data-middle tr th{
    vertical-align: middle;
}

.form-group small ul{
    @extend .mt-3;
}

.alert{
    .btn{
        @extend .mt-3;
    }
}

.form-check{
    input{
        border-color: $gray-500;
    }
    &.radioselect{
        label{
            cursor: pointer;
        }
        input{
            @extend .form-check-input;
        }
    }
}

.content-page-wrapper{
    @extend .my-5;
}

.jumbotron{
    @extend .py-4;
    background: $gray-200;
    border-radius: $border-radius-lg;
}

.embed-responsive{@extend .ratio;}
.embed-responsive-1by1{@extend .ratio-1x1;}
.embed-responsive-4by3{@extend .ratio-4x3;}
.embed-responsive-16by9{@extend .ratio-16x9;}
.embed-responsive-21by9{@extend .ratio-21x9;}

.position-unset{
    position: unset;
}

.is-invalid, .error{
    input{
        @extend .is-invalid;
    }
    .error-block{
        @extend .text-danger;
    }
}

.errorlist{
    @extend .alert, .alert-danger;
    list-style: none;
}

input{
    position: relative;
    background-image: unset !important;
    &[type="radio"]{
        @extend .form-check-input;
        &:after{
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50%;
            height: 50%;
            transform: translate(-50%, -50%);
            border-radius: 100%;
            background: white;
            opacity: 0;
            transition: .2s ease;
        }
        &:checked{
            &:after{
                opacity: 1;
            }
        }
    }
    &[type="checkbox"]{
        @extend .form-check-input;
        &:after{
            content: '\f003';
            font: normal normal normal .6rem 'Highbiza';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: 800;
            opacity: 0;
            transition: .2s ease;
        }
        &:checked{
            &:after{
                opacity: 1;
            }
        }
    }
}

.alert-dismissible{
    .btn-close{
        padding: 1.1rem;
        background-image: unset;
        &:after{
            content: '\f038';
            font: normal normal normal 1.2rem 'Highbiza';
            line-height: 1;
        }
    }
}

input.hasDatepicker{
    position: relative;
    overflow: hidden;
    &:after{
        content: '\f090';
        font: normal normal normal 1rem 'Highbiza';
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        background: white;
    }
}

.alert-messages-header{
    .toast-container{
        width: 100%;
        .toast{
            width: 100%;
            max-width: 450px;
            animation: fadeToLeft .5s ease both;
            @for $i from 1 through 10{
                &:nth-child(#{$i}){
                    animation-delay: #{.2 * $i + s};
                }
            }
            .toast-header{
                background: rgba($white, 1);
            }
            .toast-body{
                background: rgba($white, .8) !important;
                a{
                    margin-top: .5rem;
                    font-size: .8rem;
                }
            }
        }
    }
}

@keyframes fadeToLeft{
    from{ transform: translateX(20px); opacity: 0; }
    to{ transform: translateX(0); opacity: 1; }
}

// Fallback for having no border
@if $border-width == 0px{
    input.form-control, select.form-select{
        box-shadow: $box-shadow-sm;
    }
}

// Backwards compatible solution for roadrunner 
// selectboxes with old spacings
.ml-1{ @extend .ms-1; }
.ml-2{ @extend .ms-2; }
.ml-3{ @extend .ms-3; }
.ml-4{ @extend .ms-4; }
.ml-5{ @extend .ms-5; }
.pl-1{ @extend .ps-1; }
.pl-2{ @extend .ps-2; }
.pl-3{ @extend .ps-3; }
.pl-4{ @extend .ps-4; }
.pl-5{ @extend .ps-5; }
.mr-1{ @extend .me-1; }
.mr-2{ @extend .me-2; }
.mr-3{ @extend .me-3; }
.mr-4{ @extend .me-4; }
.mr-5{ @extend .me-5; }
.pr-1{ @extend .pe-1; }
.pr-2{ @extend .pe-2; }
.pr-3{ @extend .pe-3; }
.pr-4{ @extend .pe-4; }
.pr-5{ @extend .pe-5; }