/* Accordin */
.accordions {
  --_accordin-open-icon: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214.5%22%20stroke%3D%22%239B2064%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M14.5446%2016.3699C14.5045%2016.3699%2014.4708%2016.3396%2014.4666%2016.2997C14.4617%2016.2535%2014.4979%2016.2132%2014.5444%2016.2131L16.8056%2016.2101C16.8458%2016.21%2016.8795%2016.2403%2016.8836%2016.2803C16.8885%2016.3265%2016.8523%2016.3668%2016.8058%2016.3668L14.5446%2016.3699ZM10.8123%2017.5015C10.1443%2017.5024%209.60215%2016.9616%209.60125%2016.2937C9.60034%2015.6258%2010.1411%2015.0836%2010.809%2015.0827L20.547%2015.0695C21.2149%2015.0686%2021.7571%2015.6093%2021.758%2016.2772C21.7589%2016.9452%2021.2182%2017.4874%2020.5502%2017.4883L10.8123%2017.5015Z%22%20fill%3D%22%239B2064%22%2F%3E%3C%2Fsvg%3E");
  --_accordin-closed-icon: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214.5%22%20stroke%3D%22%239B2064%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M15.6834%2022.3686C15.0154%2022.3695%2014.4732%2021.8287%2014.4723%2021.1608L14.4591%2011.4229C14.4582%2010.7549%2014.999%2010.2127%2015.6669%2010.2118C16.3348%2010.2109%2016.877%2010.7517%2016.8779%2011.4196L16.8911%2021.1575C16.892%2021.8255%2016.3513%2022.3677%2015.6834%2022.3686ZM10.8123%2017.5017C10.1443%2017.5026%209.60215%2016.9619%209.60125%2016.2939C9.60034%2015.626%2010.1411%2015.0838%2010.809%2015.0829L20.547%2015.0697C21.2149%2015.0688%2021.7571%2015.6095%2021.758%2016.2775C21.7589%2016.9454%2021.2182%2017.4876%2020.5502%2017.4885L10.8123%2017.5017Z%22%20fill%3D%22%239B2064%22%2F%3E%3C%2Fsvg%3E");

  display: grid;
  gap: 0.75rem;

  &.text-varient {
    --_accordin-summary-clr: var(--white-clr);
    --_accordin-summary-fw: var(--fw-600);
    --_accordin-content-clr: var(--white-clr);
    --_accordin-bg-clr: var(--text-clr-700);
    --_accordin-border-clr: var(--secondary-clr-900);
    --_accordin-open-icon: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M14.5451%2016.3704C14.505%2016.3704%2014.4713%2016.3401%2014.4671%2016.3002C14.4622%2016.254%2014.4984%2016.2137%2014.5449%2016.2136L16.8061%2016.2106C16.8462%2016.2105%2016.8799%2016.2408%2016.8841%2016.2808C16.889%2016.327%2016.8528%2016.3673%2016.8063%2016.3673L14.5451%2016.3704ZM10.8128%2017.502C10.1448%2017.5029%209.60264%2016.9621%209.60174%2016.2942C9.60083%2015.6263%2010.1416%2015.0841%2010.8095%2015.0832L20.5474%2015.07C21.2154%2015.0691%2021.7576%2015.6098%2021.7585%2016.2777C21.7594%2016.9457%2021.2186%2017.4878%2020.5507%2017.4888L10.8128%2017.502Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
    --_accordin-closed-icon: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2214.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M15.6838%2022.3683C15.0159%2022.3692%2014.4737%2021.8285%2014.4728%2021.1606L14.4596%2011.4226C14.4587%2010.7547%2014.9994%2010.2125%2015.6674%2010.2116C16.3353%2010.2107%2016.8775%2010.7514%2016.8784%2011.4193L16.8916%2021.1573C16.8925%2021.8252%2016.3518%2022.3674%2015.6838%2022.3683ZM10.8128%2017.5014C10.1448%2017.5023%209.60264%2016.9616%209.60174%2016.2937C9.60083%2015.6258%2010.1416%2015.0836%2010.8095%2015.0827L20.5474%2015.0695C21.2154%2015.0686%2021.7576%2015.6093%2021.7585%2016.2772C21.7594%2016.9451%2021.2186%2017.4873%2020.5507%2017.4882L10.8128%2017.5014Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  }
}

.accordion {
  overflow-y: clip;
  border-radius: 1.125rem;
  border: 1px solid var(--_accordin-border-clr, hsl(240, 100%, 95%));
  background-color: var(--_accordin-bg-clr, hsl(240, 100%, 99%));

  &::details-content {
    height: 0;
    transition: height 1000ms, content-visibility 800ms, opacity 600ms 100ms;
    transition-behavior: allow-discrete;
    transition-timing-function: linear(
      0,
      0.402 7.4%,
      0.711 15.3%,
      0.929 23.7%,
      1.008 28.2%,
      1.067 33%,
      1.099 36.9%,
      1.12 41%,
      1.13 45.4%,
      1.13 50.1%,
      1.111 58.5%,
      1.019 83.2%,
      1.004 91.3%,
      1
    );
  }
}

.accordion[open] {
  &::details-content {
    height: auto;
  }

  .accordion-summary::after {
    content: var(--_accordin-open-icon);
  }

  .accordion-content {
    opacity: 1;
    padding-bottom: 1.125rem;
  }
}

.accordion-summary {
  position: relative;
  padding: 1.125rem;
  padding-right: 3.125rem;
  font-size: 1.125rem;
  font-weight: var(--_accordin-summary-fw, var(--fw-700));
  color: var(--_accordin-summary-clr, var(--secondary-clr-900));
  background-color: var(--_accordin-bg-clr, var(--white-clr));
  border-radius: 1.125rem;

  &::marker,
  &::before {
    content: "";
  }

  &::after {
    content: var(--_accordin-closed-icon);
    position: absolute;
    color: var(--secondary-clr);
    font-size: 2rem;
    top: 0.625rem;
    right: 1.125rem;
    transition: all 180ms ease;
  }
}

.accordion-content {
  opacity: 0;
  padding-inline: 1.125rem;
  line-height: 26px;
  color: var(--_accordin-content-clr, var(--text-clr-700));

  ul {
    line-height: 1.3;
    margin-left: 3ch;
  }

  dl {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1ch;
  }

  dt {
    font-weight: var(--fw-700);
  }
}

/* End of Accordin */