Callout.css

@import '../variables.css';

.callout {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-flow: column-reverse wrap;
  width: 100%;
  height: 100%;
  pointer-events: none;
  padding: 1.5rem 1rem;
}

.calloutContainer {
  display: block;
  overflow: auto;
}

.calloutRow {
  width: 100%;
  display: block;
  overflow: hidden;
  max-width: 100%;
}

.calloutBase {
  width: 45vw;
  position: relative;
  pointer-events: all;
  background-color: #fff;
  padding: var(--gutter-static);
  opacity: 0;
  transition: left 0.4s, right 0.4s, opacity 0.4s;
  border: 1px solid transparent;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius);
  margin-bottom: 4px;

  & .message {
    flex-grow: 2;
    padding: 0 6px;
    font-size: var(--font-size-medium);
  }

  &.error {
    border-color: var(--error);
    background-color: color(var(--error, #600) tint(75%));
  }

  &.success {
    border-color: var(--success);
    background-color: color(var(--success, #060) tint(75%));
  }

  &.warning {
    border-color: var(--warn);
    background-color: color(var(--warn, #940) tint(75%));
  }

  &.info {
    border-color: #4c8eca;
  }

  &.slide-entering {
    left: 100%;
    opacity: 0;
  }

  &.slide-entered {
    left: 50%;
    opacity: 1;
  }

  &.slide-exiting {
    left: 100%;
    opacity: 0;
  }

  &.slide-exited {
    left: 50%;
    opacity: 0;
  }
}

[dir="rtl"] {
  & .calloutBase {
    &.slide-entering {
      left: 0;
      right: 100%;
      opacity: 0;
    }

    &.slide-entered {
      left: 0;
      right: 50%;
      opacity: 1;
    }

    &.slide-exiting {
      left: 0;
      right: 100%;
      opacity: 0;
    }

    &.slide-exited {
      left: 0;
      right: 50%;
      opacity: 0;
    }
  }
}