//
// Spacers for horzontal
//

$spacer-sizes: (
        xs: .75rem,
        sm: 1rem,
        md: 1.5rem,
        lg: 2rem,
);

//create spacer
@each $spacer-key, $spacer-value in $spacer-sizes {

    .spacer-#{$spacer-key} {
        display: block;
        height: calc(#{$spacer-value} + 2vw);
    }


    // padding
    .spacer-p-#{$spacer-key} {
        display: block;
        padding-top: calc(#{$spacer-value} + 1vw);
        padding-bottom: calc(#{$spacer-value} + 1vw);
    }

    // margin
    .spacer-m-#{$spacer-key} {
        display: block;
        margin-top: calc(#{$spacer-value} + 1vw);
        margin-bottom: calc(#{$spacer-value} + 1vw);
    }
}


//
// Social media buttons
//

//create button for each color of social media
@each $color, $value in $sm-colors {


    .btn-#{$color} {
        @include button-variant($value, $value);
    }

}


.border-bottom-theme-1 {
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 1rem;

    &:before {
        content: "";
        background-color: $blue;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        left: 0;
        bottom: 0;
        z-index: 1;
        position: absolute;
    }
    &:after {
        content: "";
        width: 120px;
        height: 1px;
        bottom: 2.5px;
        left: 0;
        position: absolute;
        background: linear-gradient(to right,#e0e0e0 0,#e0e0e0 35%,#e0e0e0 65%,#FFF 100%);
        background: -ms-linear-gradient(left,#e0e0e0 0,#e0e0e0 35%,#e0e0e0 65%,#fff 100%);
        background: -o-linear-gradient(left,#e0e0e0 0,#e0e0e0 35%,#e0e0e0 65%,#fff 100%);
        background: -webkit-linear-gradient(left,#e0e0e0 0,#e0e0e0 35%,#e0e0e0 65%,#FFF 100%);
        background: -moz-linear-gradient(left,#e0e0e0 0,#e0e0e0 35%,#e0e0e0 65%,#fff 100%);
        background: -webkit-gradient(linear,left top,right top,color-stop(0%,#e0e0e0),color-stop(35%,#e0e0e0),color-stop(65%,#e0e0e0),color-stop(100%,#FFF));
    }
}

.bg-light-blue {
    background-color: #eef4fa !important;
}

.bg-light-blue-2 {
    background-color: #e4f1f9 !important;
}
