@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;

    &__form-input-container {
        margin-bottom: 10px;
    }

    &__label {
        display: inline-block;
        min-width: (126/@px); 
        text-align: right;
    }

    &__button-group-container {
        margin-top: 20px;
        text-align: right;
    }

    &.visible {
        display: block;
    }

    h1 {
        text-align: center;
    }

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

        .enable__is-dark-mode & {
            filter: invert(100%) brightness(140%);
        }

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

dialog {
    position: fixed;
}

/*
 * For decorating the page (not the modal)
 */
.image {
    position: absolute;
    z-index: 1;
    top: 0;
    left: calc(50% - 50vmin);
    width: 100vmin;
    margin: 0 auto;

    .enable__is-dark-mode & {
        filter: invert(50%);
    }

    &__container {
        position: relative;
        height: 92vmin;
    }
}

.modal__opener {
    .appearance(none);
    z-index: 2;
    position: absolute;
    left: calc(50% - 27vmin);
    top: 22vmin;
    font-size: 2.5vmin;

    .enable__is-dark-mode & {
        background: @dark-mode-black;
        color: @dark-mode-white;
        border: solid 1px @dark-mode-white;
    }
}