// Modal
//
// Colette uses the accessible modal [a11y-dialog](https://www.npmjs.com/package/a11y-dialog).
//
// By defaut modal is 90% of viewport width
//
// For react project we use [react-modal](https://www.npmjs.com/package/react-modal)
// but CSS need some overwrite to match the overlay as a wrapper.
//
// .modal-window-auto - modal width related to content
// .modal-window-small - modal width 440px
// .modal-window-medium - modal width 600px
// .modal-window-closeOutside - close button outside modal body
// .modal-window-closeHidden - close button hidden
// .modal-window-fixedHeight - modal with a fixed height at 70vh and an inner scroll
//
// Markup: modal.twig
//
// Styleguide: Components.Modal

// Demo modal trigger button
//
// Markup:
// <button type="button" id="open-modal-btn" class="btn" data-a11y-dialog-show="accessible-modal">open modal</button>
//
// Styleguide: Components.Modal.demo
.modal
    position fixed
    overflow auto
    width 100%
    height 100%
    z-index: $zIndex.modals
    top 0
    left 0
    display flex
    -webkit-overflow-scrolling touch // enable iOs momentum-based scrolling

    &[aria-hidden=true]
        display none

    &-overlay
        position fixed
        top -30%
        bottom -30% // These negative values avoid gap between address bar & overlay, on mobile, when address bar disappear
        left 0
        width 100%
        background rgba(0, 0, 0, .6)

    &-window
        _pt(1)
        _pb(1)
        position relative
        margin auto
        width 90%
        max-width 90%
        display flex
        flex-direction column

        &-auto
            width auto

        &-small
            width _rem(440)

        &-medium
            width _rem(600)

        &-closeOutside
            padding-top _rem(40px)

            .modal-close
                top _rem(10px)
                right 0

        &-closeHidden
            .modal-close
                display none

        &-fixedHeight
            .modal-content
                height 70vh
                overflow-y auto

    &-close
        position absolute
        z-index 2
        top _rem(10px) + _gutters(1)
        right _rem(10px)

        svg // this svg should be `cross`
            width _rem(12px)
            height _rem(12px)
            transform rotate(45deg)

    &-content
        position relative
        z-index 1
        width 100%
        overflow hidden