.media-overlay {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  border: none;
  border-radius: var(--wds-image-border-radius-default, var(--wds-border-radius-400, 8px));
  padding: 0;
  background: none;
  min-width: 84px;
  min-height: 84px;

  &--clickable {
    cursor: pointer;
  }

  &#{&}--remove-radius {
    border-radius: 0;
  }

  &:focus-visible {
    box-shadow: var(--wds-shadow-focus-standard, 0 0 0 3px #a6d0ff);
  }

  & &__media {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
  }

  & &__overlay {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--wds-space-200, 12px);
    transition: opacity 200ms ease-in-out;
  }

  & &__overlay--layer-hover {
    opacity: 0;
  }

  & &__overlay--layer-hover#{&}__overlay--mobile {
    opacity: 1;
  }

  & &__overlay--layer-default#{&}__overlay--mobile {
    opacity: 0;
  }

  & &__overlay--layer-top,
  & &__overlay--layer-top &__content-row,
  & &__overlay--layer-top &__content-area {
    pointer-events: none;
  }

  & &__overlay--layer-top &__content-area > * {
    pointer-events: auto;
  }

  & &__overlay--skin-dark {
    /* stylelint-disable-next-line plugin/use-baseline */
    background-color: var(--wds-color-fill-transparent-primary, color-mix(in srgb, #000624 66%, transparent));
  }

  & &__overlay--skin-gradient {
    /* Left un-tokenized, because tokenization introduced too large breaking changes. */
    /* stylelint-disable-next-line plugin/use-baseline */
    background: linear-gradient(to bottom, var(--wds-color-black-100-transparent-0, rgba(22, 45, 61, 0)) 50%, color-mix(in srgb, var(--wds-color-black-100, #000624) 54%, transparent));
  }

  & &__content-row {
    display: flex;
    width: 100%;
  }

  & &__content-row--row-top,
  & &__content-row--row-bottom {
    flex: 0 1 50%;
  }

  & &__content-row--row-top {
    align-items: flex-start;
  }

  & &__content-row--row-bottom {
    align-items: flex-end;
  }

  & &__content-row--placement-top-start {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 1;
  }

  & &__content-row--placement-top-end {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 1;
  }

  & &__content-row--placement-middle {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 2;
  }

  & &__content-row--placement-bottom-start {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 3;
  }

  & &__content-row--placement-bottom-end {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 3;
  }

  & &__overlay--layer-hover#{&}__overlay--bottom-strip {
    grid-template-rows: 1fr auto auto;
  }

  & &__overlay--layer-hover#{&}__overlay--bottom-strip &__content-row--placement-bottom-start,
  & &__overlay--layer-hover#{&}__overlay--bottom-strip &__content-row--placement-bottom-end {
    grid-row: 2;
  }

  & &__overlay--layer-hover#{&}__overlay--bottom-strip &__content-row--placement-middle {
    grid-row: 3;
    padding-top: var(--wds-space-200, 2px);
    align-items: flex-end;
  }

  & &__content-area {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  & &__content-area--placement-middle {
    width: 100%;
    justify-content: center;
  }

  & &__content-area--placement-top-end,
  & &__content-area--placement-bottom-end {
    margin-left: auto;
  }

  :global([dir='rtl']) & &__content-area--placement-top-end,
  :global([dir='rtl']) & &__content-area--placement-bottom-end {
    margin-left: 0;
    margin-right: auto;
  }

  & &__content-area:not(:last-child),
  & &__content-area > :not(:last-child) {
    margin-right: var(--wds-space-100, 6px);
  }

  :global([dir='rtl']) & &__content-area > :last-child {
    margin-right: var(--wds-space-100, 6px);
  }

  :global([dir='rtl']) & &__content-area > :first-child {
    margin-right: 0;
  }

  /* Hover transitions */

  & &__overlay--layer-hover#{&}__hover-enter {
    opacity: 0;
  }

  & &__overlay--layer-hover#{&}__hover-enter-active,
  & &__overlay--layer-hover#{&}__hover-enter-done {
    opacity: 1;
  }

  & &__overlay--layer-hover#{&}__hover-exit {
    opacity: 0;
  }

  & &__overlay--layer-default#{&}__hover-enter,
  & &__overlay--layer-default#{&}__hover-enter-done {
    opacity: 0;
  }

  & &__overlay--layer-default#{&}__hover-exit {
    opacity: 1;
  }

  & &__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }

  & &__play-button-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  & &__play-button-wrapper {
    pointer-events: auto;
  }
}