/* The flash: what the last request did, at the top of the page it came back
   to. It sits in the flow, so it covers nothing, and nothing takes it away on
   a timer — an error that leaves by itself can leave before it is read.

   The editor's refused move is the same kind of message said in place, so it
   shares the box. Its margin stays its own, in start_page_keyboard.css. */
:is(.flash, .start-page-notice-error) {
  padding: 0.75em 1em;
  border: 0.0625rem solid var(--notice-color);
  border-radius: var(--control-radius);
  background-color: oklch(from var(--notice-color) l c h / 0.1);
  font-size: 0.875em;
}

.flash {
  --notice-color: var(--highlight-color);

  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-sizing: border-box;
  /* The width of the Settings column, in rem because the box's own font is
     smaller than the column's. */
  max-width: 48rem;
  margin: 1.5rem auto 0;
  /* The close button brings its own room, so the box only adds a little
     around it. */
  padding-block: 0.375rem;
  padding-inline-end: 0.375rem;

  p {
    flex: 1;
    margin: 0;
  }

  /* The tick on a notice. */
  & > svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--highlight-color);
  }
}

:is(.flash.alert, .start-page-notice-error) {
  --notice-color: var(--danger-color);
  color: var(--danger-color);
}

.flash-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--control-size);
  height: var(--control-size);
  padding: 0;
  border: none;
  border-radius: var(--control-radius);
  background: none;
  color: inherit;
  cursor: pointer;

  svg {
    width: 0.625rem;
    height: 0.625rem;
    fill: currentColor;
  }

  &:hover {
    background-color: oklch(from var(--notice-color) l c h / 0.15);
  }

  &:focus-visible {
    outline: 0.125rem solid var(--notice-color);
    outline-offset: 0.125rem;
  }
}