.cdl-video-switcher {
margin: 0 0 1rem;
}
.cdl-video-switcher__tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.75rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.125rem;
}
.cdl-video-switcher__tab {
appearance: none;
border: 1px solid rgba(0, 0, 0, 0.15);
background: #f5f5f5;
color: inherit;
border-radius: 999px;
padding: 0.4rem 0.85rem;
font: inherit;
font-size: 0.875rem;
line-height: 1.3;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.cdl-video-switcher__tab:hover {
background: #ebebeb;
}
.cdl-video-switcher__tab:focus-visible {
outline: 2px solid #1DB7B7;
outline-offset: 2px;
}
.cdl-video-switcher__tab--active {
background: #1DB7B7;
border-color: #1DB7B7;
color: #fff;
font-weight: 600;
}
.cdl-video-switcher__panel {
width: 100%;
}
.cdl-video-switcher__embed {
position: relative;
width: 100%;
}
.cdl-video-switcher__embed iframe {
display: block;
width: 100%;
border: 0;
}
.cdl-modal__video .cdl-video-switcher {
margin-top: 0.25rem;
}
@media (max-width: 480px) {
.cdl-video-switcher__tab {
font-size: 0.8125rem;
padding: 0.35rem 0.7rem;
}
}