@mixin modal() {
    @include flex();
    @include align-items-center();
    @include justify-content-center();
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
    top: 0;
    left: 0;

    @include breakpoint(small) {
        padding: 8px;
    }

    &__close-button {
        position: absolute;
        width: 23px;
        height: 23px;
        top: 20px;
        right: 20px;

        svg {
            width: 23px;
            height: 23px;
            fill: color('text', 'close');
        }

        &:hover {
            cursor: pointer;
        }
    }

    &__close-button--light {
        top: 24px;
        right: 24px;

        svg {
            width: 20px;
            height: 20px;
            fill: color('text', 'close');
        }
    }

    &__wrapper {
        display: table;
        height: 100%;
        max-height: 350px;
        padding: 36px;
        border-radius: 4px;
        background-color: color('background', 'modal');
        box-shadow: 0 2px 7px 0 rgba(53, 53, 53, 0.5);
        text-align: center;

        &--signup,
        &--login {
            @include column(4);
            max-height: 524px;
            padding: 24px;
            background-color: color('primary', 'highlight');
        }

        &__image {
            width: 170px;
            height: 160px;
            margin: 24px auto;
        }

        &__title {
            max-width: 355px;
            margin: 0 auto 10px auto;
            @include subheader();
        }

        &__message {
            max-width: 355px;
            margin: 0 auto;
            @include body();
            color: color('text', 'modal');
        }
    }
}