@import '../prefix';

.#{$prefix}--play-pause-button {
  border: none;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  cursor: pointer;
  z-index: 13;
  pointer-events: bounding-box;
  fill: $carbon--white-0;
  background: transparent;
  display: flex;
  align-content: center;
  justify-content: center;
  opacity: 0;
  transition: $transition--base opacity;

  &:focus {
    outline: 2px solid $focus;
  }

  @include carbon--breakpoint('md') {
    display: block;
  }

  &.#{$prefix}--play-pause-hovering {
    opacity: 1;
  }

  &.#{$prefix}--play-pause-hide-on-mobile {
    display: none;
    opacity: 0;

    @include carbon--breakpoint('md') {
      display: block;
    }
  }

  &.#{$prefix}--play-pause-corner {
    left: 1rem;
    bottom: 1rem;
    top: auto;
    width: 1.25rem;
    height: 1.25rem;
    transform: translate(0);
    opacity: 1;
    display: none;

    @include carbon--breakpoint('md') {
      display: block;
    }
    @include carbon--breakpoint('lg') {
      left: 15rem;
    }
  }
}

.#{$prefix}--play-pause-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: $carbon--blue-60;
  transition: $transition--base background-color;

  .#{$prefix}--play-pause-button:hover & {
    background-color: rgba($carbon--gray-90, 0.75);
  }
}

.#{$prefix}--play-pause-icon {
  position: relative;
  z-index: 20;
  display: none;

  &.active {
    display: block;
  }
}