//*****************************************************************************
//*****************************************************************************
// SwellCore Quasar Modal Styles
//*****************************************************************************
//*****************************************************************************
.scq-modal {

    //-------------------------------------------------------------------------
    // Modal Defaults
    //-------------------------------------------------------------------------
    .scq-modal-content {
        .scq-modal-content-header {
            .scq-modal-content-header-icon {
                margin-right: 10px;
                i {
                    padding-bottom: 3px;
                    &.fa-spin {
                        padding-bottom: 0;
                    }
                    margin: 0;
                }
            }
            .scq-close-button {
                .fa, .fas,
                .la, .las,
                .material-icons {
                    margin-right: 0;
                }
            }
        }
    }

    //-------------------------------------------------------------------------
    // Modal Sizes
    //-------------------------------------------------------------------------
    &.scq-modal-size-xl {
        .scq-modal-content {
            min-width: 90vw;
            max-width: 90vw;
            min-height: 90%;
        }
    }
    &.scq-modal-size-lg {
        .scq-modal-content {
            min-width: 75vw;
            max-width: 75vw;
            min-height: 75%;
        }
    }
    &.scq-modal-size-md {
        .scq-modal-content {
            min-width: 60vw;
            max-width: 60vw;
            min-height: 60%;
        }
    }
    &.scq-modal-size-sm {
        .scq-modal-content {
            min-width: 40vw;
            max-width: 40vw;
            min-height: 40%;
        }
    }
    &.scq-modal-size-xs {
        .scq-modal-content {
            min-width: 20vw;
            max-width: 20vw;
            min-height: 30%;
        }
    }

    //*************************************************************************
    //*************************************************************************
    // Responsive CSS Styles
    //*************************************************************************
    //*************************************************************************

    //*************************************************************************
    // Large desktop
    //*************************************************************************
    @media (min-width: 1200px) {

    }

    //*************************************************************************
    // Small Desktop
    //*************************************************************************
    @media (min-width: 1025px) and (max-width: 1199px) {

        &.scq-modal-size-xl {
            .scq-modal-content {
                min-width: 100vw;
                max-width: 100vw;
                min-height: 100%;
            }
        }
        &.scq-modal-size-lg {
            .scq-modal-content {
                min-width: 90vw;
                max-width: 90vw;
                min-height: 90%;
            }
        }
        &.scq-modal-size-md {
            .scq-modal-content {
                min-width: 75vw;
                max-width: 75vw;
                min-height: 75%;
            }
        }
        &.scq-modal-size-sm {
            .scq-modal-content {
                min-width: 60vw;
                max-width: 60vw;
                min-height: 60%;
            }
        }
        &.scq-modal-size-xs {
            .scq-modal-content {
                min-width: 40vw;
                max-width: 40vw;
                min-height: 40%;
            }
        }

    }

    //*************************************************************************
    // Tablet
    //*************************************************************************
    @media (max-width: 1024px) {

        &.scq-modal-size-xl {
            .scq-modal-content {
                min-width: 100vw;
                max-width: 100vw;
                min-height: 100%;
            }
        }
        &.scq-modal-size-lg {
            .scq-modal-content {
                min-width: 90vw;
                max-width: 90vw;
                min-height: 90%;
            }
        }
        &.scq-modal-size-md {
            .scq-modal-content {
                min-width: 75vw;
                max-width: 75vw;
                min-height: 75%;
            }
        }
        &.scq-modal-size-sm {
            .scq-modal-content {
                min-width: 60vw;
                max-width: 60vw;
                min-height: 60%;
            }
        }
        &.scq-modal-size-xs {
            .scq-modal-content {
                min-width: 40vw;
                max-width: 40vw;
                min-height: 40%;
            }
        }

    }

    //*************************************************************************
    // Portrait tablet to landscape and Desktop
    //*************************************************************************
    @media (min-width: 768px) and (max-width: 979px) {

    }

    //*************************************************************************
    // Landscape phone to portrait tablet
    //*************************************************************************
    @media (max-width: 767px) {

        &.scq-modal-size-xl,
        &.scq-modal-size-lg,
        &.scq-modal-size-md,
        &.scq-modal-size-sm,
        &.scq-modal-size-xs {
            .scq-modal-content {
                min-width: 100vw;
                max-width: 100vw;
                min-height: 100%;
            }
        }

    }

    //*************************************************************************
    // Landscape phones
    //*************************************************************************
    @media (max-width: 480px) {

    }

    //*************************************************************************
    // Portrait phones and down
    //*************************************************************************
    @media (max-width: 320px) {

    }

}