jekyll-before-after 0.1.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a21883c118e8086f562f69af0804ec131bf49ff1166485abe8e1f4b23c657e0
-  data.tar.gz: 724bb4a84e30680bd90f347a1c6ce4596790d49bf113bc5243dc5376976903b7
+  metadata.gz: 95018375cf799be55f8ea6697b6e75001a0273bf053d6cfd70f584a6c0e31a9e
+  data.tar.gz: 517c6093fc0789f13d357322d2ec9eeacba39df886e55fc5f054474bfe7fe182
 SHA512:
-  metadata.gz: ee01f6091029ec8d399a8331babc95b098135433ea150ebfae8cd7b5c77fc285e4cc6f03716e28d6d21ccf5947285c5473fab2878d102241b8315ecc2fb134fd
-  data.tar.gz: 33bae04da7fe2bcd3ecb8762a75ade05ee4d32e885f99630b06853328bd7f418b241ac1eb461b1383f4ca915f3a91b16dd32d693ee447d595fb56696124f2c16
+  metadata.gz: ebc5888a4e142f4247ba391cc4528b3a718830bc12fd2a0358a00d30ce307a9b72e723e5600cd0d45a1d9b103ee8e68a8a8277bf87e1db72d1324397596fe47e
+  data.tar.gz: ae8c0aaf89ee1c78345cfd4c80039dacfa4e32be35a6a6449c7431804726225cca8cc112f8e440a71e043862ae356f65696de0c79a67958b1cbb00310c22a90f

