@import url(./valueINITbase.css);

/* Every track switch reloads the page (see Apple+Music.js) to reliably clear
   the browser's video decoder pool between embeds. The cross-fade between
   pages is turned off on purpose so the new video comes in hard. To bring the
   fade back, change this to `navigation: auto`. */
@view-transition {
    navigation: none;
}

#_id_iframe {
    grid-area: iframe;
    padding: 0;
    margin: 0;
}

._c_Apple-Music-Video-back-button {
    grid-area: center-lt;
}

._c_Apple-Music-Video-refresh-button {
    grid-area: center;
    padding: 0;
    margin: 0;
}

._c_Apple-Music-Video-forward-button {
    grid-area: center-rt;
    padding: 0;
    margin: 0;
}

._c_Apple-Music-Video-alphabet-buttons-left {
    grid-area: left;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: flex-end;
    }



._c_Apple-Music-Video-alphabet-buttons-right {
    grid-area: right;
    display: inline-flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;

}

#_id_Good-News {
    grid-area: GoodNews;
    /* Own view-transition group so the clock stays put instead of
       cross-fading out/in when the page reloads on a track change. */
    view-transition-name: clock;
}

::view-transition-group(clock) {
    animation-duration: 0s;
}

::view-transition-old(clock) {
    display: none;
}

::view-transition-new(clock) {
    animation: none;
    opacity: 1;
}

._c_Apple-Music-grid-buttons {
    grid-area: _c_Apple-buttons ;
}

._c_Apple-Music-grid {
    display: grid;
    justify-content: flex-start;
    align-items: end;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;

    grid-template-areas: 
     'left _c_header _c_header _c_header _c_header _c_header _c_header right' 
        'left iframe iframe iframe iframe iframe iframe right'
        'left iframe iframe iframe iframe iframe iframe right'
        'left iframe iframe iframe iframe iframe iframe right'
        'left GoodNews GoodNews GoodNews GoodNews GoodNews GoodNews right'
        '_c_Apple-buttons _c_Apple-buttons _c_Apple-buttons _c_Apple-buttons _c_Apple-buttons _c_Apple-buttons _c_Apple-buttons _c_Apple-buttons' ;
}


button {
    border: 3px solid green;
    /* padding: 0;
    margin: 0;
    height: auto; */
}

._c_header {
    grid-area: _c_header;
}
/* Click-registered feedback: stays lit (see litButton in Apple+Music.js) */
._c_Apple-Music-forward.lit { background-color: #1e90ff; box-shadow: 0 0 12px #1e90ff; }
._c_Apple-Music-back.lit    { background-color: #e5201f; box-shadow: 0 0 12px #e5201f; }