Move track scoped style to 2.blocks.track.css

src/assets/css/index.css

@@ -23,6 +23,7 @@
 @import 'src/2.blocks.pdf-viewer.css';
 @import 'src/2.blocks.project.css';
 @import 'src/2.blocks.skip-link.css';
+@import 'src/2.blocks.track.css';
 
 /* UTILITY CLASSES */
 @import 'src/3.utilities.border.css';

src/assets/css/src/2.blocks.track.css

@@ -0,0 +1,87 @@
+/* TRACK BLOCK */
+
+/* Container */
+.track {
+  --w: 100%;
+  --h: calc(100% - 74px);
+  --x-steps: 14;
+  --y-steps: 5;
+  width: var(--w);
+  height: var(--h);
+  position: relative;
+  margin: var(--space-16) auto;
+  border-radius: var(--rounded-lg);
+}
+
+.track figure {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.track img {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: inherit;
+  height: inherit;
+  object-fit: contain;
+}
+.track fieldset {
+  --p: 0rem;
+  margin: 0;
+  padding: 0;
+  width: var(--w);
+  height: var(--h);
+  border: none;
+}
+.track button {
+  position: absolute;
+}
+
+/* Buttons */
+.track .btn--icon {
+  --icon-size: var(--space-24);
+  --icon-color: var(--color-grey-700);
+  width: var(--space-48);
+  height: var(--space-48);
+  max-height: var(--space-48);
+  background: transparent;
+  padding: var(--space-12);
+}
+.track .btn--icon:hover {
+  background: var(--color-black-10);
+}
+.track .y-up {
+  top: var(--p);
+}
+.track .y-up::before {
+  transform: rotate(90deg);
+}
+.track .y-down {
+  bottom: var(--p);
+}
+.track .y-down::before {
+  transform: rotate(-90deg);
+}
+.track .y-up,
+.track .y-down {
+  text-align: center;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.track .x-down {
+  left: var(--p);
+}
+.track .x-up {
+  right: var(--p);
+}
+.track .x-up::before {
+  transform: rotate(180deg);
+}
+.track .x-down,
+.track .x-up {
+  top: 50%;
+  transform: translateY(-50%);
+}