/* 
* Global Variables
* Can override these easily in theme
*/

:root {
    /* The height of the feed, don't make it lower than 174 else it shows some youtube overlay items */
    --dodocasting-feed-height: 174px;
    /* The Background color of the Feed */
    --dodocasting-feed-bg-color: #0073aa;
    /* The Font color of the feed */
    --dodocasting-feed-color: #fff;
    /* The width of the leftside of the feed */
    --dodocasting-feed-left-width: 450px;
    /* The width of the fade side of the newsticker */
    --dodocasting-feed-ticker-fade-width: 150px;
    /* The width of the logo in the feed */
    --dodcasting-feed-logo-width: 300px;
    /* The width of the split between left and right in the feed */
    --dodocasting-feed-split-width: 2px;
    /* The height of the split between left and right in the feed */
    --dodocasting-feed-split-height: 102px;
    /* The color of the split between left and right in the feed */
    --dodocasting-feed-split-color: #fff;
}


/* Page */

html,
body {
    height: 100%;
    overflow: hidden;
    margin: 0;
}

/* Loader */

#dodocasting-loader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 1;
}

#dodocasting-loader img {
    width: 75%;
}

#dodocasting-loader .loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    color: #0089cb;
    background: radial-gradient(farthest-side, currentColor calc(100% - 6px), #0000 calc(100% - 5px) 0);
    mask: radial-gradient(farthest-side, #0000 calc(100% - 13px), #000 calc(100% - 12px));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 13px), #000 calc(100% - 12px));
    border-radius: 50%;
    animation: loader-rotate 3s infinite linear;
}

#dodocasting-loader .loader::before,
#dodocasting-loader .loader::after {
    content: "";
    grid-area: 1/1;
    background:
        linear-gradient(currentColor 0 0) center,
        linear-gradient(currentColor 0 0) center;
    background-size: 100% 10px, 10px 100%;
    background-repeat: no-repeat;
}

#dodocasting-loader .loader::after {
    transform: rotate(45deg);
}

@keyframes loader-rotate {
    100% {
        transform: rotate(1turn)
    }
}

/* Footer */

.dodocasting-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--dodocasting-feed-height);
    z-index: 1;
    background-color: var(--dodocasting-feed-bg-color);
}

.dodocasting-footer-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
}

.dodocasting-footer-left {
    width: var(--dodocasting-feed-left-width);
    min-width: var(--dodocasting-feed-left-width);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dodocasting-footer-split {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dodocasting-feed-split-width);
    width: var(--dodocasting-feed-split-width);
    height: 100%;
}

.dodocasting-footer-split::after {
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: var(--dodocasting-feed-split-width);
    height: var(--dodocasting-feed-split-height);
    background-color: var(--dodocasting-feed-split-color);
    z-index: 1;
}

.dodocasting-footer-left .logo {
    width: var(--dodcasting-feed-logo-width);
    max-width: var(--dodcasting-feed-logo-width);
}

.dodocasting-footer-right {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    line-height: var(--dodocasting-feed-height);
}

.dodocasting-footer-right::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--dodocasting-feed-ticker-fade-width);
    background-image: linear-gradient(to right, var(--dodocasting-feed-bg-color), transparent);
    z-index: 1;
}

.dodocasting-footer-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--dodocasting-feed-ticker-fade-width);
    background-image: linear-gradient(to left, var(--dodocasting-feed-bg-color), transparent);
    z-index: 1;
}

.dodocasting-footer-right .newsticker {
    display: inline-flex;
    flex-direction: row;
    font-size: 50px;
    color: var(--dodocasting-feed-color);
}

.dodocasting-footer-right .newsticker div {
    will-change: transform;
}

/* Youtube Container */

.youtube-container {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1.7777777778;
    pointer-events: none;
}

.youtube-container iframe {
    width: 300%;
    height: 100%;
    margin-left: -100%;
}


/* Slider Container */

.dodocasting,
.dodocasting-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}


/* Slider Items */

.dodocasting-item {
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: var(--dodocasting-feed-height);
    /* display: none; */
    position: absolute;
    overflow: hidden;
    will-change: transform;
}

.dodocasting-item:not(.active) {
    transform: translateX(100%);
}

.dodocasting-item.active {
    display: block;
}

.dodocasting-item.next {
    /* transform: translateX(100%); */
    opacity: 0;
}

.dodocasting-item.slide {
    transform: translateX(100%);
}

.dodocasting-item.fade {
    opacity: 0;
}

.dodocasting-item.prev {
    transform: translateX(-100%);
}


/* Slider Controls */

.dodocasting-control {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    z-index: 5;
    cursor: pointer;
}

.dodocasting-control.right {
    right: 0;
}

.dodocasting-control.left {
    left: 0;
}