:root {
  --flash-anim-speed: 0.5s;
  --flash-icon-size: 1.6rem;
  --flash-icon-padding: 6px;
  --flash-icon-width: calc(var(--flash-icon-size) + (2 * var(--flash-icon-padding)));
  --flash-message-padding: 8px;
  --flash-message-margin: 10px; /* This must be in pixels (.js) */
  --white-70: rgba(255, 255, 255, 0.70);
  --info-color: var(--white-70);
  --info-background: var(--blue);
  --warning-color: var(--white-70);
  --warning-background: var(--orange);
  --error-color: var(--white-70);
  --error-background: var(--red);
  --success-color: var(--white-70);
  --success-background: var(--green);
}

@keyframes flash-fade-in-anim {
  0%   {opacity: 0; visibility: hidden;}
  100% {opacity: 1; visibility: visible;}
}

.flash--visible {
  animation: var(--flash-anim-speed) flash-fade-in-anim;
  animation-fill-mode: forwards;
  visibility: visible;
  transform: translateY(120);
}

@keyframes flash-fade-out-anim {
  0%   {opacity: 1; visibility: visible;}
  100% {opacity: 0; visibility: hidden;}
}

.flash--invisible {
  animation: var(--flash-anim-speed) flash-fade-out-anim;
  animation-fill-mode: forwards;
  visibility: hidden;
  box-shadow: none;
}

.flash__container {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0);
  height: auto;
  z-index: 998;
  overflow: scroll;
  transform: translateY(var(--y));
  width: var(--flash-container-width);
  min-width: var(--flash-container-min-width);
  margin: 0;
}

.flash__container--margin-top {
  margin-top: 0;
}

.flash__container--margin-bottom {
  margin-bottom: 0;
}

.flash__container--full {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 1.25%,
    black 98.75%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 1.25%,
    black 98.75%,
    transparent 100%
  );
}

.flash__item {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  right: 0;
  color: var(--color-details-2);
  background-color: var(--color-details-3);
  height: auto;
  z-index: 999;
  word-wrap: break-word;
  overflow: hidden;
  visibility: hidden;
  transition: transform var(--flash-anim-speed) ease;
  transform: translateY(var(--y));
  min-height: var(--flash-icon-size);
  margin: var(--flash-message-margin);
  margin-top: 0;
  width: calc(var(--flash-container-width) - (2 * var(--flash-message-margin)));
  min-width: calc(var(--flash-container-min-width) - (2 * var(--flash-message-margin)));
  padding: var(--flash-message-padding);
  padding-left: calc(var(--flash-icon-width) + var(--flash-message-padding));
  box-shadow: 0px 0px var(--flash-message-margin) 0px var(--shadow-55);
  user-select: none;
}

.flash__item * {
  margin: 0;
  padding: 0;
}

.flash__exit {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
  padding: 4px 3px 0 0;
}

.flash__exit:hover,
.flash__exit:focus {
  outline: none;
  color: var(--color-details-1);
  cursor: pointer;
}

.flash__icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: var(--flash-icon-size);
  width: var(--flash-icon-width);
}

.flash__info {
  color: var(--info-color);
  background-color: var(--info-background);
}

.flash__warning {
  color: var(--warning-color);
  background-color: var(--warning-background);
}

.flash__error {
  color: var(--error-color);
  background-color: var(--error-background);
}

.flash__success {
  color: var(--success-color);
  background-color: var(--success-background);
}

@media only screen and (min-width : 0px) and (max-width: 768px) {
  :root {
    --flash-container-min-width: 100vw;
    --flash-container-width: 100vw;
  }
}

@media only screen and (min-width : 768px) {
  :root {
    --flash-container-min-width: 320px;
    --flash-container-width: 20vw;
  }
}