/* Banner alert */

.Banner {
  position: relative;
  display: grid;
  padding: var(--base-size-8, 8px);
  color: var(--color-fg-default);
  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
  border: var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);
  border-radius: var(--yattho-borderRadius-medium, 6px);
  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, 8px) 0 0 var(--base-size-8, 8px);
    }
  }

  /* Elements */

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

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

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

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

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

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

  & .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;
    margin-left: var(--yattho-controlStack-medium-gap-condensed, 8px);
  }

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

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

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

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

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

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

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

  /* Full-width */

  &.Banner--full {
    margin-top: calc(var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) * -1);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  @media (max-width: 767.98px) {
    &.Banner--full-whenNarrow {
      margin-top: calc(var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) * -1);
      border-right: 0;
      border-left: 0;
      border-radius: 0;
    }
  }
}