.media-library-item__edit,
.media-library-item__remove {
  z-index: 6;
}

.media-library-item__preview .gds-video {
  pointer-events: none;
}

.media-library-item__preview .gds-video[data-id="video-vimeo"] {
  isolation: isolate;
  margin-bottom: 0;
  position: relative;

  .gds-video__video {
    display: none !important;
  }

  .gds-video__button--is-play {
    background: none;
    border: none;
    border-radius: 100%;
    clip-path: circle(2rem);
    cursor: default;
    height: 4rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
  }
  .gds-icon--l svg {
    height: 20px;
    width: 20px;
  }


  .gds-btn-wrapper {
    .gds-video__button--is-play {
      background: white;
    }
  }
}

.gds-video[data-id="video-vimeo"] {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.75rem;

  .gds-video__video {
    height: 100%;
    position: relative;
    width: 100%;
    flex-grow: 1;
    aspect-ratio: 16 / 9;
  }

  .gds-image {
    z-index: 4;
  }

  .gds-btn-wrapper,
  .gds-video__button--is-play,
  .gds-video__button--is-pause {
    z-index: 5;
  }

  .vjs-current-time,
  .vjs-time-divider,
  .vjs-duration {
    display: flex;
  }

  .vjs-remaining-time {
    display: none;
  }

  .vjs-time-divider {
    color: var(--color-accent, #00E47C);
  }

  .vjs-quality-selector {
    .vjs-icon-placeholder:before {
      font-family: VideoJS;
      content: "\f114";
    }
  }

  .vjs-menu-button-popup {
    .vjs-menu-content {
      width: 12em;
      left: -1em;
      padding: .2em .5em .5em;
      border-radius: .25em .25em 0 0;
    }

    .vjs-menu-item {
      background-color: var(--color-web-black-1-100, #191919);
      margin: .3em 0;
      padding: .5em;
      border-radius: .3em;
      white-space: nowrap;

      &:hover,
      &:focus,
      &:active {
        text-shadow: var(--color-white) 0 0 1em, var(--color-white) 0 0 1em, var(--color-white) 0 0 1em;
        color: var(--color-white);
      }

      &:focus:not(.vjs-selected),
      &.vjs-texttrack-settings,
      &.vjs-texttrack-settings:focus {
        background-color: var(--color-web-black-1-100, #191919);
      }

      &.vjs-selected {
        background-color: var(--color-primary-1-100, #08312A);
        color: var(--color-white);
      }
    }
  }

  .video-js {
    .vjs-control-bar {
      position: absolute !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      margin-top: -30px !important;
      z-index: 3;
      bottom: 0 !important;
      background-color: rgba(0, 0, 0, 0.8);
    }

    .vjs-tech {
      position: static !important;
      top: auto !important;
      bottom: auto !important;
      left: auto !important;
      right: auto !important;
    }

    .vjs-modal-dialog.vjs-text-track-settings {
      z-index: 3;
    }

    .vjs-control {
      color: var(--color-accent, #00E47C);
    }

    &.vjs-paused {
      .vjs-tech {
        position: absolute !important;
        z-index: 2;
      }

      .vjs-control-bar {
        margin-top: 0 !important;
      }
    }

    &.vjs-fullscreen {
      .vjs-tech {
        width: 100% !important;
        height: 100vh !important;
        object-fit: contain;
      }
    }
  }

  &.gds-video--vertical {
    .video-js .vjs-tech {
      position: static !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
    }
  }
}

.ui-dialog:has(.gds-video[data-id="video-vimeo"]) {
  width: min(800px, 90vw) !important;
  left: max(5vw, calc(50vw - 400px)) !important;

  .gds-modal__body-wrapper,
  .gds-modal__body {
    width: 100% !important;
  }

  .gds-btn-wrapper .gds-video__button--is-play.gds-btn {
    width: 4rem;
  }
}