// ============================================================================
// Imports
// ============================================================================

@use "../../variables" as *;
@use "../body_molecules" as *;
@use "../body_atoms" as *;
@use "../soul_object" as *;

// Container Styles | Modal
// ============================================================================

.modal {
    @include flex--col;
    z-index: z("modal");
    @include sizing--border;
    width: 50%;
    margin: auto;
    background-color: rgb(255, 255, 255);
    padding-left: baseline(4);
    padding-right: baseline(4);
    border-radius: baseline(2);
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0;
}

.modal_header {
    @include text_align_center;
    margin-top: baseline(4);
    margin-bottom: baseline(2);
}

.modal_content {
    margin-top: baseline(2);
    margin-bottom: baseline(2);
}

.modal_footer {
    margin-top: baseline(2);
    margin-bottom: baseline(4);
}

.modal_form {
    @include flex--col;
}

.modal_fieldset {
    @include flex--col;
}

.modal_fieldset legend {
    width: 100%;
}

.modal_fieldset label {
    width: 100%;
}

.modal_fieldset input {
    width: 100%;
}

// .modal {
//   &:focus {
//     outline: none;
//   }

//   @extend .z-depth-5;

//   display: none;
//   position: fixed;
//   left: 0;
//   right: 0;
//   background-color: #fafafa;
//   padding: 0;
//   max-height: 70%;
//   width: 55%;
//   margin: auto;
//   overflow-y: auto;

//   border-radius: q(2);
//   will-change: top, opacity;

//   @media #{$medium-and-down} {
//    width: 80%;
//   }

//   h1,h2,h3,h4 {
//     margin-top: 0;
//   }

//   .modal-content {
//     padding: q(24);
//   }
//   .modal-close {
//     cursor: pointer;
//   }

//   .modal-footer {
//     border-radius: 0 0 q(2) q(2);
//     background-color: #fafafa;
//     padding: q(4) q(6);
//     height: 5q(6);
//     width: 100%;
//     text-align: right;

//     .btn, .btn-flat {
//       margin: q(6) 0;
//     }
//   }
// }
// .modal-overlay {
//   position: fixed;
//   z-index: 999;
//   top: -25%;
//   left: 0;
//   bottom: 0;
//   right: 0;
//   height: 125%;
//   width: 100%;
//   background: var(--color_text_primary);
//   display: none;

//   will-change: opacity;
// }

// Modal with fixed action footer
// .modal.modal-fixed-footer {
//   padding: 0;
//   height: 70%;

//   .modal-content {
//     position: absolute;
//     height: calc(100% - 5q(6));
//     max-height: 100%;
//     width: 100%;
//     overflow-y: auto;
//   }

//   .modal-footer {
//     border-top: q(1) solid rgba(0,0,0,.1);
//     position: absolute;
//     bottom: 0;
//   }
// }

// Modal Bottom Sheet Style
// .modal.bottom-sheet {
//   top: auto;
//   bottom: -100%;
//   margin: 0;
//   width: 100%;
//   max-height: 45%;
//   border-radius: 0;
//   will-change: bottom, opacity;
// }