.modal{
   display: none;
   
   &.open{
       display: block;
   }
}

.modal__overlay{
   background: var(--tisc-overlay);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0.5;
   z-index: 1001;
}

.modal__body{
   min-width: 750px;
   min-height: 400px;
   max-height: 900px;
   background: var(--tisc-bg-secondary);
   color: var(--tisc-text-primary);;
   text-align: center;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1002;
}

.modal__title{
   display: inline-block;
   font-weight: 700;
   margin: 15px 0;
   font-size: 24px;
}

.modal__close--button{
   padding: 0;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   position: absolute;
   top: 5px;
   right: 5px;
   color: var(--tisc-text-primary);
   background: var(--tisc-bg-secondary);
   transition: all .2s;
   border: none;

   &:hover{
       border: none;
       box-shadow: 0 4px 6px var(--tisc-box-shadow);
       color: $blue;
   }

  @include pseudo($content: "×") {
     line-height: 40px;
     font-size: 36px;
  }

}

.modal__content{
   padding: 0 35px 20px;
}

.modal__open-button{
  display: contents;
}