/* open and close animations */
.modal_container {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 110;
    transform: scale(0);
    &.one {
        transform: scale(1);
        .modal {
            animation: modal_expand .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
        }
        &.out {
            background-color: rgba(0,0,0,0);
            .modal {
                animation: modal_contract .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
            }
        }
    }
}

.modal {
    position: fixed;
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    top: 50%;
    left: 50%;
    z-index: 120;
    transform: translate(-50%, -50%) scale(0);
}

@keyframes modal_expand {
    0% {
      transform: translate(-50%, -50%) scale(0);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes modal_contract {
    0% {
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      transform: translate(-50%, -50%) scale(0);
    }
}



/* Vose Modal:
Close Button set font-size
Title set font-size and doesn’t get diminished
Video has video resolution as max height and max width. Just fill in app_height - close button height - titles height – whatever padding want on the 4 edges - whatever padding want for .modal
Text box below vose has set font-size and max height

Playlist Modal
Close Button set font-size
Title set font-size and doesn’t get diminished
Video has video resolution as max height and max width. Just fill in the remainder – width of playlistitems box - whatever padding want on the 4 edges - whatever padding want for .modal
Text box below playlist has set font-size and max height
*/

#vose_modal_close_button, #playlist_modal_close_button {
    text-align: right;
}

[inside_modal="true"] {
    display: flex;
    flex-direction: column;
    padding: 1vh 1vw 1vh 1vw;      /* this is needed to determines the max-width and max-height of this container and the max-height of the video in the javascript, among other things */
}

#vose_modal_close_button, #playlist_modal_close_button {
    align-self: flex-end;
    text-align: right;
    font-size: 16px;
    padding: 8px;
}

#vose_modal_pk_and_name, #playlist_modal_pk_and_name {
    max-width: 96vw;
}

.all_text_below_vid_wrapper {
    z-index: 1000;
    position: relative;
    align-self: flex-start;   /* prevents flex item from expanding to cover entire cross-axis (width in this case) of its parent */
    .all_text_below_vid {
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        outline: 1px solid #333;    /* cant use border bc theres a Chrome/WebKit compositing bug: when an element with a border sits inside a scrolled + transformed fixed ancestor, the top border can disappear/fade when the element isn’t flush with the scroll origin */
        box-sizing: border-box;
        padding: 5px;
        will-change: transform;     /* prevents: opacity, certain position values, or even -webkit-overflow-scrolling: touch can create new stacking contexts that override the straightforward z-index order */
        pre {
            white-space: pre-wrap;
            overflow-wrap: anywhere;   /* needed to words overflowing a line to wrap */
        }
        .place_border_above {
                padding-top: 10px;
                margin-top: 10px;
                border-top: .6px solid;
        }
        span {
            padding-left: 1.5px;
            margin-right: 10px;
        }
        #vose_modal_deduction, #playlist_modal_deduction {
            padding-bottom: 1px;
        }
    }
    .expand_and_collapse_arrows_container {
        position: absolute;
        inset-block-start: 9px;   /* top */
        inset-inline-end: 5px;    /* right */
        z-index: 1002;
        pointer-events: auto;      /* clickable; remove if you want pass-through */
        .up_arrow, .down_arrow {
            height: 20px;
        }
    }
}

.modal_video_wrapper_div {
    display: flex;
    z-index: 999;
}



/* vose only */
#vose_modal_video {
    max-width: 96vw;
}



/* playlist only, doesnt matter what screen size */
#playlist_modal_main_videoalltextpkg_and_playlistitems {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

#videoalltextpkg {
    display: flex;
    flex-direction: column;
}

.playlistitem_modal_name {
    white-space: pre-wrap;
}

#videoalltextpkg {
    margin-right: 2px;
}

#playlistitems {
    overflow-x: hidden;
    overflow-y: auto;
}

.playlistitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    .playlistitem_modal_name {
        text-align: center;
    }
    padding: 5px;
    border-radius: 5px;
    margin: 0 5px 5px 5px;
    &:first-child {
        margin-top: 5px;
    }
}

@media (orientation: landscape) {   /* corrects for: window.innerHeight in landscape on iPhones doesn’t include the bottom safe-area (home indicator) */
    div[fullscreen_that_works_on_mobile_too="true"] {
        height: calc(var(--inner_height) + env(safe-area-inset-bottom)) !important;
    }
}

