.ZoomControls {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  background: rgba(0,0,0,.5);
  border-radius: var(--border-radius-default);
  width: 100%;
  height: 3.375rem;
  max-width: 274px;
  transform: translate3d(-50%, 0, 10px);
  transition: opacity .3s ease-in;
  pointer-events: none;

  &.open {
    z-index: var(--z-media-viewer);
    pointer-events: all;
  }

  .zoom-out,
  .zoom-in {
    position: absolute;
    top: 0.4375rem;
    width: 2.5rem;
    height: 2.5rem;
    color: #fff;

    i {
      font-size: 1.5rem;
    }
  }

  .zoom-out {
    left: .5rem;
  }

  .zoom-in {
    right: .5rem;
  }

  .seekline {
    position: absolute;
    left: 3.25rem;
    right: 3.25rem;
    top: 1.125rem;
    height: 1rem;

    &-track {
      position: absolute;
      top: 50%;
      left: -.25rem;
      right: -.25rem;
      height: 2px;
      transform: translateY(-50%);
      background-color: rgba(255, 255, 255, .5);
      border-radius: var(--border-radius-default);
    }

    &-played,
    &-input {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      border-radius: var(--border-radius-default);
    }

    &-played {
      background: #fff;
      transition: width 200ms;

      &::after {
        content: '';
        position: absolute;
        width: .75rem;
        height: .75rem;
        border-radius: 50%;
        background-color: var(--color-white);
        right: 0;
        top: 50%;
        transform: translate(.325rem, -50%);
      }
    }

    &-input {
      width: 100%;
      height: 1rem;
      top: -.375rem;
      opacity: 0;
      margin: 0;
      padding: 0;
      cursor: pointer;
      overflow: hidden;

      &::-webkit-slider-thumb {
        margin-top: -2rem;
      }
    }
  }
}