@primer/react-brand/esm/MediaPlaylist/MediaPlaylist.module-BddC0boN.css

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{padding-block-start:var(--base-size-36);padding-inline:var(--base-size-20)}@media screen and (width<=63.24rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{width:100%;max-width:38.625rem;margin-inline:auto;padding:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h1+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h2+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h3+p{margin-block-start:var(--base-size-12)}}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17{background:var(--brand-MediaPlaylist-bgColor);flex-direction:column;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);order:2;min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj{min-height:var(--base-size-48);align-items:center;gap:var(--base-size-8);padding:var(--base-size-12) var(--base-size-16);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);text-transform:uppercase;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingLabel___cOPfs{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;margin:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs{align-items:center;gap:var(--base-size-8);color:var(--brand-color-text-default);display:inline-flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs:before{content:"•";color:var(--brand-color-text-muted)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{width:100%;padding:var(--base-size-16);order:1}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2{min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2[hidden]{display:none}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx{gap:var(--base-size-20);flex-direction:column;width:100%;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr{max-width:var(--brand-Prose-lineLength)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb{background-color:var(--base-color-scale-black-0);overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb img,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb picture,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb video,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb iframe{width:100%;max-width:100%;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{flex-direction:column;order:2;display:flex;overflow-x:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc .Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{max-block-size:calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));overscroll-behavior:contain;scroll-padding-block:var(--base-size-24);overflow-y:auto}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__pagination___mct_v{padding:var(--base-size-12) var(--base-size-16) var(--base-size-16);border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);order:3;justify-content:center;margin:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C{min-width:0;min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-12)));flex-direction:column;flex:none;align-items:flex-start;display:flex;position:relative;overflow-x:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C:before{content:"";height:var(--brand-borderWidth-thin);transform-origin:50% 100%;background-color:var(--brand-color-border-muted);transition:transform var(--brand-animation-duration-fast) ease, background-color var(--brand-animation-duration-fast) ease;position:absolute;inset-block-end:0;inset-inline:0;transform:scaleY(1)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G:before{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s{color:var(--brand-color-text-muted);margin:0;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G .Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s{color:var(--brand-color-text-default)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingContent___pzVd0{flex:auto;min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu{gap:var(--base-size-4);flex-direction:column;min-width:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingTitle___F1sIm{color:inherit;word-wrap:anywhere;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX{box-sizing:border-box;width:100%;min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-12)));color:inherit;font:inherit;text-align:left;cursor:pointer;padding:var(--base-size-12) var(--base-size-16);background:0 0;border:0;outline:none;flex-direction:column;align-items:flex-start;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ{align-items:flex-start;gap:var(--base-size-12);width:100%;min-width:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA{width:var(--base-size-112);block-size:calc(var(--base-size-64) - var(--brand-borderWidth-thin));aspect-ratio:16/9;border-radius:var(--brand-borderRadius-small);background-color:var(--brand-color-canvas-subtle);flex-shrink:0;display:block;overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA>*{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-4)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__content___m36IL{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:flex}@media screen and (width<=63.24rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{padding-block-end:var(--base-size-24)}}@media screen and (width>=38.625rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=63.25rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{box-sizing:border-box;width:100%;border-inline:none;max-inline-size:80rem;margin-inline:auto;padding:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17{--brand-MediaPlaylist-desktopGutter:3.75rem;--brand-MediaPlaylist-sidebarWidth:27rem;box-sizing:border-box;grid-template-columns:minmax(0,1fr) minmax(0,27rem);grid-template-areas:"media tabs";grid-template-columns:minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));grid-column-gap:3.75rem;grid-column-gap:var(--brand-MediaPlaylist-desktopGutter);-moz-column-gap:3.75rem;-moz-column-gap:var(--brand-MediaPlaylist-desktopGutter);column-gap:3.75rem;column-gap:var(--brand-MediaPlaylist-desktopGutter);width:100%;padding-inline-start:3.75rem;padding-inline-start:var(--brand-MediaPlaylist-desktopGutter);display:grid}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);flex-direction:column;grid-area:tabs;align-self:stretch;padding-block-start:calc(var(--base-size-48) + var(--base-size-12));display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc .Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{max-block-size:calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{padding-block:var(--base-size-80);grid-area:media;justify-content:flex-start;align-items:flex-start;padding-inline:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2{width:100%}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx{gap:var(--base-size-40)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb{width:100%}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb iframe{aspect-ratio:16/9;border-radius:var(--base-size-6)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h1+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h2+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h3+p{margin-block-start:var(--base-size-12)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj{min-height:auto;padding-block-start:var(--base-size-24);padding-block-end:var(--base-size-12);padding-inline-start:var(--base-size-32);padding-inline-end:var(--brand-MediaPlaylist-desktopGutter)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C{min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-20)))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX{min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-20)));padding-block:var(--base-size-20);padding-inline-start:var(--base-size-32);padding-inline-end:var(--brand-MediaPlaylist-desktopGutter)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ{align-items:center}}@media screen and (width>=80rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border-inline-end:0}}