.dads-notification-banner {
  --_base-color: var(--color-primitive-blue-900);
  --_color-chip-color: var(--color-primitive-blue-900);
  display: grid;
  grid-template-columns: calc(24 / 16 * 1rem) 1fr auto;
  grid-template-rows: min(calc(44 / 16 * 1rem), auto);
  border: solid var(--_base-color);
  background-color: var(--color-neutral-white);
  padding-top: calc(8 / 16 * 1rem);
  padding-right: calc(16 / 16 * 1rem);
  padding-bottom: calc(24 / 16 * 1rem);
  padding-left: calc(16 / 16 * 1rem);
  gap: calc(16 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-800);
  font-weight: normal;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  font-family: var(--font-family-sans);
  letter-spacing: 0.02em;
}

.dads-notification-banner[data-style="standard"] {
  border-radius: calc(12 / 16 * 1rem);
  border-width: calc(3 / 16 * 1rem);
}

.dads-notification-banner[data-style="color-chip"] {
  border-width: calc(2 / 16 * 1rem);
  padding-left: calc(24 / 16 * 1rem);
  box-shadow: inset calc(8 / 16 * 1rem) 0 0 0 var(--_color-chip-color);
}

@media (min-width: 48rem) {
  .dads-notification-banner {
    grid-template-columns: calc(36 / 16 * 1rem) 1fr auto;
    grid-template-rows: min(calc(36 / 16 * 1rem), auto);
    padding-top: calc(24 / 16 * 1rem);
    padding-right: calc(24 / 16 * 1rem);
    padding-bottom: calc(32 / 16 * 1rem);
    padding-left: calc(24 / 16 * 1rem);
    column-gap: calc(24 / 16 * 1rem);
  }

  .dads-notification-banner[data-style="color-chip"] {
    padding-left: calc(40 / 16 * 1rem);
    box-shadow: inset calc(16 / 16 * 1rem) 0 0 0 var(--_color-chip-color);
  }
}

.dads-notification-banner[data-type="success"] {
  --_base-color: var(--color-semantic-success-2);
  --_color-chip-color: var(--color-semantic-success-2);
}

.dads-notification-banner[data-type="error"] {
  --_base-color: var(--color-semantic-error-1);
  --_color-chip-color: var(--color-semantic-error-1);
}

.dads-notification-banner[data-type="warning"] {
  --_base-color: var(--color-semantic-warning-yellow-2);
  --_color-chip-color: var(--color-primitive-yellow-400);
}

.dads-notification-banner[data-type="info-1"] {
  --_base-color: var(--color-primitive-blue-900);
  --_color-chip-color: var(--color-primitive-blue-900);
}

.dads-notification-banner[data-type="info-2"] {
  --_base-color: var(--color-neutral-solid-gray-536);
  --_color-chip-color: var(--color-neutral-solid-gray-536);
}

.dads-notification-banner__icon {
  justify-self: center;
  width: calc(28 / 16 * 1rem);
  height: calc(28 / 16 * 1rem);
  max-width: none;
  max-height: none;
  padding-top: calc(3 / 16 * 1rem);
  color: var(--_base-color);
}

@media (min-width: 48rem) {
  .dads-notification-banner__icon {
    margin-top: calc(-4 / 16 * 1rem);
    margin-bottom: calc(-4 / 16 * 1rem);
    width: calc(44 / 16 * 1rem);
    height: calc(44 / 16 * 1rem);
    padding: 0;
  }
}

@media (forced-colors: active) {
  .dads-notification-banner__icon {
    color: currentcolor;
  }
}

