/* MESSAGE SPOILER */
%messageContent %spoilerText {
  background: hsla(0, 0%, 100%, 0.04);
  transition: all 0.15s ease-in-out;
  >%spoilerInlineContent {
    opacity: 1;
    transition: inherit;
  }
  &%spoilerHidden {
    background: rgba(0, 0, 0, 0.8);
    &:hover {
      background: rgba(0, 0, 0, 0.6);
    }
    >%spoilerInlineContent {
      opacity: 0;
    }
  }
}
%markup %spoilerText {
  padding: 1px 4px;
}
%spoilerContainer {
  >%spoilerWarning {
    background: rgba(0, 0, 0, 0.5);
    color: hsla(0, 0%, 100%, 0.7);
    transition: all 0.15s ease-in-out;
  }
  %spoilerImage,
  %spoilerEmbed>%embedGrid {
    transition: all 0.15s ease-in-out;
  }
  %spoilerImageHidden,
  %spoilerEmbedHidden>%embedGrid {
    filter: blur(40px);
  }
  %spoilerEmbedHidden {
    border-radius: 0;
  }
  &:hover {
    >%spoilerWarning {
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
    }
    %spoilerImageHidden {
      filter: blur(30px);
    }
    %spoilerEmbedHidden {
      >%embedGrid {
        filter: blur(30px);
      }
    }
  }
}