/* stylelint-disable selector-pseudo-class-no-unknown */
.playIconContainer {
  background: var(--sem-color-bg-primary-dark-default);
  position: relative;
  z-index: 1;
  transition: 0.4s ease background-color;
  border-radius: var(--sem-border-radius-s);
}

.playIconContainer--s {
  width: 44px;
  height: 44px;
  position: absolute;
  right: var(--sem-space-gap-110);
  top: var(--sem-space-gap-110);
}

.playIconContainer--l {
  height: 64px;
  width: 64px;
}

.playIcon {
  color: var(--sem-color-fg-secondary-light-default);
  height: 100%;
  width: 100%;
  transition: 0.4s ease color;
}

:global(.react-player__preview):hover .playIconContainer {
  background: var(--sem-color-bg-primary-light-subtle);
}

:global(.react-player__preview):focus .playIconContainer {
  background: var(--sem-color-bg-primary-light-default);
}

:global(.react-player__preview):focus .playIcon,
:global(.react-player__preview):hover .playIcon {
  color: var(--sem-color-fg-primary-dark-default);
}