@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.video-stage {
  background: red;
  color: white;
  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;
      bottom: 20px;
      display: flex;
      gap: 20px;
    }
    .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(--theme-color-secondary);
      }
    }
    .video--play-pause {
      &:before {
        @include icon-sanduhr;
      }
      &.paused {
        &:before {
          @include icon-schloss;
        }
      }
    }
    .video--mute-unmute {
      &:before {
        @include icon-stern;
      }
      &.unmuted {
        &:before {
          @include icon-schliessen;
        }
      }
    }
  }

  .container {
    position: relative;
  }

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

  .kicker {
    margin-bottom: 0.6em;
  }

  .btn {
    margin-top: 0.8em;
    margin-bottom: 0.4em;
  }

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