@import 'variables';
@import 'mixin';


.modal {
    
    display: none;
    position: fixed; 
    z-index: 10; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    background: linear-gradient(to left top, rgba(64,47,239,.9), rgba(159,150,247,.9));
    
    .modal__container {
    
        position: relative;
        background-color: #E7E7ED;
        margin: auto;
        padding: 40px 45px;
        border: 1px solid #888;
        max-width: 550px;
        @include border-radius(10px);

        @media (max-width: 767px) {
        
            padding: 20px;
            
        }

        .modal__container__close {
            
            position: absolute;
            background-image: url("../img/icon-close.png");
            background-size: 24px auto;
            display: inline-block;
            top: -45px;
            right: 0;
            width: 24px;
            height: 24px;

            &:hover,
            &:focus {

                text-decoration: none;
                cursor: pointer;

            }

        }
    
    }

}