/* -------------------------------------------
    Banner
        - Default
        - Hover Effect - Button Hide
        - Presets
---------------------------------------------- */

// Default
@if use_component(banner) {
    .banner {
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        font-size: 1rem;
        figure {
            flex: 0 0 100%;
            width: 100%;
            height: 100%;
        }
        figure img {
    		display: block;
            width: 100%;
            height: auto;
        }
        .banner-content {
            position: relative;
            z-index: 1;
        }
        .banner-item:last-child {
            margin-bottom: 0;
        }
		.banner-img {
			&.banner-img-hidden {
				visibility: hidden;
			}
		}
		&.parallax:not(.ui-sortable) {
			img {
				visibility: hidden;
				opacity: 0;
			}
		}
    }
    .banner-fixed {
        > .container,
        > .container-fluid {
            position: absolute;
            z-index: 1;
            .banner-content {
                margin-left: 20px;
                margin-right: 20px;
            }
        }
        .banner-content {
            position: absolute;
            z-index: 1;
        }

        > .container,
        > .container-fluid {
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    }
    .banner-full {
        height: 100vh;
        figure img {
            height: 100%;
            object-fit: cover;
        }
    }

    @include mq(md, max) {
        .banner {
            font-size: .9rem;
        }
    }

    @include mq(sm, max) {
        .banner {
            font-size: .8rem;
        }
    }

    @include mq(xs, max) {
        .banner-fixed {
            > .container,
            > .container-fluid {
                > .banner-content {
                    margin-left: 15px;
                    margin-right: 15px;
                }
            }
        }
    }
    .banner-item {
        color: #fff;
    }

// Presets
.simple-center {
    .banner-content {
        text-align: center;
    }
    &.banner-fixed .banner-content {
        left: 50%; 
        top: 50%;
        transform: translate(-50%, -50%);        
    }
}
.simple-left {
    &.banner-fixed .banner-content {
        left: 40px;
        top: 50%;
        transform: translate(0, -50%);
    }
}
.simple-right {
    .banner-content {
        text-align: right;
    }
    &.banner-fixed .banner-content {
        right: 40px;
        top: 50%;
        transform: translate(0, -50%);
    }
}
.badge-simple {
    &.banner-fixed .banner-content {
        bottom: 40px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .banner-content {
        text-align: center;
    }
}
.boxed {
    &.banner-fixed .banner-content {
        top: 50%;
        transform: translate(0, -50%);
    }
    .banner-content {
        padding: 3rem;
        max-width: 36rem;
        width: 100%;
        box-shadow: 0 0 10px 5px rgba(0,0,0,.2);
        background-color: #999;
        text-align: center;
    }
}
.boxed-left {
    .banner-content {
        margin-right: auto;
    }
    &.banner-fixed .banner-content {
        left: 40px;
    }
}
.boxed-center {
    .banner-content {
        margin: 0 auto;
    }
    &.banner-fixed .banner-content {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
.boxed-right {
    .banner-content {
        margin-left: auto;
    }
    &.banner-fixed .banner-content {
        right: 40px;
    }
}
.boxed-round {
    .banner-content {
        padding: 7.5rem 4.5rem;
        max-width: 42rem;
        border-radius: 50%;
        margin: 0 auto;
    }
    &.banner-fixed .banner-content {
        #{$left}: 60px;
    }
}}