@use "../import/variables";
@use "../import/blueprints";
@use "../import/mixins";

.modal-container {position:fixed;top:0;left:0;width:100%;height:100%;z-index:11;background:rgba(variables.$color2,0.7);text-align:center;
  .modal-component {position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;background:rgba(variables.$color2,0.7);text-align:left;
    .modal {position:absolute;top:50%;left:50%;@include mixins.transform(translateX(-50%) translateY(-50%));max-height:100%;
      .modal-form-container {padding:15px;background:#fff;
        .buttons {display:flex;justify-content:center;margin-top:15px;padding-top:15px;border-top:1px solid variables.$grey5;
          .modal-btn {@extend %modal-btn;margin:0 10px;
            &.primary {@extend %modal-btn-primary;margin:0 10px;}
          }
        }
      }
      .form {
        input[type="text"] {@extend %textfield;}
        .buttons {display:flex;justify-content:center;margin-top:10px;
          .modal-btn {@extend %modal-btn;margin:0 10px;
            &.primary {@extend %modal-btn-primary;}
          }
        }
      }
      .title {color: variables.$grey5;margin-bottom:10px;font-size:1.5rem;line-height:1em;}
    }
  }
}