/* flash */

/* Default flash */
.flash:not(.Banner) {
  position: relative;
  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);
  border-style: solid;
  border-width: var(--borderWidth-thin);
  border-radius: var(--borderRadius-medium);

  /* Default color */
  color: var(--fgColor-default);
  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
  border-color: var(--borderColor-accent-muted);

  & .octicon {
    color: var(--fgColor-accent);
    margin-right: var(--base-size-12);
  }

  & p:last-child {
    margin-bottom: 0;
  }
}

/* Contain the flash messages */
.flash-messages {
  margin-bottom: var(--stack-gap-spacious);
}

/* Close button */
.flash-close:not(.Banner-close) {
  float: right;
  margin-top: calc(var(--base-size-4) * -1);
  text-align: center;
  cursor: pointer;

  /* Undo `<button>` styles */
  background: none;
  border: 0;
  appearance: none;

  &:hover {
    opacity: 0.7;
  }

  &:active {
    opacity: 0.5;
  }

  & .octicon {
    margin-right: 0;
  }
}

/* Action button */
.flash-action:not(.Banner-actions) {
  float: right;
  margin-top: -3px;
  margin-left: var(--stack-gap-spacious);
  background-clip: padding-box;

  &.btn .octicon {
    margin-right: var(--control-small-gap);
    color: var(--fgColor-muted);
  }

  &.btn-primary {
    background-clip: border-box;

    & .octicon {
      color: inherit;
    }
  }
}

/* Color variations */

.flash-warn:not(.Banner) {
  color: var(--fgColor-default);
  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
  border-color: var(--borderColor-attention-muted);

  & .octicon {
    color: var(--fgColor-attention);
  }
}

.flash-error:not(.Banner) {
  color: var(--fgColor-default);
  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
  border-color: var(--borderColor-danger-muted);

  & .octicon {
    color: var(--fgColor-danger);
  }
}

.flash-success:not(.Banner) {
  color: var(--fgColor-default);
  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
  border-color: var(--borderColor-success-muted);

  & .octicon {
    color: var(--fgColor-success);
  }
}

/* Layout variations */

.flash-full:not(.Banner) {
  margin-top: calc(var(--borderWidth-thin) * -1);
  border-width: var(--borderWidth-thin) 0;
  border-radius: 0;
}

/* A banner rendered at the top of the page. */
.flash-banner {
  position: fixed;
  top: 0;
  z-index: 90;
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

/* Makes sure the background is opaque to cover any content underneath */
.flash-full,
.flash-banner {
  background-color: var(--bgColor-default);
}

/* FIXME deprecate this */
.warning {
  padding: 0.5em;
  margin-bottom: 0.8em;
  font-weight: var(--base-text-weight-semibold);
  background-color: var(--bgColor-attention-muted);
}