/**
 * DADS Notification Banner
 * https://design.digital.go.jp/dads/html/?path=/docs/components-ノティフィケーションバナー--docs
 */

.dads-notification-banner {
  --_base-color: var(--color-primitive-blue-900, #0017c1);
  --_color-chip-color: var(--color-primitive-blue-900, #0017c1);
  display: grid;
  grid-template-columns: calc(24 / 16 * 1rem) 1fr auto;
  grid-template-rows: minmax(calc(36 / 16 * 1rem), auto);
  border: solid var(--_base-color);
  background-color: var(--color-neutral-white, #fff);
  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, #333);
  font-weight: normal;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  font-family: var(--font-family-sans, "Noto Sans JP", sans-serif);
  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;
    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(--cl-brand, var(--color-semantic-success-2, #197a4b));
  --_color-chip-color: var(--cl-brand, var(--color-semantic-success-2, #197a4b));
}

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

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

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

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

.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 {
  grid-column: span 2;
  margin-top: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: inherit;
  gap: inherit;
  font: inherit;
}

.dads-notification-banner__heading-text {
  padding-top: calc(3 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900, #1a1a1a);
  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-text {
    padding-top: calc(2 / 16 * 1rem);
    font-size: calc(20 / 16 * 1rem);
    line-height: 1.5;
  }
}

.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, #333);
}

@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__body a {
  font-weight: 700;
  color: var(--color-neutral-solid-gray-900, #1a1a1a);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (hover: hover) {
  .dads-notification-banner__body a:hover {
    color: var(--cl-brand, #2f8f5b);
  }
}

.dads-notification-banner__body a:focus-visible {
  outline: 0.25rem solid var(--color-neutral-black, #000);
  outline-offset: 0.125rem;
  border-radius: 0.25rem;
}

/* 閉じるボタンなしの静的バナー */
.dads-notification-banner--static {
  grid-template-columns: calc(24 / 16 * 1rem) minmax(0, 1fr);
  padding-bottom: calc(16 / 16 * 1rem);
}

@media (min-width: 48rem) {
  .dads-notification-banner--static {
    grid-template-columns: calc(36 / 16 * 1rem) minmax(0, 1fr);
    padding-bottom: calc(24 / 16 * 1rem);
  }
}

.dads-notification-banner--static .dads-notification-banner__heading {
  grid-column: 1 / -1;
}

.dads-notification-banner--static .dads-notification-banner__body {
  grid-column: 2 / -1;
}

/* 本文のみ（左カラーチップ）— FAQ案内向け */
.dads-notification-banner--body-only {
  display: block;
  padding-top: calc(12 / 16 * 1rem);
  padding-bottom: calc(12 / 16 * 1rem);
  padding-right: calc(16 / 16 * 1rem);
  background-color: var(--cl-brand-soft, #eaf6ef);
}

@media (min-width: 48rem) {
  .dads-notification-banner--body-only {
    padding-top: calc(16 / 16 * 1rem);
    padding-bottom: calc(16 / 16 * 1rem);
    padding-right: calc(24 / 16 * 1rem);
  }
}

.dads-notification-banner--body-only .dads-notification-banner__body {
  margin-top: 0;
  grid-column: auto;
  display: block;
}

.cl-faq .dads-notification-banner {
  margin: 0 0 1.75rem;
  max-width: 42rem;
}