@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;

.video-stage {
  background: var(--color-background);
  color: var(--color-text);
  min-height: calc(18vw + 300px);
  display: flex;
  align-items: center;
  margin: 0;
  position: relative;

  .video-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: blue;

    video {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: green;
    }

    .video--controls {
      position: absolute;
      left: 20px;
      top: 20px;
      display: flex;
      gap: 20px;
      z-index: 10;
    }

    .video--play-pause,
    .video--mute-unmute {
      display: block;
      width: 30px;
      height: 30px;
      cursor: pointer;
      &:before {
        font-family: 'Icons', sans-serif;
        font-size: var(--icon-size);
        line-height: 1;
      }
      &:hover {
        color: var(--color-decoration);
      }
    }
    .video--play-pause {
      &:before {
        @include icon-pause;
      }
      &.paused {
        &:before {
          @include icon-play;
        }
      }
    }
    .video--mute-unmute {
      &:before {
          @include icon-volume-on;
      }

      &.unmuted {
        &:before {
          @include icon-volume-mute;
        }
      }
    }
  }

  .container {
    position: relative;
  }

  &.first-element {
    @media(min-width: 1400px) {
      margin-top: -60px;
    }
  }

  .kicker {
    margin-bottom: 0.6em;
  }

  .text-box {
    .btn {
      margin-top: 0.8em;
      margin-bottom: 0.4em;
      background-color: var(--color-button-primary-background);
      color: var(--color-button-primary-text);
    }
  }

  .text-box {
    max-width: 580px;
    padding: calc(50px + 1vw) 0;
  }
}
