@use '../common-styles' as common;

$button-size: 40px;
$dood-button-size: 60px;

$mp4upload-player-buttons-background-colour: #00b3ff;

.submit,
.vote {
  &-menu-button {
    &--videojs {
      width: $button-size;
      height: $button-size;
    }

    &--mp4upload {
      &:hover {
        background-color: $mp4upload-player-buttons-background-colour;
      }

      &.active {
        background-color: $mp4upload-player-buttons-background-colour;
      }
    }

    &--mixdrop {
      margin-right: -5px;
    }

    &--dood {
      width: $dood-button-size;
      height: $dood-button-size;
    }
  }
}

.skip {
  &-indicators {
    &--mp4upload {
      top: 50%;
      margin-top: -4px;
      height: 8px;
    }

    &--aniboom {
      bottom: 0;
      z-index: 0 !important;
    }
  }

  &-button {
    &--mixdrop {
      bottom: 5em;
    }

    &--dood {
      right: 3.9em;
      bottom: 8em;
      cursor: pointer;
    }

    &--aniboom {
      bottom: 5.5em;

      &.fullscreen {
        @media (min-width: common.$xl) {
          right: 4.5em;
          bottom: 8.5em;
        }
      }
    }
  }
}

.menus {
  &--mixdrop {
    bottom: 5em;

    @media (min-width: common.$md) {
      bottom: 9em;
    }

    &.mobile {
      bottom: 5em;
    }
  }

  &--dood {
    right: 2.5em;
    bottom: 8em;

    @media (min-width: common.$md) {
      bottom: 12em;
    }

    &.mobile {
      bottom: 8em;
    }
  }

  &--aniboom {
    bottom: 6em;

    @media (min-width: common.$md) {
      bottom: 10em;
    }

    &.fullscreen {
      @media (min-width: common.$xl) {
        right: 3em;
        bottom: 13em;
      }
    }

    &.mobile {
      bottom: 6em;
    }
  }
}
