/* Banner alert */

.Banner {
  position: relative;
  display: grid;
  padding: var(--base-size-8);
  color: var(--fgColor-default);
  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
  border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);
  border-radius: var(--borderRadius-medium);
  grid-auto-flow: column;
  grid-template-areas: 'visual message actions close';
  grid-template-columns: min-content 1fr minmax(0, auto) min-content;
  grid-template-rows: min-content;

  /* `sm` breakpoint variantion */
  @media (max-width: 543.98px) {
    grid-template-areas:
      'visual message close'
      '. actions actions';
    grid-template-columns: min-content 1fr min-content;
    grid-template-rows: min-content min-content;

    & .Banner-actions {
      margin: var(--base-size-8) 0 0 var(--base-size-8);
    }
  }

  /* Elements */

  & .Banner-visual {
    display: grid;
    padding: var(--base-size-6) var(--base-size-8);
    grid-area: visual;
    align-self: start;

    & > .octicon {
      margin-block: calc(var(--base-size-4) / 2);
    }

    & > * {
      align-self: center;
    }
  }

  & .Banner-message {
    padding: var(--base-size-6) var(--base-size-8);
    grid-area: message;
    align-self: center;

    /* stylelint-disable-next-line selector-max-type */
    & p:last-child {
      margin-bottom: 0;
    }

    & .Banner-title:not(:only-child) {
      margin-bottom: 0;
      font-weight: var(--base-text-weight-semibold);
    }
  }

  & .Banner-actions {
    grid-area: actions;

    &:last-child {
      align-self: center;
    }
  }

  /* is this used anywhere? could not find any use, but unsure */
  & .Banner-close {
    grid-area: close;
    /* stylelint-disable-next-line primer/spacing */
    margin-left: var(--controlStack-medium-gap-condensed);
  }

  & .Banner-visual .octicon {
    color: var(--fgColor-accent);
  }

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

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

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

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

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

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

  /* Full-width */

  &.Banner--full {
    /* stylelint-disable-next-line primer/spacing */
    margin-top: calc(var(--borderWidth-thin) * -1);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  @media (max-width: 767.98px) {
    &.Banner--full-whenNarrow {
      /* stylelint-disable-next-line primer/spacing */
      margin-top: calc(var(--borderWidth-thin) * -1);
      border-right: 0;
      border-left: 0;
      border-radius: 0;
    }
  }
}