@charset "UTF-8";

:root {
  --CornerMessage-cross-view: 0.7em;
  --CornerMessage-cross-hit: 2em;
  --CornerMessage-text-padding: 1em;
  --CornerMessage-text-height: 1.4em;
  --CornerMessage-text-line: 3;
  --CornerMessage-mesbox-margin: 1em;
}


#CornerMessage-mesbox {
  margin: 0;
  position: fixed;
  right: var(--CornerMessage-mesbox-margin);
  /* (message text line) + (message padding) + (additional) -> hide to bottom */
  bottom: calc(-1 * (var(--CornerMessage-text-height) * var(--CornerMessage-text-line) + var(--CornerMessage-text-padding) * 2 + 1em));
  transition: bottom 0.2s ease-in-out;

  box-sizing: border-box;
  max-width: calc(100% - var(--CornerMessage-mesbox-margin) * 2);
  border-radius: 1em;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

  padding: var(--CornerMessage-text-padding);
  padding-right: calc(var(--CornerMessage-cross-hit) + var(--CornerMessage-text-padding) * 2);
  line-height: var(--CornerMessage-text-height);
  word-break: break-all;
}
.CornerMessage-mesbox-view {
  bottom: var(--CornerMessage-mesbox-margin) !important; /* For overwrite #CornerMessage-mesbox */
}


.CornerMessage-style-info {
  background-color: hsl(240, 50%, 90%);
}
.CornerMessage-style-warn {
  background-color: hsl(60, 50%, 90%);
}
.CornerMessage-style-danger {
  background-color: hsl(0, 50%, 90%);
}


#CornerMessage-cross {
  position: absolute;
  top: calc(var(--CornerMessage-text-padding) + (var(--CornerMessage-text-height) - var(--CornerMessage-cross-hit)) / 2);
  right: var(--CornerMessage-text-padding);
  width: var(--CornerMessage-cross-hit);
  height: var(--CornerMessage-cross-hit);

  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
#CornerMessage-cross:hover {
  opacity: 0.2;
}
#CornerMessage-cross::before, #CornerMessage-cross::after {
  position: absolute;
  top: calc(var(--CornerMessage-cross-hit) / 2 - 1px);
  /* (move left edge) + (move to center) */
  left: calc((-1 * var(--CornerMessage-cross-view) * 1.4 / 2) + (var(--CornerMessage-cross-hit) / 2));

  display: block;
  width: calc(var(--CornerMessage-cross-view) * 1.4);   /* 1.4 as sqrt(2) */
  border-bottom: 2px solid #000;

  content: "";
}
#CornerMessage-cross::before {
  transform: rotate(45deg);
}
#CornerMessage-cross::after {
  transform: rotate(-45deg);
}