refactors accordion styles

web/assets/css/accordions.css

@@ -0,0 +1,73 @@
+.editor__output-result {
+  list-style: none;
+  display: none;
+  flex-direction: column;
+  gap: 1rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 1rem;
+  max-height: 370px;
+  width: 100%;
+  height: 100%;
+  background-color: #1d1f21;
+  overflow-y: auto;
+}
+
+.editor__output-result .editor__output-result-accordion {
+  width: calc(100% - 4rem);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 1rem;
+  background-color: #25282c;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.editor__output-result .editor__output-result-accordion[data-open="false"] {
+  height: 24px;
+}
+
+.editor__output-result .editor__output-result-accordion[data-open="true"] {
+  background-color: #33373d;
+  border: 1px solid #41464e;
+}
+
+.editor__output-result .editor__output-result-accordion:hover {
+  background-color: #33373d;
+}
+
+.editor__output-result-accordion .result-accordion-content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.editor__output-result-accordion .result-arrow {
+  transition: transform 300ms;
+}
+
+.editor__output-result-accordion .result-accordion-expansible-content {
+  transition: max-height 400ms, visibility 50ms;
+}
+
+.editor__output-result-accordion[data-open="false"]
+  .result-accordion-expansible-content {
+  max-height: 0;
+  visibility: hidden;
+}
+
+.editor__output-result-accordion[data-open="true"]
+  .result-accordion-expansible-content {
+  max-height: 250px;
+  visibility: visible;
+}
+
+.editor__output-result-accordion[data-open="true"] .result-arrow {
+  transform: rotate(90deg);
+}

web/assets/css/styles.css

@@ -367,80 +367,6 @@ a {
   width: 100%;
 }
 
-.editor__output-holder .editor__output-result {
-  list-style: none;
-  display: none;
-  flex-direction: column;
-  gap: 1rem;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  margin: 0;
-  padding: 1rem;
-  max-height: 370px;
-  width: 100%;
-  height: 100%;
-  background-color: #1d1f21;
-  overflow-y: auto;
-}
-
-.editor__output-result .editor__output-result-accordion {
-  width: calc(100% - 4rem);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 1rem;
-  background-color: #25282c;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.editor__output-result .editor__output-result-accordion[data-open="false"] {
-  height: 24px;
-}
-
-.editor__output-result .editor__output-result-accordion[data-open="true"] {
-  background-color: #33373d;
-  border: 1px solid #41464e;
-}
-
-.editor__output-result .editor__output-result-accordion:hover {
-  background-color: #33373d;
-}
-
-.editor__output-result-accordion .result-accordion-content {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-}
-
-.editor__output-result-accordion .result-arrow {
-  transition: transform 300ms;
-}
-
-.editor__output-result-accordion .result-accordion-expansible-content {
-  transition: max-height 400ms, visibility 50ms;
-}
-
-.editor__output-result-accordion[data-open="false"]
-  .result-accordion-expansible-content {
-  max-height: 0;
-  visibility: hidden;
-}
-
-.editor__output-result-accordion[data-open="true"]
-  .result-accordion-expansible-content {
-  max-height: 250px;
-  visibility: visible;
-}
-
-.editor__output-result-accordion[data-open="true"] .result-arrow {
-  transform: rotate(90deg);
-}
-
 .editor > .editor__output::placeholder {
   color: #e1e7ea;
 }

web/index.html

@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="assets/css/modals.css" />
     <link rel="stylesheet" href="assets/css/tabs.css" />
     <link rel="stylesheet" href="assets/css/tooltips.css" />
+    <link rel="stylesheet" href="assets/css/accordions.css">
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link