/* Accordion icon */
.el-ic,.dtl-ic {
  display: block;
  background: var(--prm-300);
  padding: var(--n-s);
  height: var(--n-2xl);
  width: var(--n-2xl);
  border-radius: var(--br-2xl);
  position: relative;
  flex-shrink: 0;
  transition: all var(--trs-2) ease
}

.r-ic,.l-ic {
  width: var(--n-m);
  height: 0.1875rem;
  background: var(--prm-500);
  display: block;
  border-radius: var(--br-m);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all var(--trs-2) ease
}

.r-ic {transform: translate(-15%, -50%) rotate(-45deg)}
.l-ic {transform: translate(-75%, -45%) rotate(45deg)}

details {
  transition: all 0.5s ease;
  
  &[name="faq"] {
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        box-shadow: var(--strk-h);
        background: var(--input-actn-bg);
        .el-ic {
          background: var(--prm-400);
          .r-ic,.l-ic {background: var(--prm-300)}
        }
      }
    }
      &:has(> summary:focus-visible) {
      box-shadow: var(--strk-h);
      background: var(--input-actn-bg);
      .el-ic {
        background: var(--prm-400);
        .r-ic,.l-ic {background: var(--prm-300)}
      }
    }
  }
  
  &[name="details"] {
    padding-bottom: 0.25em;
    background: linear-gradient(var(--nav-link-atv-clr), var(--nav-link-atv-clr)) 0% 100% / 0% .09rem no-repeat;
    transition: background-size var(--trs-2) ease;
    &:has(> summary:is(:focus-visible)) {background-size: 100% 0.125em}
    @media (hover: hover) and (pointer: fine) {
      &:hover {background-size: 100% .09rem;

        .dtl-ic {
          background: var(--prm-400);
          .r-ic,.l-ic {background: var(--prm-300)}
        }
      }
    }
    

  }

  &[open] {
  --card-bg: var(--ntl-100);
  & .dtl-ic {
    .r-ic {transform: translate(-15%, -50%) rotate(45deg)}
    .l-ic {transform: translate(-75%, -45%) rotate(-45deg)}
  }
  & .el-ic {
    .r-ic,.l-ic {width: 14px}
    .r-ic {transform: translate(-50%, -30%) rotate(-45deg)}
    .l-ic {transform: translate(-50%, -30%) rotate(45deg)}
    }
  }
}

/* Animate all on summmary */
summary {
  transition: all 0.5s ease;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: space-between;

  &:focus {outline: none}
  &::marker {content: ""}
}

::details-content {
  transition: all 0.5s ease, content-visibility 0.5s allow-discrete;
  height: 0;
  overflow: clip
}

[open]::details-content {
  height: auto;
  padding-bottom: .01em
}

details[open] summary~* {padding-top: var(--n-m);animation: sweep var(--trs-3) ease-in-out}
summary::-webkit-details-marker {display: none}

@keyframes sweep {
  from {opacity: 0;margin-bottom: -0.75em}
  to {opacity: 1;margin-bottom: 0}
}