.flash-alert {
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
  border-radius: var(--border-radius);

  color: var(--fg-color);
  background-color: var(--bg-color);
  border-color: var(--fg-color);

	a {
		font-weight: var(--font-weight-bold);
	}
  &{
	  margin-top: var(--layout-gutter);
	  margin-bottom: var(--layout-gutter);
	  padding: var(--layout-gutter);
  }
	> .close {
		cursor: pointer;
		padding: var(--layout-gutter);
		padding-right: calc(var(--layout-gutter) * 1.5);
		margin-top: calc(var(--layout-gutter) * -1);
		margin-bottom: calc(var(--layout-gutter) * -1);
		margin-right: calc(var(--layout-gutter) * -1);
		float: right;

		&,
		&:active,
		&:not(:disabled):not(.disabled):active,
		&:focus,
		&:hover {
			background: transparent;
			border: 0;
			color: inherit;
		}
	}

  &.-success {
    --bg-color: var(--color-success-light);
    --fg-color: var(--color-success-dark);
  }

  &.-danger {
    --bg-color: var(--color-danger-light);
    --fg-color: var(--color-danger-dark);
  }
}