/**
 * dads-components.css
 * デジタル庁デザインシステム（DADS）のコンポーネントCSS。
 *
 * 出典: デジタル庁デザインシステムウェブサイト https://design.digital.go.jp/dads/
 *       およびデジタル庁GitHub https://github.com/digital-go-jp
 *       （design-system-example-components-html / MIT License）
 *
 * 取り込んでいるコンポーネント: accordion
 * 色・フォントはcss/dads-tokens.cssのトークンを参照する。
 *
 * MIT License
 *
 * Copyright (c) 2025 デジタル庁
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

.dads-accordion {
  --_icon-size: calc(20 / 16 * 1rem);
  border-bottom: 1px solid var(--color-neutral-solid-gray-420);
}

@media (min-width: 48rem) {
  .dads-accordion {
    --_icon-size: calc(32 / 16 * 1rem);
  }
}

.dads-accordion__summary {
  position: relative;
  display: block;
  padding: calc(8 / 16 * 1rem) calc(8 / 16 * 1rem) calc(8 / 16 * 1rem)
    calc(var(--_icon-size) + 0.75rem);
  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;
  cursor: default;
}

.dads-accordion__summary::marker {
  content: "";
}

.dads-accordion__summary::-webkit-details-marker {
  display: none;
}

@media (min-width: 48rem) {
  .dads-accordion__summary {
    padding: calc(16 / 16 * 1rem) calc(16 / 16 * 1rem) calc(16 / 16 * 1rem)
      calc(var(--_icon-size) + calc(20 / 16 * 1rem));
    font-size: calc(18 / 16 * 1rem);
    line-height: 1.6;
  }
}

@media (hover: hover) {
  .dads-accordion__summary:hover:not(:focus-visible) {
    background-color: var(--color-neutral-solid-gray-50);
  }
}

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

.dads-accordion__icon {
  position: absolute;
  top: calc(8 / 16 * 1rem);
  left: calc(2 / 16 * 1rem);
  margin-top: calc((1lh - var(--_icon-size)) / 2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--_icon-size);
  height: var(--_icon-size);
  border-radius: 50%;
  border: 1px solid currentcolor;
  background-color: var(--color-neutral-white);
  color: var(--color-key-1000);
}

@media (min-width: 48rem) {
  .dads-accordion__icon {
    top: calc(14 / 16 * 1rem);
    left: calc(6 / 16 * 1rem);
  }
}

.dads-accordion[open] .dads-accordion__icon {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .dads-accordion__summary:hover .dads-accordion__icon {
    outline: calc(2 / 16 * 1rem) solid currentcolor;
  }
}

.dads-accordion__icon-svg {
  margin-top: calc(2 / 16 * 1rem);
  width: calc(16 / 16 * 1rem);
  height: calc(16 / 16 * 1rem);
  pointer-events: none;
}

@media (min-width: 48rem) {
  .dads-accordion__icon-svg {
    width: auto;
    height: auto;
  }
}

.dads-accordion__summary :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font: inherit;
}

.dads-accordion__content {
  padding: calc(16 / 16 * 1rem) calc(8 / 16 * 1rem) calc(16 / 16 * 1rem)
    calc(var(--_icon-size) + 0.75rem);
}

@media (min-width: 48rem) {
  .dads-accordion__content {
    padding: calc(24 / 16 * 1rem) calc(16 / 16 * 1rem) calc(24 / 16 * 1rem)
      calc(var(--_icon-size) + 1.25rem);
  }
}

.dads-accordion__back-link:any-link {
  display: flex;
  align-items: flex-start;
  gap: calc(6 / 16 * 1rem);
  width: fit-content;
  color: var(--color-primitive-blue-1000);
  text-decoration: underline;
  text-decoration-thickness: calc(1 / 16 * 1rem);
  text-underline-offset: calc(3 / 16 * 1rem);
  text-spacing-trim: trim-start;
}

@media (hover: hover) {
  .dads-accordion__back-link:hover {
    color: var(--color-primitive-blue-900);
    text-decoration-thickness: calc(3 / 16 * 1rem);
  }
}

.dads-accordion__back-link:active {
  color: var(--color-primitive-orange-800);
  text-decoration-thickness: calc(1 / 16 * 1rem);
}

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

.dads-accordion__back-link-icon {
  margin-top: calc((1lh - 24 / 16 * 1rem) / 2);
  flex-shrink: 0;
}