.root {
  position: relative;
  background: var(--gradient-green);

  &::before, &::after {
    content: '';

    position: absolute;
    inset: 0;

    display: block;

    opacity: 0;

    transition: 0.25s ease-in-out opacity, 0.25s ease-in-out transform;
  }

  &::before {
    transform: rotate(45deg);
    background: var(--gradient-blue);
  }

  &::after {
    transform: rotate(-45deg);
    background: var(--gradient-purple);
  }
}

.spinner {
  position: absolute;
  z-index: 2;

  width: 100%;
  height: 100%;

  opacity: 0;

  transition: 0.25s ease-in-out opacity;
}

.spinnerVisible {
  opacity: 1;
}

.mutedByAdmin::before, .canUnmute::before {
  transform: rotate(0deg);
  opacity: 1;
}

.icon {
  z-index: 1;
}
