/*---------- ER Icons ----------*/

/* SVG Icon */
:root {
    --er-icon-svg-fill: #14466c;
    --er-icon-svg-stroke: #776a61;
}

/* H3 */
:root {
    --er-icon-h3-off: #14466c;
    --er-icon-h3-on: var(--er-icon-h3-off);
}


/* Hover (SVG & H3) */
/*------------------*/
/* The hover colors only work when the "off" class is not present */
:root {
    --hover-er-icon-svg-fill: var(--er-icon-svg-stroke);
    --hover-er-icon-svg-stroke: var(--er-icon-svg-fill);
    --hover-er-icon-h3: var(--er-icon-svg-stroke);
}

/* Modal */
:root {
    --modal-close-button: var(--er-icon-svg-fill);
    --hover-modal-close-button: var(--er-icon-svg-stroke);
}

.emergency-icons-container {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    margin: 0 auto;

    a[er-icon] {
        padding: 5px;
        flex: 0 1 210px;
        margin: 10px auto;
        display: block;
        text-decoration: none;

        .emergency-icon {
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            svg {
                overflow: visible;

                path {
                    fill: var(--er-icon-svg-fill);
                    stroke: var(--er-icon-svg-stroke);
                }
            }
        }

        h3 {
            margin: 5px auto;
            font-size: 22px;
            line-height: 1.1;
        }

        &.off {
            color: var(--er-icon-h3-off);
            pointer-events: none !important;

            h3 {
                color: var(--er-icon-h3-off);
            }
        }

        &:not(.off) {
            color: var(--er-icon-h3-on);

            h3 {
                color: var(--er-icon-h3-on);
            }

            &:hover {

                .emergency-icon {

                    svg {

                        path {
                            fill: var(--hover-er-icon-svg-fill);
                            stroke: var(--hover-er-icon-svg-stroke);
                        }
                    }
                }

                h3 {
                    color: var(--hover-er-icon-h3);
                }
            }
        }
    }
}

/*---------- Simple Modal ----------*/

html.disable-scroll,
body.disable-scroll {
    overflow: hidden;
}

html.disable-scroll {
    padding: 0 17px 0 0; /* adjust for 17px scrollbar width */
}

.emergency-icon-modal-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 10000000000;

    .emergency-icon-modal-content {
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        position: relative;
        max-width: 850px;
        width: 90%;
        max-height: 90%;
        overflow: auto;
        margin: auto;
        box-sizing: border-box;
        top: 50%;
        transform: translateY(-50%);

        h2 {
            margin: 0 auto 15px;
            max-width: 90%;
            text-align: center;
        }

        h3 {
            margin: 0 auto 15px;
            max-width: 90%;
            text-align: center;
        }
    }

    .button-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin: 25px auto 15px;

        a,
        p {
            margin: 0;
        }

        .btn {
             min-width: 300px;
        }
    }

    .close-emergency-icon-modal {
        position: absolute;
        top: 0;
        right: 10px;
        font-size: 45px;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
        color: var(--modal-close-button);
        z-index: 999;

        &:hover {
            color: var(--hover-modal-close-button);
        }
    }
}