$close-path: "M9.4,8l6.3-6.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L8,6.6L1.7,0.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L6.6,8l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C0.5,15.9,0.7,16,1,16s0.5-0.1,0.7-0.3L8,9.4l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L9.4,8z";

.modal {
    position: fixed;
    top: 0;
    left: -300vw;
    z-index: 2060;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    background: none;
    box-shadow: none;

    &__backdrop {
        position: fixed;
        inset: 0;
        background: rgba(#000, 0.2);
    }

    &__dialog {
        display: block;
        position: relative;
        max-width: 40rem;
        max-height: 100%;
        width: 100%;
        margin: 1.75rem auto;
        transform: translate(0, -5rem);
        opacity: 0;

        transition:
            transform 300ms ease-out,
            opacity 200ms ease-out;
        box-shadow: 0 0 1.5rem rgba(#000, 0.2);
    }

    &__dialog-content {
        background: #fff;
        padding: 1.5rem 1rem;
    }

    &__btn-dismiss {
        cursor: pointer;
        appearance: none;
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
        height: 1rem;
        width: 1rem;
        border: 0;
        background: transparent;
        color: #333;

        &:hover,
        &:focus {
            opacity: 0.8;
        }

        .ico {
            display: block;
            height: inherit;
            width: inherit;
            background-color: #333;
            clip-path: path($close-path);
        }
    }

    &--show {
        border: 0;
        padding: 0;
        left: 0;
    }

    &--show &__dialog {
        transform: translate(0, 0);
        opacity: 1;
    }

    &--dismissing {
        left: 0;
    }
}