.flash {
  padding: var(--space--x-small) var(--space--page-margin-inline);

  background-color: var(--color--status--info-dark);
  color: var(--color--grayscale--white);
  box-shadow: inset 0 -1px 0 0 rgb(from var(--color--grayscale--white) r g b / 0.2);

  font-size: var(--font-size--x-small);
  line-height: var(--line-height--tight);

  transition: opacity 0.5s var(--transition-timing--base);

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

.flash--notice {
  background-color: var(--color--status--positive-dark);

  & .flash__icon--checkmark {
    display: block;
  }
}

.flash--alert {
  background-color: var(--color--status--negative-dark);

  & .flash__icon--alert {
    display: block;
  }
}

/* Inline flash styles including color tints for different statuses */

.flash--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--x-small);
  position: relative;
  overflow: hidden;

  padding: var(--space--small) var(--space--small);
  border-radius: var(--border-radius--base);

  background-color: var(--color--ui-info-light);
  color: var(--color--text);
  border: none;

  &::before {
    /*
      Solid background color behind inline flash so so that the tinted background 
      colors which have opacity don't blend with the content behind.
    */
    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--inline.flash--notice {
  background-color: var(--color--ui-success-light);

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

  & .flash__icon--checkmark {
    color: var(--color--ui-success-dark);
  }
}

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

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

  & .flash__icon--alert {
    color: var(--color--status--negative-dark);
  }
}

.flash--large {
  padding: var(--space--medium);
}

.flash__icon {
  display: none;
  width: 1rem;
}

.flash__content {
  flex: 1;
}

.flash__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);

  &::after {
    content: '';
    position: absolute;
    top: -1rem;
    left: -1rem;
    bottom: -1rem;
    right: -1rem;
  }

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

  &:hover {
    opacity: 0.65;
  }
}