@sebgroup/green-core 3.13.0 → 3.14.0

package/components/tabs/tabs.styles.js

@@ -0,0 +1,115 @@
+import "../../chunks/chunk.CAV4X6PU.js";
+import { css } from "lit";
+const style = css`
+  @layer base {
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gds-sys-space-xl);
+      --_gds-tab-scroll-button-width: 1.75rem;
+      --_gds-tab-scroll-margin-inline: calc(
+        var(--_gds-tab-scroll-button-width) + var(--gds-sys-space-xs)
+      );
+    }
+
+    .tabs-container {
+      align-items: center;
+      display: flex;
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+
+      &:after {
+        content: '';
+        background: var(--gds-sys-color-border-neutral-02);
+        height: 2px;
+        left: 2px;
+        right: 2px;
+        width: calc(100% - 4px);
+        position: absolute;
+        bottom: 0;
+      }
+    }
+
+    #marker {
+      position: absolute;
+      bottom: 0;
+      height: 2px;
+      background: var(--gds-sys-color-border-neutral-04);
+      left: var(--_marker-left, 0px);
+      width: var(--_marker-width, 0px);
+      pointer-events: none;
+      z-index: 1;
+
+      &[data-ready]:not([data-scrolling]) {
+        transition:
+          left var(--gds-sys-motion-duration-fastest),
+          width var(--gds-sys-motion-duration-fastest);
+      }
+    }
+
+    #track {
+      box-sizing: border-box;
+      display: flex;
+      flex-grow: 1;
+      gap: var(--gds-sys-space-xs);
+      padding: 2px;
+      overflow-x: auto;
+      overscroll-behavior-x: contain;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+      scroll-padding-inline: var(--_gds-tab-scroll-margin-inline);
+      width: 100%;
+    }
+
+    #track::-webkit-scrollbar {
+      display: none;
+    }
+
+    #btn-prev,
+    #btn-next {
+      align-items: center;
+      border: 0;
+      border-radius: var(--gds-sys-radius-max);
+      color: var(--gds-sys-color-content-neutral-01);
+      background: var(--gds-sys-color-l3-neutral-01);
+      display: flex;
+      height: 32px;
+      width: 32px;
+      justify-content: center;
+      padding: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      transition: opacity var(--gds-sys-motion-duration-fastest)
+        cubic-bezier(var(--gds-sys-motion-easing-ease-out));
+      z-index: 1;
+      box-shadow: var(--gds-sys-shadow-s-01), var(--gds-sys-shadow-s-02);
+    }
+
+    #btn-prev {
+      left: 0;
+    }
+
+    #btn-next {
+      right: 0;
+    }
+
+    #btn-prev[aria-hidden='true'],
+    #btn-next[aria-hidden='true'] {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    #btn-prev gds-icon-chevron-left,
+    #btn-next gds-icon-chevron-right {
+      display: flex;
+      font-size: 1rem;
+    }
+  }
+`;
+var tabs_styles_default = style;
+export {
+  tabs_styles_default as default
+};