@import '../1-Helpers/mixins';
@import '../2-Tools/transitions';


$modal-padding: 24px;

.modal-trigger, .modal-close {
    cursor: pointer;
}

.modal {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    transition: $transition-fast-in-out;

    .overlay {
        background: #000000;
        z-index: -1;
    }

    .modal-content {
        // margin: 25px auto;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 88%;
        transform: translate(-50%, -110%);
        max-width: 500px;
        border-radius: 5px;
        transition: $transition-xmid-in-out;
        
        @include themify {
            background: themed('modalBackground')
        }

        @include tablet-and-up {
            margin-top: 50px;
        }
        
        main {
            width: 100%;
            max-height: 70vh;
            overflow: auto;
            padding: $modal-padding;
        }

        footer {
            padding: 12px $modal-padding;
            text-align: right;

            @include themify {
                border-top: 1px solid themed('modalFooterBorder')
            }

            button, .btn {
                &:not(&:last-child) {
                    margin-right: 5px;

                    @include laptop-and-up {
                        margin-rigt: 10px;
                    }
                }
            }
        }
    }

    &.active {
        pointer-events: all;
        opacity: 1;

        .modal-content {
            transform: translate(-50%, -70%);
        }
    }

    // accordion in modal
    .accordion {
        main {
            padding: 0;
        }
    }
}