data/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [1.0.0] - 2026-08-29
+
+### Changed
+- **MAJOR: Refactored to use [img-comparison-slider](https://github.com/sneas/img-comparison-slider) web component**
+  - Replaced custom JavaScript implementation with proven, battle-tested web component
+  - Dramatically simplified codebase (no custom JS initialization needed)
+  - Improved performance and reliability
+  - Better accessibility with native web component semantics
+
+### Added
+- `orientation="vertical"` attribute for vertical comparisons
+- Automatic CDN injection of img-comparison-slider library (no manual setup required)
+- Full CSS custom property theming support via img-comparison-slider
+
+### Removed
+- Custom JavaScript slider implementation
+- `_before-after.scss` (styling now via CSS custom properties)
+- Configurable start position, overlay labels, srcset attributes (use CSS for customization)
+- ResizeObserver logic (handled by web component)
+
+### Migration Guide
+If upgrading from 0.1.0:
+- All existing `{% before_after %}` tags work unchanged
+- Custom styling should migrate to CSS custom properties (see README)
+- No configuration changes needed — it just works
+
 ## [0.1.0] - 2026-08-22
 
 ### Added

data/README.md

@@ -1,6 +1,6 @@
 # jekyll-before-after
 
-A Jekyll plugin providing a `{% before_after %}` Liquid tag for rendering a polished, accessible drag-to-reveal image comparison slider. Supports horizontal and vertical orientations, overlay labels, responsive images, keyboard navigation, and full CSS custom property theming. Pure vanilla JS — no external dependencies, GitHub Pages compatible.
+A Jekyll plugin providing a `{% before_after %}` Liquid tag for rendering a drag-to-reveal image comparison slider. Built on the proven [img-comparison-slider](https://github.com/sneas/img-comparison-slider) web component. Supports horizontal and vertical orientations, responsive images, keyboard navigation, touch support, and full CSS custom property theming. Pure vanilla JS with zero external dependencies — GitHub Pages compatible.
 
 ## Installation
 
@@ -17,18 +17,14 @@ plugins:
   - jekyll-before-after
 ```
 
-Copy `_before-after.scss` to your site's CSS directory and import it.
-
 Run `bundle install`.
 
 ## Usage
 
 ```liquid
 {% before_after
-  before="/images/main-street-2018.jpg"
-  after="/images/main-street-2024.jpg"
-  before_label="2018"
-  after_label="2024"
+  before="/images/before.jpg"
+  after="/images/after.jpg"
 %}
 ```
 
@@ -38,96 +34,69 @@ Run `bundle install`.
 |--------|---------|-------------|
 | `before` | _(required)_ | Path to the "before" image |
 | `after` | _(required)_ | Path to the "after" image |
-| `before_label` | `"Before"` | Label overlaid on the before side |
-| `after_label` | `"After"` | Label overlaid on the after side |
-| `start` | `50` | Initial slider position (0–100) |
 | `orientation` | `horizontal` | `horizontal` or `vertical` |
-| `alt_before` | `""` | Alt text for the before image |
-| `alt_after` | `""` | Alt text for the after image |
-| `srcset_before` | `""` | `srcset` value for responsive before image |
-| `srcset_after` | `""` | `srcset` value for responsive after image |
-| `sizes` | `"(max-width: 768px) 100vw, 100vw"` | `sizes` attribute when using srcset |
 
-### Responsive images
+### Examples
 
-Pass `srcset_before` and `srcset_after` to render a `<picture>` element:
+#### Horizontal comparison
 
 ```liquid
 {% before_after
-  before="/images/street-before.jpg"
-  after="/images/street-after.jpg"
-  srcset_before="/images/street-before-480.jpg 480w, /images/street-before-960.jpg 960w"
-  srcset_after="/images/street-after-480.jpg 480w, /images/street-after-960.jpg 960w"
-  sizes="(max-width: 600px) 100vw, 80vw"
+  before="/images/main-street-2018.jpg"
+  after="/images/main-street-2024.jpg"
 %}
 ```
 
-### Vertical orientation
+#### Vertical comparison
 
 ```liquid
 {% before_after
   before="/images/building-2015.jpg"
   after="/images/building-2025.jpg"
-  orientation=vertical
-  before_label="2015"
-  after_label="2025"
+  orientation="vertical"
 %}
 ```
 
-### Multiple sliders
-
-Multiple sliders on the same page are fully supported. The JavaScript block is emitted only once per page regardless of how many sliders you include.
+#### Multiple sliders
 
-## Configuration
-
-Set site-wide defaults in `_config.yml`:
-
-```yaml
-before_after:
-  start: 50
-  orientation: horizontal
-  before_label: "Before"
-  after_label: "After"
-```
+Multiple sliders on the same page are fully supported. The library script is injected only once per page.
 
 ## Styling
 
-Copy `_before-after.scss` to your project and import it. All visual properties are controlled via CSS custom properties:
-
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--ba-handle-color` | `#fff` | Handle line and knob color |
-| `--ba-knob-size` | `2.75rem` | Drag knob diameter |
-| `--ba-knob-icon-color` | `#333` | Arrow icon color inside knob |
-| `--ba-line-width` | `2px` | Divider line thickness |
-| `--ba-label-bg` | `rgba(0,0,0,0.55)` | Label background |
-| `--ba-label-color` | `#fff` | Label text color |
-| `--ba-label-radius` | `3px` | Label border radius |
-| `--ba-radius` | `4px` | Container border radius |
-| `--ba-focus-ring` | `rgba(255,255,255,0.8)` | Keyboard focus ring color |
-
-### Example override
-
-```scss
-.before-after {
-  --ba-handle-color: #e67e22;
-  --ba-knob-size: 3rem;
-  --ba-label-bg: rgba(0, 0, 0, 0.75);
+All visual properties are controlled via CSS custom properties. Target the `img-comparison-slider` element:
+
+```css
+img-comparison-slider {
+  --divider-width: 4px;
+  --divider-color: #fff;
+  --handle-width: 60px;
+  --handle-height: 60px;
+  --handle-opacity: 0.3;
+  --handle-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
 }
 ```
 
+See [img-comparison-slider docs](https://img-comparison-slider.sneas.io/) for all available CSS custom properties.
+
 ## Interaction
 
-- **Drag** the handle to reveal
+- **Drag** the divider to reveal
 - **Click** anywhere on the image to jump the slider to that position
-- **Keyboard**: focus the handle and use arrow keys (5% steps; hold Shift for 1% steps)
+- **Keyboard**: focus the slider and use arrow keys
 - **Touch** and stylus supported via Pointer Events API
 
+## How it works
+
+This plugin wraps the lightweight [img-comparison-slider](https://github.com/sneas/img-comparison-slider) web component, loading it from CDN. The Liquid tag converts your `{% before_after %}` markup into the web component format, and the plugin injects the library script into the page once per build.
+
 ## Requirements
 
 - Jekyll >= 3.9
 - Ruby >= 2.7
+- Modern browser with Web Components support (all modern browsers)
 
 ## License
 
 MIT — see [LICENSE.txt](LICENSE.txt).
+
+The plugin wraps [img-comparison-slider](https://github.com/sneas/img-comparison-slider) by sneas, also licensed under MIT.

data/jekyll-before-after.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-before-after"
-  spec.version       = "0.1.0"
+  spec.version       = "1.0.0"
   spec.authors       = ["Jason Chance"]
   spec.email         = ["jason@jasonchance.com"]
 

data/lib/jekyll/before_after_generator.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Jekyll
+  class BeforeAfterGenerator < Generator
+    safe true
+    priority :highest
+
+    def generate(site)
+      # Create the CSS as a virtual file that can be included
+      css_content = %q{<style>
+.before-after{position:relative;overflow:hidden;cursor:col-resize;user-select:none;touch-action:none;border-radius:var(--ba-radius, 4px);background:var(--ba-bg, #000);margin-bottom:2rem}
+.before-after[data-orientation="vertical"]{cursor:row-resize}
+.before-after--dragging{cursor:grabbing}
+.before-after__after{position:relative;display:block}
+.before-after__after img,.before-after__after picture img{display:block;width:100%;height:auto;pointer-events:none}
+.before-after__before{position:absolute;inset:0;z-index:1;clip-path:inset(0 50% 0 0)}
+.before-after__before img,.before-after__before picture img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
+.before-after__label{position:absolute;bottom:.75rem;z-index:2;padding:.25rem .6rem;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--ba-label-bg, rgba(0, 0, 0, 0.55));color:var(--ba-label-color, #fff);border-radius:var(--ba-label-radius, 3px);pointer-events:none}
+.before-after__label--before{left:.75rem}
+.before-after__label--after{right:.75rem}
+.before-after__handle{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:10;display:flex;align-items:center;justify-content:center;outline:0}
+.before-after__handle:focus-visible .before-after__handle-knob{box-shadow:0 0 0 3px var(--ba-focus-ring, rgba(255, 255, 255, 0.8))}
+.before-after__handle-line{position:absolute;background:var(--ba-handle-color, #fff);opacity:.85}
+.before-after:not([data-orientation="vertical"]) .before-after__handle-line{width:var(--ba-line-width, 2px);top:-200%;bottom:-200%;left:50%;transform:translateX(-50%)}
+[data-orientation="vertical"] .before-after__handle-line{height:var(--ba-line-width, 2px);left:-200%;right:-200%;top:50%;transform:translateY(-50%)}
+.before-after__handle-knob{position:relative;z-index:1;width:var(--ba-knob-size, 2.75rem);height:var(--ba-knob-size, 2.75rem);border-radius:50%;background:var(--ba-handle-color, #fff);color:var(--ba-knob-icon-color, #333);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0, 0, 0, 0.35);transition:transform .15s ease, box-shadow .15s ease;cursor:grab}
+.before-after__handle-knob svg{width:1.1rem;height:1.1rem}
+.before-after--dragging .before-after__handle-knob{cursor:grabbing;transform:scale(1.12);box-shadow:0 4px 16px rgba(0, 0, 0, 0.45)}
+[data-orientation="vertical"] .before-after__handle-knob svg{transform:rotate(90deg)}
+</style>}
+      
+      # Store in site data so layouts can access it
+      site.data['before_after_css'] = css_content
+    end
+  end
+end

data/lib/jekyll/before_after_tag.rb

@@ -13,9 +13,6 @@ module Jekyll
     attrs
   end
 
-  # Dedup script: only emit the JS block once per page
-  BEFORE_AFTER_SCRIPT_FLAG = :before_after_script_emitted
-
   class BeforeAfterTag < Liquid::Tag
     def initialize(tag_name, markup, tokens)
       super
@@ -23,170 +20,18 @@ module Jekyll
     end
 
     def render(context)
-      config   = context.registers[:site]&.config&.dig("before_after") || {}
       before   = @attributes["before"]   || ""
       after    = @attributes["after"]    || ""
-      b_label  = @attributes["before_label"] || config["before_label"] || "Before"
-      a_label  = @attributes["after_label"]  || config["after_label"]  || "After"
-      start    = (@attributes["start"]   || config["start"]   || 50).to_i
-      orient   = @attributes["orientation"] || config["orientation"] || "horizontal"
-      alt_b    = @attributes["alt_before"] || ""
-      alt_a    = @attributes["alt_after"]  || ""
-      srcset_b = @attributes["srcset_before"] || ""
-      srcset_a = @attributes["srcset_after"]  || ""
-      sizes    = @attributes["sizes"] || "(max-width: 768px) 100vw, 100vw"
-
-      before_img = build_img(before, alt_b, srcset_b, sizes)
-      after_img  = build_img(after,  alt_a, srcset_a, sizes)
-
-      script_block = emit_script(context)
+      orient   = @attributes["orientation"] || "horizontal"
+      direction = orient == "vertical" ? ' direction="vertical"' : ""
 
       <<~HTML
-        <div class="before-after" data-orientation="#{orient}" data-start="#{start}">
-          <div class="before-after__before">
-            #{before_img}
-            #{b_label.empty? ? "" : %(<span class="before-after__label before-after__label--before">#{b_label}</span>)}
-          </div>
-          <div class="before-after__after">
-            #{after_img}
-            #{a_label.empty? ? "" : %(<span class="before-after__label before-after__label--after">#{a_label}</span>)}
-          </div>
-          <div class="before-after__handle"
-               role="slider"
-               aria-label="Image comparison slider"
-               aria-valuenow="#{start}"
-               aria-valuemin="0"
-               aria-valuemax="100"
-               tabindex="0">
-            <div class="before-after__handle-line"></div>
-            <div class="before-after__handle-knob">
-              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-                <path d="M8 5l-5 7 5 7M16 5l5 7-5 7" stroke="currentColor" stroke-width="2"
-                      stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-              </svg>
-            </div>
-          </div>
-        </div>
-        #{script_block}
+        <img-comparison-slider#{direction}>
+          <img slot="first" src="#{before}" alt="Before">
+          <img slot="second" src="#{after}" alt="After">
+        </img-comparison-slider>
       HTML
     end
-
-    private
-
-    def build_img(src, alt, srcset, sizes)
-      if srcset && !srcset.empty?
-        %(<picture><source srcset="#{srcset}" sizes="#{sizes}"><img src="#{src}" alt="#{alt}" loading="lazy" draggable="false"></picture>)
-      else
-        %(<img src="#{src}" alt="#{alt}" loading="lazy" draggable="false">)
-      end
-    end
-
-    def emit_script(context)
-      return "" if context.registers[BEFORE_AFTER_SCRIPT_FLAG]
-      context.registers[BEFORE_AFTER_SCRIPT_FLAG] = true
-      <<~JS
-        <script>
-        (function() {
-          function initSlider(el) {
-            var orientation = el.dataset.orientation === "vertical" ? "vertical" : "horizontal";
-            var handle = el.querySelector(".before-after__handle");
-            var beforePane = el.querySelector(".before-after__before");
-            var start = parseFloat(el.dataset.start) || 50;
-            var dragging = false;
-
-            function setPosition(pct) {
-              pct = Math.min(100, Math.max(0, pct));
-              if (orientation === "vertical") {
-                beforePane.style.clipPath = "inset(0 0 " + (100 - pct) + "% 0)";
-                handle.style.top = pct + "%";
-                handle.style.left = "";
-              } else {
-                beforePane.style.clipPath = "inset(0 " + (100 - pct) + "% 0 0)";
-                handle.style.left = pct + "%";
-                handle.style.top = "";
-              }
-              handle.setAttribute("aria-valuenow", Math.round(pct));
-            }
-
-            function pctFromEvent(e) {
-              var rect = el.getBoundingClientRect();
-              if (orientation === "vertical") {
-                return ((e.clientY - rect.top) / rect.height) * 100;
-              } else {
-                return ((e.clientX - rect.left) / rect.width) * 100;
-              }
-            }
-
-            handle.addEventListener("pointerdown", function(e) {
-              dragging = true;
-              handle.setPointerCapture(e.pointerId);
-              el.classList.add("before-after--dragging");
-              e.preventDefault();
-            });
-
-            handle.addEventListener("pointermove", function(e) {
-              if (!dragging) return;
-              setPosition(pctFromEvent(e));
-            });
-
-            handle.addEventListener("pointerup", function() {
-              dragging = false;
-              el.classList.remove("before-after--dragging");
-            });
-
-            handle.addEventListener("pointercancel", function() {
-              dragging = false;
-              el.classList.remove("before-after--dragging");
-            });
-
-            // Keyboard support
-            handle.addEventListener("keydown", function(e) {
-              var step = e.shiftKey ? 1 : 5;
-              var cur = parseFloat(handle.getAttribute("aria-valuenow")) || 50;
-              if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-                setPosition(cur + step);
-                e.preventDefault();
-              } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-                setPosition(cur - step);
-                e.preventDefault();
-              }
-            });
-
-            // Click anywhere on container to jump
-            el.addEventListener("pointerdown", function(e) {
-              if (e.target === handle || handle.contains(e.target)) return;
-              setPosition(pctFromEvent(e));
-            });
-
-            // Recalculate on resize
-            if (window.ResizeObserver) {
-              new ResizeObserver(function() {
-                var cur = parseFloat(handle.getAttribute("aria-valuenow")) || start;
-                setPosition(cur);
-              }).observe(el);
-            }
-
-            setPosition(start);
-          }
-
-          function init() {
-            document.querySelectorAll(".before-after").forEach(function(el) {
-              if (!el.dataset.baInit) {
-                el.dataset.baInit = "1";
-                initSlider(el);
-              }
-            });
-          }
-
-          if (document.readyState === "loading") {
-            document.addEventListener("DOMContentLoaded", init);
-          } else {
-            init();
-          }
-        })();
-        </script>
-      JS
-    end
   end
 end
 

data/lib/jekyll-before-after.rb

@@ -1,3 +1,28 @@
 # frozen_string_literal: true
 
 require "jekyll/before_after_tag"
+
+module Jekyll
+  class BeforeAfterScriptInjector
+    def call(doc)
+      return if doc.output.nil? || !doc.output.include?("<img-comparison-slider>")
+      return if doc.output.include?("<!-- img-comparison-slider-injected -->")
+
+      script = <<~HTML
+        <!-- img-comparison-slider-injected -->
+        <script type="module" src="https://unpkg.com/img-comparison-slider@7/dist/index.js"></script>
+        <link rel="stylesheet" href="https://unpkg.com/img-comparison-slider@7/dist/styles.css">
+      HTML
+
+      doc.output.sub!("</head>", "#{script}</head>")
+    end
+  end
+
+  Jekyll::Hooks.register :pages, :post_render do |doc|
+    Jekyll::BeforeAfterScriptInjector.new.call(doc)
+  end
+
+  Jekyll::Hooks.register :documents, :post_render do |doc|
+    Jekyll::BeforeAfterScriptInjector.new.call(doc)
+  end
+end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-before-after
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Jason Chance
 bindir: bin
 cert_chain: []
-date: 2026-08-22 00:00:00.000000000 Z
+date: 2026-08-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -44,9 +44,9 @@ files:
 - CONTRIBUTING.md
 - LICENSE.txt
 - README.md
-- _before-after.scss
 - jekyll-before-after.gemspec
 - lib/jekyll-before-after.rb
+- lib/jekyll/before_after_generator.rb
 - lib/jekyll/before_after_tag.rb
 homepage: https://jasonchance.com/projects/jekyll-before-after/
 licenses:

data/_before-after.scss

@@ -1,144 +0,0 @@
-// jekyll-before-after — copy to your site's CSS/SCSS directory and @import or @use it.
-
-.before-after {
-  position: relative;
-  overflow: hidden;
-  cursor: col-resize;
-  user-select: none;
-  touch-action: none;
-  border-radius: var(--ba-radius, 4px);
-  background: var(--ba-bg, #000);
-
-  &[data-orientation="vertical"] {
-    cursor: row-resize;
-  }
-
-  &--dragging {
-    cursor: grabbing;
-  }
-}
-
-// After pane: normal flow — its img drives the container height
-.before-after__after {
-  position: relative;
-  display: block;
-
-  img,
-  picture img {
-    display: block;
-    width: 100%;
-    height: auto;
-    pointer-events: none;
-  }
-}
-
-// Before pane: absolutely stacked on top, clipped by JS
-.before-after__before {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  clip-path: inset(0 50% 0 0); // overridden by JS on init
-
-  img,
-  picture img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    pointer-events: none;
-  }
-}
-
-// Labels
-.before-after__label {
-  position: absolute;
-  bottom: 0.75rem;
-  z-index: 2;
-  padding: 0.25rem 0.6rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  background: var(--ba-label-bg, rgba(0, 0, 0, 0.55));
-  color: var(--ba-label-color, #fff);
-  border-radius: var(--ba-label-radius, 3px);
-  pointer-events: none;
-
-  &--before {
-    left: 0.75rem;
-  }
-
-  &--after {
-    right: 0.75rem;
-  }
-}
-
-// Handle
-.before-after__handle {
-  position: absolute;
-  top: 50%;
-  left: 50%; // overridden by JS
-  transform: translate(-50%, -50%);
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-
-  &:focus-visible .before-after__handle-knob {
-    box-shadow: 0 0 0 3px var(--ba-focus-ring, rgba(255, 255, 255, 0.8));
-  }
-}
-
-.before-after__handle-line {
-  position: absolute;
-  background: var(--ba-handle-color, #fff);
-  opacity: 0.85;
-
-  .before-after:not([data-orientation="vertical"]) & {
-    width: var(--ba-line-width, 2px);
-    top: -200%;
-    bottom: -200%;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  [data-orientation="vertical"] & {
-    height: var(--ba-line-width, 2px);
-    left: -200%;
-    right: -200%;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-
-.before-after__handle-knob {
-  position: relative;
-  z-index: 1;
-  width: var(--ba-knob-size, 2.75rem);
-  height: var(--ba-knob-size, 2.75rem);
-  border-radius: 50%;
-  background: var(--ba-handle-color, #fff);
-  color: var(--ba-knob-icon-color, #333);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
-  cursor: grab;
-
-  svg {
-    width: 1.1rem;
-    height: 1.1rem;
-  }
-
-  .before-after--dragging & {
-    cursor: grabbing;
-    transform: scale(1.12);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
-  }
-
-  [data-orientation="vertical"] & svg {
-    transform: rotate(90deg);
-  }
-}