// /**
//  * Copyright � Olegnax (http://olegnax.com/). All rights reserved.
//  */

//
//  Variables
//  _____________________________________________

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
  .modal-popup.ox-newsletter-modal {
        &.no-overlay{
          z-index: 99999!important;
        }
	overflow: auto;
	left: 20px;
	right: auto;
	bottom: auto;
	top: 20px;
	width: 960px;
	max-width: ~"calc(100% - 40px)";
	margin: auto;
	max-height: ~"calc(100% - 40px)";

	transform: translateY(50px);
	opacity: 0;

	transition: none;
	/*box-shadow: 0px 5px 30px -5px rgba(0, 0, 0, 0.11);*/
	box-shadow: 0px 5px 70px rgba(0, 0, 0, 0.10);
        will-change:transform;
	.modal-inner-wrap {
	  overflow: hidden;
	  max-width: 100%;
	  width: 100%;
	  max-height: 100%;
	  margin: 0;
	  /*height:550px;*/
	  display: block;
	  position: static;

	  transform: translateY(0);
          background-attachment: local;
	  max-height: ~"calc(100vh - 40px)";
	  overflow-y: auto;
	}

	&._show {

        transition: opacity .4s ease, transform .7s ease;

	  transform: translateY(0);
	  opacity: 1;
	}

	.modal-header {
	  padding: 0;
	  height: 0;
	}

	.modal-content {
	  padding: 0;
	  height: 100%;
	}

	.action-close {
	  z-index: 10;
	}
        .ox-newsletter-modal__overlay{
            	z-index: 99998;
        }
  }

  .ox-newsletter-modal {
	.-form-button-below {
	  .block.newsletter {
		.form.subscribe {
		  flex-direction: column;
		}

		.action.primary {
		  width: 100%;
		  margin-top: 10px;
		}
	  }
	}
	.col {
	  position: relative;
	  width: 100%;

	  flex-basis: 0;

	  flex-grow: 1;
	  max-width: 100%;
            &.-content {
                padding:0;
            }
	}

	.block.newsletter {
	  background: none;
	  padding: 0;
	}

	.-image {
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: cover;
	  background-attachment: scroll;
	  height: 100%;
	}

	.inner {
            width: 100%;
	  padding: 60px;
	}

	.-content-v-center .inner {
	  margin: auto;
	}

	.-content-v-bottom .inner {
	  margin-top: auto;
	}

	.-content-h-left .-content {
	  text-align: left;
	}

	.-content-h-center .-content {
	  text-align: center;
	}

	.-content-h-right .-content {
	  text-align: right;
	}
  }
  .ox-unlock-newsletter{
      position:relative;
      .-form-wrapper{
            padding:12px;
            background:#fbe62d;
            width: 100%;
            .block.newsletter{
               margin: 0;
            }
      }
  }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  .ox-newsletter-modal {
	.-image {
	  padding-bottom: 70%;
	}

	.block.newsletter {
	  .form.subscribe {
		flex-direction: column;
	  }

	  .action.primary {
		width: 100%;
		margin-top: 10px;
	  }
	}
  }
    .ox-unlock-newsletter{
      .-form-wrapper{
          margin: 10px 0;
      }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
  .ox-unlock-newsletter{
      .-form-wrapper{
            z-index: 2;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            transition:all 0.2s ease;
      }
      &:hover{
       .-form-wrapper{
            width:70%;
       }
      }
  }
  .ox-newsletter-modal__container {
	display: flex;
	flex-wrap: wrap;
	height: 100%;
  }
  .ox-newsletter-modal {
	&.modal-popup {
	  overflow: hidden;
	}

	.-columns {
	  .col {
		padding: 0;

		flex: 0 0 50%;
		max-width: 50%;
	  }
          .-content{
            max-height: ~"calc(100vh - 40px)";
            overflow-y: auto;
          }
	}

	.-columns-right {
	  .-image {
		order: 2;
	  }
	}

	.-content {
	  height: 100%;
	  display: flex;
	  flex-direction: column;
	}
  }
}