// 
// Layout Helpers
//
.container{ position: relative; }
section{
	position: relative;
	// overflow: hidden;
    padding: map-get($spacers, 8) 0;
    @include mq($until: tablet) { padding: map-get($spacers, 6) 0; }
}

.h-full{
    min-height: 100vh;

}
@include mq($from: desktop) {
    .h-lg-full{
        min-height: 100vh;
    }
}
.h-half {
    min-height: 50vh;
} 
.h-100vh{ height: 100vh !important; }
@include mq($from: mobile) {.h-sm-100vh{height: 100vh !important; } }
@include mq($from: tablet) {.h-md-100vh{height: 100vh !important; } }
@include mq($from: desktop) {.h-lg-100vh{height: 100vh !important; } }
@include mq($from: wide) {.h-xl-100vh{height: 100vh !important; } }

.perpendicular{
    position: absolute;
    bottom: 0;
    transform-origin: left;
    transform: rotate(-90deg);
    line-height: 0;
}


////////////////////////////////////////////////////////////////////
// Utility --- should be seperated from helpers in a new file
////////////////////////////////////////////////////////////////////

/* Background */
.background-holder{
	position: absolute;
    width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    z-index: -1; // Indexing fixed
    overflow: hidden;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    background-repeat: no-repeat;

    &.background-fixed{
        background-attachment: fixed;
    }
    &.parallax{
        // min-height:100vh;
    }
    &.background-right{
        left: auto;
        right: 0;
    }
    &.overlay:before {
        position: absolute;
        content: '';
        background: rgba(0, 0, 0, 0.25);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1; // indexing fixed
    }

    &.overlay-primary:before{ background: rgba(map-get($colors, primary), 0.4); }
    &.overlay-info:before{ background: rgba(map-get($colors, info), 0.4); }
    &.overlay-success:before{ background: rgba(map-get($colors, success), 0.4); }
    &.overlay-warning:before{ background: rgba(map-get($colors, warning), 0.4); }
    &.overlay-danger:before{ background: rgba(map-get($colors, danger), 0.4); }
    &.overlay-0:before{ background: rgba(#000, 0.7); }
    &.overlay-1:before{ background: rgba(#000, 0.55); }
    &.overlay-2:before{ background: rgba(#000, 0.4); }
    
    video {
        position: absolute;
        display: block;
        z-index: -1;
        top: 0;
        left: 0;
        object-fit: cover;
        height: 100%;
        min-width: 100%;
    }
    .youtube-background {
        position: absolute !important;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        .mb_YTPBar { display: none !important; }
    }
}
.has-parallax{
    position: relative;
    overflow: hidden;
}
.overflow-hidden{
    overflow: hidden;
}

hr{
    border-color: currentColor;
    &.left{ margin-left: 0; }
    &.short{ width: modular-scale(5); }
}

.background-transparent{ background-color: transparent !important; }
@each $index, $color in $colors{
    .color-#{$index}{ color: $color !important; }
    .background-#{$index}{ background-color: $color !important; }
    .border-color-#{$index}{ border-color: $color !important; }
}

.badge-white{ background-color: #ffffff; }
.badge-primary{ background-color: map-get($colors, primary); }
.badge-info{ background-color: map-get($colors, info); }
.badge-success{ background-color: map-get($colors, success); }
.badge-warning{ background-color: map-get($colors, warning); }
.badge-danger{ background-color: map-get($colors, danger); }

// 
// Style helpers
// 
.radius-primary{ border-radius: $radius-primary !important; }
.radius-secondary{ border-radius: $radius-secondary !important; }
.radius-capsule { border-radius: $radius-capsule !important; }
.radius-square{ border-radius: 0 !important; }
.radius-round{ border-radius: 100% !important; }


.pos-relative{ position: relative; }
.pos-absolute{ position: absolute; }
.pos-fixed{ position: fixed; }

@include mq($from: desktop) {
    .w-lg-25{
        width: 25% !important;
    }
    .pos-lg-absolute{
        position: absolute;
    }
    .absolute-centered{
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}
.background-transparent{
    background-color: transparent;
    @include hover-focus { background-color: transparent !important; }
}
.r-0{ right: 0; }
.l-0{ left: 0; }
.t-0{ top: 0; }
.b-0{ bottom: 0; }


// To be refactored
.opacity-75{ opacity: 0.75; }

.elevated{ box-shadow: 0 0 40px rgba(0, 0, 0, 0.08); }
.box-shadow-wide{ box-shadow: 0 23px 40px rgba(0, 0, 0, 0.2); }