/**
 * [Copyright Regular Labs]
 */

@import "variables";

[data-modals-element="modal"][data-modals-theme="classic"] {
    @import "variables";

    --button-size:            42px;
    --button-icon-size:       16px 16px;
    --close-button-size:      28px;
    --close-button-icon-size: 20px 20px;

    [data-modals-element="overlay"] {
        --color: 0, 0, 0;
    }

    [data-modals-element="spinner"] {
    }

    [data-modals-element="container"] {
        justify-content: center;
        align-items:     center;

        --margin:        10px;
        padding:         var(--margin);

        @media (min-width: $screen-md) {
            --margin: 20px;
        }
    }

    [data-modals-element="main"] {
        padding:       0;
        display:       block;
        position:      relative;
        background:    #ffffff;
        border-radius: 4px;
        overflow:      hidden;
        width:         auto;
        height:        auto;
        flex:          unset;
        margin:        auto;
        max-height:    100%;
        max-width:     100%;
    }

    [data-modals-element="pagination-bar"] {
        margin-top: auto;
    }

    [data-modals-element="center"] {
        max-height: 100%;
        max-width:  100%;
        display:    flex;
        width:      auto;
        height:     auto;
    }

    [data-modals-element="left"],
    [data-modals-element="right"] {
        position: absolute;
        top:      0;
        bottom:   0;
    }

    [data-modals-element="left"] {
        left: 0;
    }

    [data-modals-element="right"] {
        right: 0;
    }

    [data-modals-element="slides"] {
        max-height: 100%;
        max-width:  100%;
        display:    block;
        width:      auto;
        height:     auto;
    }

    [data-modals-element="slide"] {
        max-height:  100%;
        max-width:   100%;
        position:    relative;
        display:     flex;
        width:       auto;
        height:      auto;
        align-items: start;
        overflow:    auto;

        &.hidden {
            display: none;
        }
    }

    [data-modals-element="slide-container"] {
        align-items: start;
    }

    [data-modals-element="slide-content-inner"] {
        max-height: none;
        overflow:   unset;
    }

    [data-modals-element="slide-before"] {
        width:         100%;
        padding:       10px 20px calc(10px -  1rem) 20px;
        margin:        0;
        border-bottom: 1px solid #eeeeee;
    }

    [data-modals-element="slide-description"] {
        font-size:   .8em;
        font-weight: 400;
    }

    [data-modals-element="previous"],
    [data-modals-element="next"],
    [data-modals-element="close"],
    [data-modals-element="pagination-button"] {
        opacity: 0.5;
        padding: 0;
        margin:  0;

        &.active,
        &:hover,
        &:focus-visible {
            opacity: 1;
        }

        &:focus-visible:not(.active) {
            outline: 2px solid #0f3d81;
        }
    }

    [data-modals-element="close-bar"] {
        display: none;
    }

    [data-modals-element="close"] {
        position:         absolute;
        top:              0;
        right:            0;
        height:           var(--close-button-size);
        width:            var(--close-button-size);
        background-size:  var(--close-button-icon-size);
        z-index:          1007;
        opacity:          0.5;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black'%3E%3Cpath stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' /%3E%3C/svg%3E"),
                          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-width='8' stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' /%3E%3C/svg%3E");

        &.active,
        &:hover,
        &:focus-visible {
            opacity: .8;
        }
    }

    [data-modals-element="previous"],
    [data-modals-element="next"] {
        position:         absolute;
        background-color: #ffffff;
        top:              50%;
        margin-top:       -21px;
        padding:          8px;
        z-index:          1006;
        height:           var(--button-size);
        width:            var(--button-size);
        background-size:  var(--button-icon-size);
        opacity:          0;
        box-shadow:       0 0 10px rgba(0, 0, 0, 0.5);
    }

    [data-modals-element="main"]:hover {
        [data-modals-element="previous"],
        [data-modals-element="next"] {
            opacity: 1;
        }
    }

    [data-modals-element="previous"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M10 19l-7-7m0 0l7-7m-7 7h18' /%3E%3C/svg%3E");
        left:             0;
        border-radius:    0 6px 6px 0;
    }

    [data-modals-element="next"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M14 5l7 7m0 0l-7 7m7-7H3' /%3E%3C/svg%3E");
        right:            0;
        border-radius:    6px 0 0 6px;
    }

    @import "styling-pagination";

    [data-modals-element="pagination-bar"] {
        margin: var(--margin) var(--margin) 0 var(--margin);
    }

    [data-modals-element="pagination-text"] {
        color: #ffffff;
    }

    /* CONTENT TYPES */
    [data-modals-type="inline"] {
        [data-modals-element="slide-content"] {
            padding: 20px;
        }
    }

    [data-modals-element="countdown"] {
        width:            100%;
        height:           3px;
        position:         absolute;
        top:              0;
        left:             0;
        background-color: #049cdb;
    }

    [data-modals-type="iframe"] {
        &[data-modals-element="slide"] {
            overflow: hidden;
        }
    }

    [data-modals-type="audio"] {
        [data-modals-element="slide-content"] {
            padding: 20px;
        }
    }

    &.just-the-modal {
        [data-modals-element="overlay"],
        [data-modals-element="left"],
        [data-modals-element="right"],
        [data-modals-element="pagination-bar"],
        [data-modals-element="close-bar"] {
            display: none;
        }

        [data-modals-element="main"] {
            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
        }
    }
}