/* 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) {

.Banner {
    grid-template-areas:
      'visual message close'
      '. actions actions';
    grid-template-columns: min-content 1fr min-content;
    grid-template-rows: min-content min-content;
}

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

/* Elements */

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

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

.Banner .Banner-visual > * {
      align-self: center;
    }

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

.Banner .Banner-message p:last-child {
      margin-bottom: 0;
    }

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

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

.Banner .Banner-actions:last-child {
      align-self: center;
    }

/* is this used anywhere? could not find any use, but unsure */

.Banner .Banner-close {
    grid-area: close;
    margin-left: var(--yattho-controlStack-medium-gap-condensed, 8px);
  }

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

.Banner.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.Banner--warning .Banner-visual .octicon {
      color: var(--color-attention-fg);
    }

.Banner.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.Banner--error .Banner-visual .octicon {
      color: var(--color-danger-fg);
    }

.Banner.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.Banner--success .Banner-visual .octicon {
      color: var(--color-success-fg);
    }

/* Full-width */

.Banner.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.Banner--full-whenNarrow {
      margin-top: calc(var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) * -1);
      border-right: 0;
      border-left: 0;
      border-radius: 0;
    }
  }