.flash {
  position: sticky;
  top: var(--space--small);
  z-index: var(--z-index--ceiling);
  width: 100%;
  margin: 0 auto var(--space--base);
}

.flash-message {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space--base) var(--space--base);
  border-radius: var(--border-radius--base);
  
  background-color: var(--color--ui-info-light);
  
  font-size: var(--font-size--x-small);
  line-height: var(--line-height--tight);
  
  transition: opacity 0.5s var(--transition-timing--base);

  &:not(:last-child) {
    margin-bottom: var(--space--small);
  }

  &::before {
    /* Give the flash message a solid background color */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--color--grayscale--white);
    pointer-events: none;
    z-index: -1;
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.25rem;

    background-color: var(--color--ui-info-dark);
  }

  & .flash-message__icon--info {
    display: block;
    color: var(--color--ui-info-dark);
  }
}

.flash-message--notice {
  background-color: var(--color--ui-success-light);

  &::after {
    background-color: var(--color--ui-success-dark);
  }
  
  & .flash-message__icon--checkmark {
    display: block;
    color: var(--color--ui-success-dark);
  }
}

.flash-message--alert {
  background-color: var(--color--ui-danger-light);

  &::after {
    background-color: var(--color--ui-danger-dark);
  }

  & .flash-message__icon--alert {
    display: block;
    color: var(--color--status--negative-dark);
  }
}

.flash-message--inline {
  padding: var(--space--x-small) var(--space--x-small);
}

.flash-message__icon {
  width: 1rem;
  margin-right: var(--space--x-small);

  display: none;
}

.flash-message__content {
  flex: 1;
  margin-right: var(--space--base);
}

.flash-message__close {
  position: relative;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-duration--base) var(--transition-timing--base);

  /* Increase touch target size of the button */
  &::after {
    content: '';
    position: absolute;
    top: -1rem;
    left: -1rem;
    bottom: -1rem;
    right: -1rem;
  }

  & > * {
    z-index: var(--z-index--base);
  }
}

.flash-message__close:hover {
  opacity: 0.65;
}