@import
    'src/fonts/stylesheet',
    '~crispy-css/src/crispy-all';

body {
    font-family: 'IBM Plex Mono';
    background: #232628;
}

.modal {
    position: fixed;
    z-index: 100;
    top: -100%;
    left: 50%;
    min-width: 400px;

    margin: 2em 0 0 0;
    padding: 1em;
    background: white;

    transform: translateX(-50%);

    // animation to slide from top
    transition: top 0.3s ease-in-out;

    &--transition-enter {
        top: 0;
    }

    // background
    &-layer {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background: #0000001c;

        &--transition-enter {
            display: block;
        }
    }

    &__button {
        float: right;
        border: 0;
        padding: 0;
        background-color: transparent;
    }
}

button {
    &:hover {
        cursor: pointer;
    }
}

button {
    border-radius: 0;
    padding: 0.4em 1em;
    border: 0;
    position: relative;

    &:before {
        position: absolute;
        top: 0;
        left: 0;
        //content: "#444";
    }

    &:after {
        position: absolute;
    }
}

//