@import "shared/mixins-and-vars";

/*
 * This CSS from http://gdkraus.github.io/accessible-modal-dialog/
 */

.a11y-modal {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    border: thin #000 solid;
    background-color: #fff;
    z-index: 3; /* places the modal dialog on top of everything else */
    position: fixed;
    top: 25%;
    left: 25%;
    display: none;

    .enable__is-dark-mode & {
        background-color: @dark-mode-black;
        
    }

    &.visible {
        display: block;
    }

    h1 {
        text-align: center;
    }

    &__button--close {
        position: absolute;
        top: -20px;
        right: -20px;
        .vendor(appearance, none);
        background: none;
        border: none;
        display: inline;

        & {
            img {
                border: 0;
                width: 38px;
                height: 38px;
            }
        }
    }
}

#a11y-modal {
    &__overlay {
        width: 100%;
        height: 100%;
        z-index: 2; /* places the modal overlay between the main page and the modal dialog*/
        background-color: #000;
        opacity: 0.5;
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        margin: 0;
        padding: 0;

        .enable__is-dark-mode & {
            background-color: @dark-mode-white;
        }

        &.visible {
            display: block;
        }
    }
}