.clb-popup {
	position: fixed;
	z-index: 9999999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50vh);

	&:not(.-slide-in) {
		overflow: hidden;
		background-color: rgba($color-black, 0.99);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		.clb-popup-holder {
			height: 100%;
			padding: $header-height;
			
			@include flex;
			@include align-items(center);
			@include flex-just(center);

			@include sm-screen {
		
				padding: $grid-spacer;
			}
		}
	}

	&.-slide-in {

		.close-bar {
			height: auto;
			width: auto;
			left: unset;
			padding: 0.75rem;

			.icon-button {
				min-width: $circle-small;
				width: $circle-small;
				height: $circle-small;

				.icon {
					color: initial;
				}
			}
		}

		.popup-subscribe {

			@include box-shadow(false, 0px, 5px, 10px, 0px, $color-neutral-10);
		}
	}

	// Slide-in appearance

	&.-left-bottom,
	&.-right-bottom {

		@include spacer(bottom);
	}

	&.-left-bottom {

		@include spacer(left);

		@include sm-screen {

			@include spacer(right);
		}
	}

	&.-right-bottom {

		@include spacer(right);

		@include sm-screen {
			
			@include spacer(left);
		}
	}

	&.hidden {
		opacity: 0;
		visibility: hidden;
		display: initial;
	}

	&.visible {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .5s ease-in-out;
	}

	.close-bar {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;

		.btn-expand {
			display: inline-block;
		}
	}

	@include sm-screen {
		
		overflow-y: auto;
	}
}

// Close bar

.close-bar {
    position: relative;
    z-index: 11;
    height: $header-height;

    @include flex;
    @include align-items(center);
    @include spacer(padding-left);
    @include spacer(padding-right);
}