.dads-notification-banner__heading {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: calc(3 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font-weight: bold;
  font-size: calc(17 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

@media (min-width: 48rem) {
  .dads-notification-banner__heading {
    padding-top: calc(2 / 16 * 1rem);
    font-size: calc(20 / 16 * 1rem);
    line-height: 1.5;
  }
}

.dads-notification-banner__close {
  margin-right: calc(-12 / 16 * 1rem);
  display: flex;
  align-self: start;
  align-items: center;
  column-gap: calc(4 / 16 * 1rem);
  background: transparent;
  border-radius: calc(8 / 16 * 1rem);
  border: 0;
  padding-top: calc(4 / 16 * 1rem);
  padding-right: calc(12 / 16 * 1rem);
  padding-bottom: calc(6 / 16 * 1rem);
  padding-left: calc(12 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font: inherit;
  line-height: 1;
  letter-spacing: inherit;
}

@media (hover: hover) {
  .dads-notification-banner__close:hover {
    background-color: var(--color-neutral-solid-gray-50);
    text-decoration: underline;
    text-decoration-thickness: calc(1 / 16 * 1rem);
    text-underline-offset: calc(3 / 16 * 1rem);
  }
}

.dads-notification-banner__close:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  background-color: var(--color-primitive-yellow-300);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-notification-banner__close-icon {
  margin-top: calc(2 / 16 * 1rem);
  width: calc(24 / 16 * 1rem);
  height: calc(24 / 16 * 1rem);
}

.dads-notification-banner__mobile-close {
  margin-top: calc(4 / 16 * 1rem);
  border: 0;
  border-radius: calc(4 / 16 * 1rem);
  background: transparent;
  padding: 0;
  color: var(--color-neutral-black);
  touch-action: manipulation;
}

@media (hover: hover) {
  .dads-notification-banner__mobile-close:hover {
    outline: 1px solid;
    background-color: var(--color-neutral-solid-gray-50);
  }
}

.dads-notification-banner__mobile-close:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  background-color: var(--color-primitive-yellow-300);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-notification-banner__mobile-close-icon {
  display: block;
  width: calc(44 / 16 * 1rem);
  height: calc(44 / 16 * 1rem);
}

.dads-notification-banner__body {
  margin-top: calc(-4 / 16 * 1rem);
  display: grid;
  row-gap: calc(8 / 16 * 1rem);
  grid-column: 1 / 4;
  color: var(--color-neutral-solid-gray-800);
}

@media (min-width: 48rem) {
  .dads-notification-banner__body {
    margin-top: 0;
    grid-column: 2 / 4;
  }
}

.dads-notification-banner__body > * {
  margin-top: 0;
  margin-bottom: 0;
}

.dads-notification-banner__actions {
  margin-bottom: calc(-8 / 16 * 1rem);
  display: grid;
  gap: calc(8 / 16 * 1rem);
  grid-column: 1 / 4;
}

@media (min-width: 48rem) {
  .dads-notification-banner__actions {
    grid-auto-flow: column;
    gap: calc(16 / 16 * 1rem);
    grid-column: 2 / 4;
    justify-content: end;
  }
}

.dads-notification-banner .dads-button {
  width: auto;
}

.dads-notification-banner[data-type="success"] .dads-button {
  --button-color: var(--color-semantic-success-2);
  --button-hover-color: var(--color-primitive-green-1000);
  --button-active-color: var(--color-primitive-green-1200);
  --button-outline-hover-bg-color: var(--color-primitive-green-200);
  --button-outline-active-bg-color: var(--color-primitive-green-300);
}

.dads-notification-banner[data-type="error"] .dads-button {
  --button-color: var(--color-semantic-error-1);
  --button-hover-color: var(--color-primitive-red-1000);
  --button-active-color: var(--color-primitive-red-1200);
  --button-outline-hover-bg-color: var(--color-primitive-red-200);
  --button-outline-active-bg-color: var(--color-primitive-red-300);
}

.dads-notification-banner[data-type="warning"] .dads-button {
  --button-color: var(--color-semantic-warning-yellow-2);
  --button-hover-color: var(--color-primitive-yellow-1000);
  --button-active-color: var(--color-primitive-yellow-1200);
  --button-outline-hover-bg-color: var(--color-primitive-yellow-200);
  --button-outline-active-bg-color: var(--color-primitive-yellow-300);
}

.dads-notification-banner[data-type="info-1"] .dads-button {
  --button-color: var(--color-primitive-blue-900);
  --button-hover-color: var(--color-primitive-blue-1000);
  --button-active-color: var(--color-primitive-blue-1200);
  --button-outline-hover-bg-color: var(--color-primitive-blue-200);
  --button-outline-active-bg-color: var(--color-primitive-blue-300);
}

.dads-notification-banner[data-type="info-2"] .dads-button {
  --button-color: var(--color-neutral-solid-gray-800);
  --button-hover-color: var(--color-neutral-solid-gray-900);
  --button-active-color: var(--color-neutral-black);
  --button-outline-hover-bg-color: var(--color-neutral-solid-gray-200);
  --button-outline-active-bg-color: var(--color-neutral-solid-gray-300);
}