/* screen size matters */
@media only screen and (max-width: 349px) {
    #vose_modal_pk_and_name, #playlist_modal_pk_and_name, .vose_pk_and_name, .playlist_pk_and_name {
        font-size: calc(30px*var(--entry_text_fraction_for_under_350px_wide_screens));
    }
    #vose_modal_subtitle, #playlist_modal_subtitle {
        font-size: calc(20px*var(--entry_text_fraction_for_under_350px_wide_screens));
    }
    .all_text_below_vid {
        font-size: calc(16px*var(--entry_text_fraction_for_under_350px_wide_screens));
    }
    #playlist_modal_main_video {
        max-width: calc(96vw - (100vw*var(--playlistitem_video_width_fraction_for_under_350px_wide_screens)) - 10px - 2px);
    }
    #playlistitems {
        width: calc((100vw*var(--playlistitem_video_width_fraction_for_under_350px_wide_screens)) + 20px);
    }
    .playlistitem_modal_name, .playlistitem_modal_video {
        font-size: calc(12px*var(--entry_text_fraction_for_under_350px_wide_screens));
        width: calc(100vw*var(--playlistitem_video_width_fraction_for_under_350px_wide_screens));
    }
    .playlistitem_modal_video {
        height: calc(100vw*var(--playlistitem_video_width_fraction_for_under_350px_wide_screens)*.5625);
    }
}
@media only screen and (min-width: 350px) and (max-width: 575px) {
    #vose_modal_pk_and_name, #playlist_modal_pk_and_name, .vose_pk_and_name, .playlist_pk_and_name {
        font-size: calc(30px*var(--entry_text_fraction_for_350px_through_576px_wide_screens));
    }
    #vose_modal_subtitle, #playlist_modal_subtitle {
        font-size: calc(20px*var(--entry_text_fraction_for_350px_through_576px_wide_screens));
    }
    .all_text_below_vid {
        font-size: calc(16px*var(--entry_text_fraction_for_350px_through_576px_wide_screens));
    }
    #playlist_modal_main_video {
        max-width: calc(96vw - (100vw*var(--playlistitem_video_width_fraction_for_350px_through_576px_wide_screens)) - 10px - 2px);
    }
    #playlistitems {
        width: calc((100vw*var(--playlistitem_video_width_fraction_for_350px_through_576px_wide_screens)) + 20px);
    }
    .playlistitem_modal_name, .playlistitem_modal_video {
        font-size: calc(12px*var(--entry_text_fraction_for_350px_through_576px_wide_screens));
        width: calc(100vw*var(--playlistitem_video_width_fraction_for_350px_through_576px_wide_screens));
    }
    .playlistitem_modal_video {
        height: calc(100vw*var(--playlistitem_video_width_fraction_for_350px_through_576px_wide_screens)*.5625);
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    #vose_modal_pk_and_name, #playlist_modal_pk_and_name, .vose_pk_and_name, .playlist_pk_and_name {
        font-size: calc(30px*var(--entry_text_fraction_for_576px_through_767px_wide_screens));
    }
    #vose_modal_subtitle, #playlist_modal_subtitle {
        font-size: calc(20px*var(--entry_text_fraction_for_576px_through_767px_wide_screens));
    }
    .all_text_below_vid {
        font-size: calc(16px*var(--entry_text_fraction_for_576px_through_767px_wide_screens));
    }
    #playlist_modal_main_video {
        max-width: calc(96vw - (100vw*var(--playlistitem_video_width_fraction_for_576px_through_767px_wide_screens)) - 10px - 2px);
    }
    #playlistitems {
        width: calc((100vw*var(--playlistitem_video_width_fraction_for_576px_through_767px_wide_screens)) + 20px);
    }
    .playlistitem_modal_name, .playlistitem_modal_video {
        font-size: calc(12px*var(--entry_text_fraction_for_576px_through_767px_wide_screens));
        width: calc(100vw*var(--playlistitem_video_width_fraction_for_576px_through_767px_wide_screens));
    }
    .playlistitem_modal_video {
        height: calc(100vw*var(--playlistitem_video_width_fraction_for_576px_through_767px_wide_screens)*.5625);
    }
}
@media only screen and (min-width: 768px) {
    #vose_modal_pk_and_name, #playlist_modal_pk_and_name, .vose_pk_and_name, .playlist_pk_and_name {
        font-size: 30px;      /* content-fit does not prevent extending to whole length, and overflow: nowrap does not wrap when reach max-width */
    }
    #vose_modal_subtitle, #playlist_modal_subtitle {
        font-size: 20px;
    }
    .all_text_below_vid {
        font-size: 16px;
    }
    #playlist_modal_main_video {
        max-width: calc(96vw - (100vw*var(--playlistitem_video_width_fraction_for_over_767px_wide_screens)) - 10px - 2px);
    }
    #playlistitems {
        width: calc(100vw*var(--playlistitem_video_width_fraction_for_over_767px_wide_screens) + 20px);
    }
    .playlistitem_modal_name, .playlistitem_modal_video {
        font-size: 16px;
        width: calc(100vw*var(--playlistitem_video_width_fraction_for_over_767px_wide_screens));
    }
    .playlistitem_modal_video {
        height: calc(100vw*var(--playlistitem_video_width_fraction_for_over_767px_wide_screens)*.5625);
    }
}