daisyui 5.0.0-alpha.21 → 5.0.0-alpha.22

package/components/collapse.css

@@ -1 +1,1039 @@
-/*! 🌼 daisyUI 5.0.0-alpha.21 – MIT License */ .collapse:not(td):not(tr):not(colgroup){visibility:visible}.collapse{border-radius:var(--rounded-box,1rem);grid-template-rows:auto 0fr;width:100%;transition:grid-template-rows .2s;display:grid;position:relative;overflow:hidden;&>input[type=checkbox],&>input[type=radio]{appearance:none;opacity:0;grid-row-start:1;grid-column-start:1}&[open],&.collapse-open,&:focus:not(.collapse-close),&:not(.collapse-close):has(>input[type=checkbox]:checked),&:not(.collapse-close):has(>input[type=radio]:checked){grid-template-rows:auto 1fr}&[open]>.collapse-content,&.collapse-open>.collapse-content,&:focus:not(.collapse-close)>.collapse-content,&:not(.collapse-close)>input[type=checkbox]:checked~.collapse-content,&:not(.collapse-close)>input[type=radio]:checked~.collapse-content{visibility:visible;min-height:fit-content}&:focus-visible,&:has(.collapse-title:focus-visible),&:has(>input[type=checkbox]:focus-visible),&:has(>input[type=radio]:focus-visible){outline-color:hsl(var(--bc)/1);outline-offset:2px;outline-width:2px;outline-style:solid}&:not(.collapse-open):not(.collapse-close){&>input[type=checkbox],&>input[type=radio]:not(:checked),&>.collapse-title{cursor:pointer}}&:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open])>.collapse-title{cursor:unset}&[open]>:where(.collapse-content),&.collapse-open>:where(.collapse-content),&:focus:not(.collapse-close)>:where(.collapse-content),&:not(.collapse-close)>:where(input[type=checkbox]:checked~.collapse-content),&:not(.collapse-close)>:where(input[type=radio]:checked~.collapse-content){padding-bottom:1rem;transition:padding .2s ease-out,background-color .2s ease-out}&[open]{&.collapse-arrow{&>.collapse-title:after{transform:translateY(-50%)rotate(225deg)}}}&.collapse-open{&.collapse-arrow{&>.collapse-title:after{transform:translateY(-50%)rotate(225deg)}}}&.collapse-arrow:focus:not(.collapse-close){&>.collapse-title:after{transform:translateY(-50%)rotate(225deg)}}&.collapse-arrow:not(.collapse-close){&>input[type=checkbox]:checked~.collapse-title:after,&>input[type=radio]:checked~.collapse-title:after{transform:translateY(-50%)rotate(225deg)}}&[open]{&.collapse-plus{&>.collapse-title:after{content:"−"}}}&.collapse-open{&.collapse-plus{&>.collapse-title:after{content:"−"}}}&.collapse-plus:focus:not(.collapse-close){&>.collapse-title:after{content:"−"}}&.collapse-plus:not(.collapse-close){&>input[type=checkbox]:checked~.collapse-title:after,&>input[type=radio]:checked~.collapse-title:after{content:"−"}}&>input[type=checkbox],&>input[type=radio]{z-index:1;padding:1rem;width:100%;min-height:3.75rem;padding-inline-end:3rem;transition:background-color .2s ease-out}}.collapse-title,.collapse-content{grid-row-start:1;grid-column-start:1}.collapse-content{visibility:hidden;cursor:unset;grid-row-start:2;grid-column-start:1;min-height:0;padding-left:1rem;padding-right:1rem;transition:padding .2s ease-out,background-color .2s ease-out}.collapse:is(details){width:100%;& summary{display:block;position:relative;&::-webkit-details-marker{display:none}}}.collapse:is(details) summary{outline:none}.collapse-arrow{&>.collapse-title:after{top:1.9rem;content:"";transform-origin:75% 75%;pointer-events:none;width:.5rem;height:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:block;position:absolute;inset-inline-end:1.4rem;transform:translateY(-100%)rotate(45deg);box-shadow:2px 2px}}.collapse-plus{&>.collapse-title:after{top:.9rem;content:"+";pointer-events:none;width:.5rem;height:.5rem;transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:block;position:absolute;inset-inline-end:1.4rem}}.collapse-title{width:100%;min-height:3.75rem;padding:1rem;padding-inline-end:3rem;transition:background-color .2s ease-out;position:relative}
+.collapse:not(td):not(tr):not(colgroup) {
+    visibility: visible;
+  }
+  .collapse {
+    position: relative;
+    display: grid;
+    overflow: hidden;
+    border-radius: var(--rounded-box, 1rem);
+    width: 100%;
+    grid-template-rows: auto 0fr;
+    transition: grid-template-rows 0.2s;
+    >input[type="checkbox"], >input[type="radio"] {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      opacity: 0;
+    }
+    &[open], &.collapse-open, &:focus:not(.collapse-close), &:not(.collapse-close):has(> input[type="checkbox"]:checked), &:not(.collapse-close):has(> input[type="radio"]:checked) {
+      grid-template-rows: auto 1fr;
+    }
+    &[open]>.collapse-content, &.collapse-open>.collapse-content, &:focus:not(.collapse-close)>.collapse-content, &:not(.collapse-close)>input[type="checkbox"]:checked~.collapse-content, &:not(.collapse-close)>input[type="radio"]:checked~.collapse-content {
+      visibility: visible;
+      min-height: fit-content;
+    }
+    &:focus-visible, &:has(.collapse-title:focus-visible), &:has(> input[type="checkbox"]:focus-visible), &:has(> input[type="radio"]:focus-visible) {
+      outline-color: hsl(var(--bc) / 1);
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+    &:not(.collapse-open):not(.collapse-close) {
+      >input[type="checkbox"], >input[type="radio"]:not(:checked), >.collapse-title {
+        cursor: pointer;
+      }
+    }
+    &:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open])>.collapse-title {
+      cursor: unset;
+    }
+    &[open]> :where(.collapse-content), &.collapse-open> :where(.collapse-content), &:focus:not(.collapse-close)> :where(.collapse-content), &:not(.collapse-close)> :where(input[type="checkbox"]:checked ~ .collapse-content), &:not(.collapse-close)> :where(input[type="radio"]:checked ~ .collapse-content) {
+      padding-bottom: 1rem;
+      transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+    }
+    &[open] {
+      &.collapse-arrow {
+        >.collapse-title:after {
+          transform: translateY(-50%) rotate(225deg);
+        }
+      }
+    }
+    &.collapse-open {
+      &.collapse-arrow {
+        >.collapse-title:after {
+          transform: translateY(-50%) rotate(225deg);
+        }
+      }
+    }
+    &.collapse-arrow:focus:not(.collapse-close) {
+      >.collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+    &.collapse-arrow:not(.collapse-close) {
+      >input[type="checkbox"]:checked~.collapse-title:after, >input[type="radio"]:checked~.collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+    &[open] {
+      &.collapse-plus {
+        >.collapse-title:after {
+          content: "−";
+        }
+      }
+    }
+    &.collapse-open {
+      &.collapse-plus {
+        >.collapse-title:after {
+          content: "−";
+        }
+      }
+    }
+    &.collapse-plus:focus:not(.collapse-close) {
+      >.collapse-title:after {
+        content: "−";
+      }
+    }
+    &.collapse-plus:not(.collapse-close) {
+      >input[type="checkbox"]:checked~.collapse-title:after, >input[type="radio"]:checked~.collapse-title:after {
+        content: "−";
+      }
+    }
+    >input[type="checkbox"], >input[type="radio"] {
+      z-index: 1;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 3.75rem;
+      transition: background-color 0.2s ease-out;
+    }
+  }
+  .collapse-title, .collapse-content {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+  .collapse-content {
+    visibility: hidden;
+    grid-column-start: 1;
+    grid-row-start: 2;
+    min-height: 0;
+    transition: visibility 0.2s;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    cursor: unset;
+    transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+  }
+  .collapse:is(details) {
+    width: 100%;
+    & summary {
+      position: relative;
+      display: block;
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+  }
+  .collapse:is(details) summary {
+    outline: none;
+  }
+  .collapse-arrow {
+    >.collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transform: translateY(-100%) rotate(45deg);
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 0.2s;
+      top: 1.9rem;
+      inset-inline-end: 1.4rem;
+      content: "";
+      transform-origin: 75% 75%;
+      box-shadow: 2px 2px;
+      pointer-events: none;
+    }
+  }
+  .collapse-plus {
+    >.collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transition-property: all;
+      transition-duration: 300ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      top: 0.9rem;
+      inset-inline-end: 1.4rem;
+      content: "+";
+      pointer-events: none;
+    }
+  }
+  .collapse-title {
+    position: relative;
+  }
+  .collapse-title {
+    width: 100%;
+    padding: 1rem;
+    padding-inline-end: 3rem;
+    min-height: 3.75rem;
+    transition: background-color 0.2s ease-out;
+  }
+@media (min-width: 640px) {
+.sm\:collapse:not(td):not(tr):not(colgroup) {
+    visibility: visible;
+  }
+  .sm\:collapse {
+    position: relative;
+    display: grid;
+    overflow: hidden;
+    border-radius: var(--rounded-box, 1rem);
+    width: 100%;
+    grid-template-rows: auto 0fr;
+    transition: grid-template-rows 0.2s;
+    >input[type="checkbox"], >input[type="radio"] {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      opacity: 0;
+    }
+    &[open], &.collapse-open, &:focus:not(.collapse-close), &:not(.collapse-close):has(> input[type="checkbox"]:checked), &:not(.collapse-close):has(> input[type="radio"]:checked) {
+      grid-template-rows: auto 1fr;
+    }
+    &[open]>.collapse-content, &.collapse-open>.collapse-content, &:focus:not(.collapse-close)>.collapse-content, &:not(.collapse-close)>input[type="checkbox"]:checked~.collapse-content, &:not(.collapse-close)>input[type="radio"]:checked~.collapse-content {
+      visibility: visible;
+      min-height: fit-content;
+    }
+    &:focus-visible, &:has(.collapse-title:focus-visible), &:has(> input[type="checkbox"]:focus-visible), &:has(> input[type="radio"]:focus-visible) {
+      outline-color: hsl(var(--bc) / 1);
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+    &:not(.collapse-open):not(.collapse-close) {
+      >input[type="checkbox"], >input[type="radio"]:not(:checked), >.collapse-title {
+        cursor: pointer;
+      }
+    }
+    &:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open])>.collapse-title {
+      cursor: unset;
+    }
+    &[open]> :where(.collapse-content), &.collapse-open> :where(.collapse-content), &:focus:not(.collapse-close)> :where(.collapse-content), &:not(.collapse-close)> :where(input[type="checkbox"]:checked ~ .collapse-content), &:not(.collapse-close)> :where(input[type="radio"]:checked ~ .collapse-content) {
+      padding-bottom: 1rem;
+      transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+    }
+    &[open] {
+      &.collapse-arrow {
+        >.collapse-title:after {
+          transform: translateY(-50%) rotate(225deg);
+        }
+      }
+    }
+    &.collapse-open {
+      &.collapse-arrow {
+        >.collapse-title:after {
+          transform: translateY(-50%) rotate(225deg);
+        }
+      }
+    }
+    &.collapse-arrow:focus:not(.collapse-close) {
+      >.collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+    &.collapse-arrow:not(.collapse-close) {
+      >input[type="checkbox"]:checked~.collapse-title:after, >input[type="radio"]:checked~.collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+    &[open] {
+      &.collapse-plus {
+        >.collapse-title:after {
+          content: "−";
+        }
+      }
+    }
+    &.collapse-open {
+      &.collapse-plus {
+        >.collapse-title:after {
+          content: "−";
+        }
+      }
+    }
+    &.collapse-plus:focus:not(.collapse-close) {
+      >.collapse-title:after {
+        content: "−";
+      }
+    }
+    &.collapse-plus:not(.collapse-close) {
+      >input[type="checkbox"]:checked~.collapse-title:after, >input[type="radio"]:checked~.collapse-title:after {
+        content: "−";
+      }
+    }
+    >input[type="checkbox"], >input[type="radio"] {
+      z-index: 1;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 3.75rem;
+      transition: background-color 0.2s ease-out;
+    }
+  }
+  .sm\:collapse-title, .sm\:collapse-content {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+  .sm\:collapse-content {
+    visibility: hidden;
+    grid-column-start: 1;
+    grid-row-start: 2;
+    min-height: 0;
+    transition: visibility 0.2s;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    cursor: unset;
+    transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+  }
+  .sm\:collapse:is(details) {
+    width: 100%;
+    & summary {
+      position: relative;
+      display: block;
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+  }
+  .sm\:collapse:is(details) summary {
+    outline: none;
+  }
+  .sm\:collapse-arrow {
+    >.collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transform: translateY(-100%) rotate(45deg);
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 0.2s;
+      top: 1.9rem;
+      inset-inline-end: 1.4rem;
+      content: "";
+      transform-origin: 75% 75%;
+      box-shadow: 2px 2px;
+      pointer-events: none;
+    }
+  }
+  .sm\:collapse-plus {
+    >.collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transition-property: all;
+      transition-duration: 300ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      top: 0.9rem;
+      inset-inline-end: 1.4rem;
+      content: "+";
+      pointer-events: none;
+    }
+  }
+  .sm\:collapse-title {
+    position: relative;
+  }
+  .sm\:collapse-title {
+    width: 100%;
+    padding: 1rem;
+    padding-inline-end: 3rem;
+    min-height: 3.75rem;
+    transition: background-color 0.2s ease-out;
+  }
+}
+
+
+@media (min-width: 768px) {
+.md\:collapse:not(td):not(tr):not(colgroup) {
+    visibility: visible;
+  }
+  .md\:collapse {
+    position: relative;
+    display: grid;
+    overflow: hidden;
+    border-radius: var(--rounded-box, 1rem);
+    width: 100%;
+    grid-template-rows: auto 0fr;
+    transition: grid-template-rows 0.2s;
+    >input[type="checkbox"], >input[type="radio"] {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      opacity: 0;
+    }
+    &[open], &.collapse-open, &:focus:not(.collapse-close), &:not(.collapse-close):has(> input[type="checkbox"]:checked), &:not(.collapse-close):has(> input[type="radio"]:checked) {
+      grid-template-rows: auto 1fr;
+    }
+    &[open]>.collapse-content, &.collapse-open>.collapse-content, &:focus:not(.collapse-close)>.collapse-content, &:not(.collapse-close)>input[type="checkbox"]:checked~.collapse-content, &:not(.collapse-close)>input[type="radio"]:checked~.collapse-content {
+      visibility: visible;
+      min-height: fit-content;
+    }
+    &:focus-visible, &:has(.collapse-title:focus-visible), &:has(> input[type="checkbox"]:focus-visible), &:has(> input[type="radio"]:focus-visible) {
+      outline-color: hsl(var(--bc) / 1);
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+    &:not(.collapse-open):not(.collapse-close) {
+      >input[type="checkbox"], >input[type="radio"]:not(:checked), >.collapse-title {
+        cursor: pointer;
+      }
+    }
+    &:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open])>.collapse-title {
+      cursor: unset;
+    }
+    &[open]> :where(.collapse-content), &.collapse-open> :where(.collapse-content), &:focus:not(.collapse-close)> :where(.collapse-content), &:not(.collapse-close)> :where(input[type="checkbox"]:checked ~ .collapse-content), &:not(.collapse-close)> :where(input[type="radio"]:checked ~ .collapse-content) {
+      padding-bottom: 1rem;
+      transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+    }
+    &[open] {
+      &.collapse-arrow {
+        >.collapse-title:after {
+          transform: translateY(-50%) rotate(225deg);
+        }
+      }
+    }
+    &.collapse-open {
+      &.collapse-arrow {
+        >.collapse-title:after {
+          transform: translateY(-50%) rotate(225deg);
+        }
+      }
+    }
+    &.collapse-arrow:focus:not(.collapse-close) {
+      >.collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+    &.collapse-arrow:not(.collapse-close) {
+      >input[type="checkbox"]:checked~.collapse-title:after, >input[type="radio"]:checked~.collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+    &[open] {
+      &.collapse-plus {
+        >.collapse-title:after {
+          content: "−";
+        }
+      }
+    }
+    &.collapse-open {
+      &.collapse-plus {
+        >.collapse-title:after {
+          content: "−";
+        }
+      }
+    }
+    &.collapse-plus:focus:not(.collapse-close) {
+      >.collapse-title:after {
+        content: "−";
+      }
+    }
+    &.collapse-plus:not(.collapse-close) {
+      >input[type="checkbox"]:checked~.collapse-title:after, >input[type="radio"]:checked~.collapse-title:after {
+        content: "−";
+      }
+    }
+    >input[type="checkbox"], >input[type="radio"] {
+      z-index: 1;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 3.75rem;
+      transition: background-color 0.2s ease-out;
+    }
+  }
+  .md\:collapse-title, .md\:collapse-content {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+  .md\:collapse-content {
+    visibility: hidden;
+    grid-column-start: 1;
+    grid-row-start: 2;
+    min-height: 0;
+    transition: visibility 0.2s;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    cursor: unset;
+    transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+  }
+  .md\:collapse:is(details) {
+    width: 100%;
+    & summary {
+      position: relative;
+      display: block;
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+  }
+  .md\:collapse:is(details) summary {
+    outline: none;
+  }
+  .md\:collapse-arrow {
+    >.collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transform: translateY(-100%) rotate(45deg);
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 0.2s;
+      top: 1.9rem;
+      inset-inline-end: 1.4rem;
+      content: "";
+      transform-origin: 75% 75%;
+      box-shadow: 2px 2px;
+      pointer-events: none;
+    }
+  }
+  .md\:collapse-plus {
+    >.collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transition-property: all;
+      transition-duration: 300ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      top: 0.9rem;
+      inset-inline-end: 1.4rem;
+      content: "+";
+      pointer-events: none;
+    }
+  }
+  .md\:collapse-title {
+    position: relative;
+  }
+  .md\:collapse-title {
+    width: 100%;
+    padding: 1rem;
+    padding-inline-end: 3rem;
+    min-height: 3.75rem;
+    transition: background-color 0.2s ease-out;
+  }
+}
+
+
+@media (min-width: 1024px) {
+.lg\:collapse:not(td):not(tr):not(colgroup) {
+    visibility: visible;
+  }
+  .lg\:collapse {
+    position: relative;
+    display: grid;
+    overflow: hidden;
+    border-radius: var(--rounded-box, 1rem);
+    width: 100%;
+    grid-template-rows: auto 0fr;
+    transition: grid-template-rows 0.2s;
+    >input[type="checkbox"], >input[type="radio"] {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      opacity: 0;
+    }
+    &[open], &.collapse-open, &:focus:not(.collapse-close), &:not(.collapse-close):has(> input[type="checkbox"]:checked), &:not(.collapse-close):has(> input[type="radio"]:checked) {
+      grid-template-rows: auto 1fr;
+    }
+    &[open]>.collapse-content, &.collapse-open>.collapse-content, &:focus:not(.collapse-close)>.collapse-content, &:not(.collapse-close)>input[type="checkbox"]:checked~.collapse-content, &:not(.collapse-close)>input[type="radio"]:checked~.collapse-content {
+      visibility: visible;
+      min-height: fit-content;
+    }
+    &:focus-visible, &:has(.collapse-title:focus-visible), &:has(> input[type="checkbox"]:focus-visible), &:has(> input[type="radio"]:focus-visible) {
+      outline-color: hsl(var(--bc) / 1);
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+    &:not(.collapse-open):not(.collapse-close) {
+      >input[type="checkbox"], >input[type="radio"]:not(:checked), >.collapse-title {
+        cursor: pointer;
+      }
+    }
+    &:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open])>.collapse-title {
+      cursor: unset;
+    }
+    &[open]> :where(.collapse-content), &.collapse-open> :where(.collapse-content), &:focus:not(.collapse-close)> :where(.collapse-content), &:not(.collapse-close)> :where(input[type="checkbox"]:checked ~ .collapse-content), &:not(.collapse-close)> :where(input[type="radio"]:checked ~ .collapse-content) {
+      padding-bottom: 1rem;
+      transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+    }
+    &[open] {
+      &.collapse-arrow {
+        >.collapse-title:after {
+          transform: translateY(-50%) rotate(225deg);
+        }
+      }
+    }
+    &.collapse-open {
+      &.collapse-arrow {
+        >.collapse-title:after {
+          transform: translateY(-50%) rotate(225deg);
+        }
+      }
+    }
+    &.collapse-arrow:focus:not(.collapse-close) {
+      >.collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+    &.collapse-arrow:not(.collapse-close) {
+      >input[type="checkbox"]:checked~.collapse-title:after, >input[type="radio"]:checked~.collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+    &[open] {
+      &.collapse-plus {
+        >.collapse-title:after {
+          content: "−";
+        }
+      }
+    }
+    &.collapse-open {
+      &.collapse-plus {
+        >.collapse-title:after {
+          content: "−";
+        }
+      }
+    }
+    &.collapse-plus:focus:not(.collapse-close) {
+      >.collapse-title:after {
+        content: "−";
+      }
+    }
+    &.collapse-plus:not(.collapse-close) {
+      >input[type="checkbox"]:checked~.collapse-title:after, >input[type="radio"]:checked~.collapse-title:after {
+        content: "−";
+      }
+    }
+    >input[type="checkbox"], >input[type="radio"] {
+      z-index: 1;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 3.75rem;
+      transition: background-color 0.2s ease-out;
+    }
+  }
+  .lg\:collapse-title, .lg\:collapse-content {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+  .lg\:collapse-content {
+    visibility: hidden;
+    grid-column-start: 1;
+    grid-row-start: 2;
+    min-height: 0;
+    transition: visibility 0.2s;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    cursor: unset;
+    transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+  }
+  .lg\:collapse:is(details) {
+    width: 100%;
+    & summary {
+      position: relative;
+      display: block;
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+  }
+  .lg\:collapse:is(details) summary {
+    outline: none;
+  }
+  .lg\:collapse-arrow {
+    >.collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transform: translateY(-100%) rotate(45deg);
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 0.2s;
+      top: 1.9rem;
+      inset-inline-end: 1.4rem;
+      content: "";
+      transform-origin: 75% 75%;
+      box-shadow: 2px 2px;
+      pointer-events: none;
+    }
+  }
+  .lg\:collapse-plus {
+    >.collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transition-property: all;
+      transition-duration: 300ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      top: 0.9rem;
+      inset-inline-end: 1.4rem;
+      content: "+";
+      pointer-events: none;
+    }
+  }
+  .lg\:collapse-title {
+    position: relative;
+  }
+  .lg\:collapse-title {
+    width: 100%;
+    padding: 1rem;
+    padding-inline-end: 3rem;
+    min-height: 3.75rem;
+    transition: background-color 0.2s ease-out;
+  }
+}
+
+
+@media (min-width: 1280px) {
+.xl\:collapse:not(td):not(tr):not(colgroup) {
+    visibility: visible;
+  }
+  .xl\:collapse {
+    position: relative;
+    display: grid;
+    overflow: hidden;
+    border-radius: var(--rounded-box, 1rem);
+    width: 100%;
+    grid-template-rows: auto 0fr;
+    transition: grid-template-rows 0.2s;
+    >input[type="checkbox"], >input[type="radio"] {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      opacity: 0;
+    }
+    &[open], &.collapse-open, &:focus:not(.collapse-close), &:not(.collapse-close):has(> input[type="checkbox"]:checked), &:not(.collapse-close):has(> input[type="radio"]:checked) {
+      grid-template-rows: auto 1fr;
+    }
+    &[open]>.collapse-content, &.collapse-open>.collapse-content, &:focus:not(.collapse-close)>.collapse-content, &:not(.collapse-close)>input[type="checkbox"]:checked~.collapse-content, &:not(.collapse-close)>input[type="radio"]:checked~.collapse-content {
+      visibility: visible;
+      min-height: fit-content;
+    }
+    &:focus-visible, &:has(.collapse-title:focus-visible), &:has(> input[type="checkbox"]:focus-visible), &:has(> input[type="radio"]:focus-visible) {
+      outline-color: hsl(var(--bc) / 1);
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+    &:not(.collapse-open):not(.collapse-close) {
+      >input[type="checkbox"], >input[type="radio"]:not(:checked), >.collapse-title {
+        cursor: pointer;
+      }
+    }
+    &:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open])>.collapse-title {
+      cursor: unset;
+    }
+    &[open]> :where(.collapse-content), &.collapse-open> :where(.collapse-content), &:focus:not(.collapse-close)> :where(.collapse-content), &:not(.collapse-close)> :where(input[type="checkbox"]:checked ~ .collapse-content), &:not(.collapse-close)> :where(input[type="radio"]:checked ~ .collapse-content) {
+      padding-bottom: 1rem;
+      transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+    }
+    &[open] {
+      &.collapse-arrow {
+        >.collapse-title:after {
+          transform: translateY(-50%) rotate(225deg);
+        }
+      }
+    }
+    &.collapse-open {
+      &.collapse-arrow {
+        >.collapse-title:after {
+          transform: translateY(-50%) rotate(225deg);
+        }
+      }
+    }
+    &.collapse-arrow:focus:not(.collapse-close) {
+      >.collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+    &.collapse-arrow:not(.collapse-close) {
+      >input[type="checkbox"]:checked~.collapse-title:after, >input[type="radio"]:checked~.collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+    &[open] {
+      &.collapse-plus {
+        >.collapse-title:after {
+          content: "−";
+        }
+      }
+    }
+    &.collapse-open {
+      &.collapse-plus {
+        >.collapse-title:after {
+          content: "−";
+        }
+      }
+    }
+    &.collapse-plus:focus:not(.collapse-close) {
+      >.collapse-title:after {
+        content: "−";
+      }
+    }
+    &.collapse-plus:not(.collapse-close) {
+      >input[type="checkbox"]:checked~.collapse-title:after, >input[type="radio"]:checked~.collapse-title:after {
+        content: "−";
+      }
+    }
+    >input[type="checkbox"], >input[type="radio"] {
+      z-index: 1;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 3.75rem;
+      transition: background-color 0.2s ease-out;
+    }
+  }
+  .xl\:collapse-title, .xl\:collapse-content {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+  .xl\:collapse-content {
+    visibility: hidden;
+    grid-column-start: 1;
+    grid-row-start: 2;
+    min-height: 0;
+    transition: visibility 0.2s;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    cursor: unset;
+    transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+  }
+  .xl\:collapse:is(details) {
+    width: 100%;
+    & summary {
+      position: relative;
+      display: block;
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+  }
+  .xl\:collapse:is(details) summary {
+    outline: none;
+  }
+  .xl\:collapse-arrow {
+    >.collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transform: translateY(-100%) rotate(45deg);
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 0.2s;
+      top: 1.9rem;
+      inset-inline-end: 1.4rem;
+      content: "";
+      transform-origin: 75% 75%;
+      box-shadow: 2px 2px;
+      pointer-events: none;
+    }
+  }
+  .xl\:collapse-plus {
+    >.collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transition-property: all;
+      transition-duration: 300ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      top: 0.9rem;
+      inset-inline-end: 1.4rem;
+      content: "+";
+      pointer-events: none;
+    }
+  }
+  .xl\:collapse-title {
+    position: relative;
+  }
+  .xl\:collapse-title {
+    width: 100%;
+    padding: 1rem;
+    padding-inline-end: 3rem;
+    min-height: 3.75rem;
+    transition: background-color 0.2s ease-out;
+  }
+}
+
+
+@media (min-width: 1536px) {
+.\32xl\:collapse:not(td):not(tr):not(colgroup) {
+    visibility: visible;
+  }
+  .\32xl\:collapse {
+    position: relative;
+    display: grid;
+    overflow: hidden;
+    border-radius: var(--rounded-box, 1rem);
+    width: 100%;
+    grid-template-rows: auto 0fr;
+    transition: grid-template-rows 0.2s;
+    >input[type="checkbox"], >input[type="radio"] {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      opacity: 0;
+    }
+    &[open], &.collapse-open, &:focus:not(.collapse-close), &:not(.collapse-close):has(> input[type="checkbox"]:checked), &:not(.collapse-close):has(> input[type="radio"]:checked) {
+      grid-template-rows: auto 1fr;
+    }
+    &[open]>.collapse-content, &.collapse-open>.collapse-content, &:focus:not(.collapse-close)>.collapse-content, &:not(.collapse-close)>input[type="checkbox"]:checked~.collapse-content, &:not(.collapse-close)>input[type="radio"]:checked~.collapse-content {
+      visibility: visible;
+      min-height: fit-content;
+    }
+    &:focus-visible, &:has(.collapse-title:focus-visible), &:has(> input[type="checkbox"]:focus-visible), &:has(> input[type="radio"]:focus-visible) {
+      outline-color: hsl(var(--bc) / 1);
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+    &:not(.collapse-open):not(.collapse-close) {
+      >input[type="checkbox"], >input[type="radio"]:not(:checked), >.collapse-title {
+        cursor: pointer;
+      }
+    }
+    &:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open])>.collapse-title {
+      cursor: unset;
+    }
+    &[open]> :where(.collapse-content), &.collapse-open> :where(.collapse-content), &:focus:not(.collapse-close)> :where(.collapse-content), &:not(.collapse-close)> :where(input[type="checkbox"]:checked ~ .collapse-content), &:not(.collapse-close)> :where(input[type="radio"]:checked ~ .collapse-content) {
+      padding-bottom: 1rem;
+      transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+    }
+    &[open] {
+      &.collapse-arrow {
+        >.collapse-title:after {
+          transform: translateY(-50%) rotate(225deg);
+        }
+      }
+    }
+    &.collapse-open {
+      &.collapse-arrow {
+        >.collapse-title:after {
+          transform: translateY(-50%) rotate(225deg);
+        }
+      }
+    }
+    &.collapse-arrow:focus:not(.collapse-close) {
+      >.collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+    &.collapse-arrow:not(.collapse-close) {
+      >input[type="checkbox"]:checked~.collapse-title:after, >input[type="radio"]:checked~.collapse-title:after {
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+    &[open] {
+      &.collapse-plus {
+        >.collapse-title:after {
+          content: "−";
+        }
+      }
+    }
+    &.collapse-open {
+      &.collapse-plus {
+        >.collapse-title:after {
+          content: "−";
+        }
+      }
+    }
+    &.collapse-plus:focus:not(.collapse-close) {
+      >.collapse-title:after {
+        content: "−";
+      }
+    }
+    &.collapse-plus:not(.collapse-close) {
+      >input[type="checkbox"]:checked~.collapse-title:after, >input[type="radio"]:checked~.collapse-title:after {
+        content: "−";
+      }
+    }
+    >input[type="checkbox"], >input[type="radio"] {
+      z-index: 1;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 3.75rem;
+      transition: background-color 0.2s ease-out;
+    }
+  }
+  .\32xl\:collapse-title, .\32xl\:collapse-content {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+  .\32xl\:collapse-content {
+    visibility: hidden;
+    grid-column-start: 1;
+    grid-row-start: 2;
+    min-height: 0;
+    transition: visibility 0.2s;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    cursor: unset;
+    transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+  }
+  .\32xl\:collapse:is(details) {
+    width: 100%;
+    & summary {
+      position: relative;
+      display: block;
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+  }
+  .\32xl\:collapse:is(details) summary {
+    outline: none;
+  }
+  .\32xl\:collapse-arrow {
+    >.collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transform: translateY(-100%) rotate(45deg);
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 0.2s;
+      top: 1.9rem;
+      inset-inline-end: 1.4rem;
+      content: "";
+      transform-origin: 75% 75%;
+      box-shadow: 2px 2px;
+      pointer-events: none;
+    }
+  }
+  .\32xl\:collapse-plus {
+    >.collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transition-property: all;
+      transition-duration: 300ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      top: 0.9rem;
+      inset-inline-end: 1.4rem;
+      content: "+";
+      pointer-events: none;
+    }
+  }
+  .\32xl\:collapse-title {
+    position: relative;
+  }
+  .\32xl\:collapse-title {
+    width: 100%;
+    padding: 1rem;
+    padding-inline-end: 3rem;
+    min-height: 3.75rem;
+    transition: background-color 0.2s ease-out;
+  }
+}
+