/* Стили элементов, которыми я управляю из JavaScript */
.overlay {
    transition: transform 0.5s ease-in-out;
}

#status-wrapper {
    overflow: hidden;
    & #statuses-belt {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: translateY(100%);
        transition: transform 0.25s ease-in-out;
        & h1 {
            margin: 0.2em 0;
        }
    }
}

.progress-bar {
    width: 100%;
    height: 3em;
    background-color: color-mix(in srgb, var(--primary) 35%, transparent);
    overflow: hidden;

    @media (max-width: 768px) {
    height: 2em;
    }
    
    & .progress-indicator {
        width: 0%;
        height: 100%;
        background-color: var(--primary);
        transition: width 0.25s ease-in-out;
    }
}

.video-player {
  width: 100%;
  position: relative;
  height: 100vh;

    & .long {
     position: absolute;
     left: 0;
     top: 0;
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
    }

    & .video-controls {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
        z-index:1;
        
        & .video-play-toggle {
          display: flex;
          justify-content: center;
          padding: 1.5em;
          background-color: color-mix(in srgb, var(--black) 60%, transparent);
          border-radius: 50%;
          border: none;
          cursor: pointer;
    
          & .button-icons-wrapper {
            position: relative;
            width: 5em;
            height: 5em;
    
            & svg {
              inset: 0;
              width: 100%;
              height: 100%;
              position: absolute;
              display: block;
              fill: var(--white);
              opacity: 0;
              transition: opacity 0s ease-in-out;
              }
    
              & #play {
                  opacity: 1;
              }
          }
        }

        & p {
            color: var(--white);
            text-align: center;
        }
    }

    &.is-playing {
        & .video-controls {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.5);
            transform-origin: center;
            transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
        }

        & .video-play-toggle .button-icons-wrapper #play {
            opacity: 0;
            transition: opacity 0s ease-in-out;
        }

        & .video-play-toggle .button-icons-wrapper #pause {
            opacity: 1;
            transition: opacity 0s ease-in-out;
        }
        
        & .long {
            opacity: 1;
            transition: opacity 0.2s ease-in-out;
        }
    }
}