/** MODALS **/
.modal {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: $transition-default;
    opacity: 0;
    visibility: hidden;

    & &__box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        background-color: #fff;
        padding: 1rem;
        max-width: 40%;
        width: 100%;


        @include media(medium) {
            max-width: 75%;
        }

        &__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 0.8px solid rgb(223, 223, 223);
        }

        &__content {
            padding: 1rem 0;
            max-height: 500px;
            height: 100%;
            overflow-y: auto;
        

        }

        &__footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }

    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: $color-secondary;
        opacity: .5;
        top: 0;
        left: 0;

    }


    &.closed {
        opacity: 0;
        visibility: hidden;
    }

    &.active {
        opacity: 1;
        visibility: visible;
    }
}