@graupl/graupl 1.0.0-alpha.15 → 1.0.0-alpha.16

package/src/scss/component/accordion/_index.scss

@@ -0,0 +1,180 @@
+// @graupl/graupl accordion component styles.
+
+@use "defaults";
+@use "variables" as *;
+@use "../../base/button/mixins" as button-mixins;
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../state/focus/variables" as focus;
+@use "sass:map";
+
+#{defaults.$accordion-selector} {
+  @include layer(component) {
+    display: flex;
+    flex-flow: column nowrap;
+    padding: $accordion-padding;
+    gap: $accordion-gap;
+
+    > #{defaults.$accordion-item-selector} {
+      &:not(:first-child) {
+        margin-top: calc(-1 * #{$accordion-item-border-width});
+      }
+    }
+  }
+
+  @include layer(theme) {
+    background: $accordion-background;
+    color: $accordion-color;
+  }
+}
+
+#{defaults.$accordion-item-selector} {
+  @include layer(component) {
+    overflow: hidden;
+    transition: $accordion-transition;
+    border: $accordion-item-border;
+    border-radius: $accordion-item-border-radius;
+    isolation: isolate;
+
+    &#{defaults.$accordion-item-close-selector}
+      #{defaults.$accordion-item-content-selector} {
+      display: none;
+    }
+
+    &#{defaults.$accordion-item-open-selector}
+      #{defaults.$accordion-item-content-selector} {
+      transform: $accordion-item-content-open-transform;
+      opacity: 1;
+    }
+
+    &#{defaults.$accordion-item-transition-selector}
+      #{defaults.$accordion-item-content-selector} {
+      display: flex;
+    }
+  }
+
+  @include layer(state) {
+    #{defaults.$accordion-item-toggle-selector} {
+      --#{root-defaults.$prefix}-focus-outline-offset: calc(
+        -1 * (#{$accordion-item-border-width} + #{focus.$focus-width})
+      );
+    }
+  }
+
+  @include layer(theme) {
+    border-color: $accordion-item-border-color;
+  }
+}
+
+#{defaults.$accordion-item-toggle-selector} {
+  @include button-mixins.apply-button;
+
+  @include layer(component) {
+    z-index: 2;
+    padding: $accordion-item-toggle-padding;
+    transform: $accordion-item-toggle-transform;
+    transition: $accordion-item-toggle-transition;
+
+    @each $selector in map.get(root-defaults.$state-selectors, visited) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-visited-transform};
+      }
+    }
+
+    @each $selector in map.get(root-defaults.$state-selectors, focus) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-focus-transform};
+      }
+    }
+
+    @each $selector in map.get(root-defaults.$state-selectors, hover) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-hover-transform};
+      }
+    }
+
+    @each $selector in map.get(root-defaults.$state-selectors, active) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-active-transform};
+      }
+    }
+
+    @each $selector in map.get(root-defaults.$state-selectors, disabled) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-disabled-transform};
+      }
+    }
+
+    &#{defaults.$accordion-item-toggle-pseudo-selector} {
+      content: defaults.$accordion-item-toggle-pseudo-content;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: auto;
+      transform: $accordion-item-toggle-pseudo-transform;
+      transition: $accordion-item-toggle-pseudo-transition;
+    }
+
+    &[aria-expanded="true"] {
+      &::after {
+        transform: $accordion-item-toggle-pseudo-open-transform;
+      }
+    }
+  }
+}
+
+#{defaults.$accordion-item-header-selector} {
+  @include layer(component) {
+    margin: $accordion-item-header-margin;
+    padding: $accordion-item-header-padding;
+  }
+}
+
+#{defaults.$accordion-item-title-selector} {
+  @include layer(component) {
+    margin: $accordion-item-title-margin;
+    padding: $accordion-item-title-padding;
+
+    &,
+    #{defaults.$accordion-item-toggle-selector} {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      width: 100%;
+    }
+  }
+
+  @include layer(theme) {
+    &,
+    #{defaults.$accordion-item-toggle-selector} {
+      font-family: $accordion-title-font-family;
+      font-size: $accordion-title-font-size;
+      font-weight: $accordion-title-font-weight;
+      line-height: $accordion-title-line-height;
+    }
+  }
+}
+
+#{defaults.$accordion-item-content-selector} {
+  @include layer(component) {
+    display: flex;
+    flex-flow: column nowrap;
+    padding: $accordion-item-content-padding;
+    transform: $accordion-item-content-transform;
+    transition: $accordion-item-content-transition;
+    opacity: 0;
+    gap: $accordion-item-content-gap;
+  }
+}
+
+#{defaults.$accordion-item-body-selector} {
+  @include layer(component) {
+    padding: $accordion-item-body-padding;
+  }
+}
+
+#{defaults.$accordion-item-footer-selector} {
+  @include layer(component) {
+    padding: $accordion-item-footer-padding;
+  }
+}

package/src/scss/component/accordion/_variables.scss

@@ -0,0 +1,304 @@
+// @graupl/graupl accordion component variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
+@use "../../theme/color/variables" as color;
+@use "../../theme/typography/variables" as typography;
+@use "../../functions/theme";
+@use "sass:map";
+@use "../../base/button/variables" as button;
+
+// Accordion properties.
+$accordion-padding-x: var(
+  --#{root-defaults.$prefix}-accordion-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-padding-y: var(
+  --#{root-defaults.$prefix}-accordion-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-padding: var(
+  --#{root-defaults.$prefix}-accordion-padding,
+  #{$accordion-padding-y} #{$accordion-padding-x}
+);
+
+// Accordion gap properties.
+$accordion-column-gap: var(
+  --#{root-defaults.$prefix}-accordion-column-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-row-gap: var(
+  --#{root-defaults.$prefix}-accordion-row-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-gap: var(
+  --#{root-defaults.$prefix}-accordion-gap,
+  #{$accordion-column-gap} #{$accordion-row-gap}
+);
+
+// Accordion color properties.
+$accordion-color: var(
+  --#{root-defaults.$prefix}-accordion-color,
+  #{color.$root-color}
+);
+$accordion-background: var(
+  --#{root-defaults.$prefix}-accordion-background,
+  #{color.$root-background}
+);
+
+// Accordion item border properties.
+$accordion-item-border-color: var(
+  --#{root-defaults.$prefix}-accordion-item-border-color,
+  #{$accordion-color}
+);
+$accordion-item-top-left-border-radius: var(
+  --#{root-defaults.$prefix}-accordion-item-top-left-border-radius,
+  #{root-variables.$border-radius}
+);
+$accordion-item-top-right-border-radius: var(
+  --#{root-defaults.$prefix}-accordion-item-top-right-border-radius,
+  #{root-variables.$border-radius}
+);
+$accordion-item-bottom-left-border-radius: var(
+  --#{root-defaults.$prefix}-accordion-item-bottom-left-border-radius,
+  #{root-variables.$border-radius}
+);
+$accordion-item-bottom-right-border-radius: var(
+  --#{root-defaults.$prefix}-accordion-item-bottom-right-border-radius,
+  #{root-variables.$border-radius}
+);
+$accordion-item-border-radius: var(
+  --#{root-defaults.$prefix}-accordion-item-border-radius,
+  #{$accordion-item-top-left-border-radius} #{$accordion-item-top-right-border-radius}
+    #{$accordion-item-bottom-right-border-radius} #{$accordion-item-bottom-left-border-radius}
+);
+$accordion-item-border-style: var(
+  --#{root-defaults.$prefix}-accordion-item-border-style,
+  #{root-variables.$border-style}
+);
+$accordion-item-border-width: var(
+  --#{root-defaults.$prefix}-accordion-item-border-width,
+  #{root-variables.$border-width}
+);
+$accordion-item-border: var(
+  --#{root-defaults.$prefix}-accordion-item-border,
+  #{$accordion-item-border-width} #{$accordion-item-border-style}
+);
+
+// Accordion item properties.
+$accordion-item-toggle-padding: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-padding,
+  #{button.$button-padding}
+);
+
+// Transform properties.
+$accordion-item-toggle-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-transform,
+  #{defaults.$accordion-item-toggle-transform}
+);
+$accordion-item-toggle-visited-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-visited-transform,
+  #{defaults.$accordion-item-toggle-visited-transform}
+);
+$accordion-item-toggle-focus-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-focus-transform,
+  #{defaults.$accordion-item-toggle-focus-transform}
+);
+$accordion-item-toggle-hover-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-hover-transform,
+  #{defaults.$accordion-item-toggle-hover-transform}
+);
+$accordion-item-toggle-active-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-active-transform,
+  #{defaults.$accordion-item-toggle-active-transform}
+);
+$accordion-item-toggle-disabled-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-disabled-transform,
+  #{defaults.$accordion-item-toggle-disabled-transform}
+);
+$accordion-item-toggle-transition: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-transition,
+  background #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function},
+  color #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function},
+  transform #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function}
+);
+$accordion-item-toggle-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-transition-reduced-motion,
+  background #{map.get(root-variables.$transition-durations, none)} #{root-variables.$transition-timing-function},
+  color #{map.get(root-variables.$transition-durations, none)} #{root-variables.$transition-timing-function}
+);
+
+// Accordion item header properties.
+$accordion-item-header-padding-x: var(
+  --#{root-defaults.$prefix}-accordion-item-header-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-header-padding-y: var(
+  --#{root-defaults.$prefix}-accordion-item-header-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-header-padding: var(
+  --#{root-defaults.$prefix}-accordion-item-header-padding,
+  #{$accordion-item-header-padding-y} #{$accordion-item-header-padding-x}
+);
+$accordion-item-header-margin: var(
+  --#{root-defaults.$prefix}-accordion-item-header-margin,
+  calc(-1 * #{$accordion-item-border-width})
+);
+
+// Accordion item title properties.
+$accordion-item-title-padding-x: var(
+  --#{root-defaults.$prefix}-accordion-item-title-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-title-padding-y: var(
+  --#{root-defaults.$prefix}-accordion-item-title-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-title-padding: var(
+  --#{root-defaults.$prefix}-accordion-item-title-padding,
+  #{$accordion-item-title-padding-y} #{$accordion-item-title-padding-x}
+);
+$accordion-item-title-margin-x: var(
+  --#{root-defaults.$prefix}-accordion-item-title-margin-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-title-margin-y: var(
+  --#{root-defaults.$prefix}-accordion-item-title-margin-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-title-margin: var(
+  --#{root-defaults.$prefix}-accordion-item-title-margin,
+  #{$accordion-item-title-margin-y} #{$accordion-item-title-margin-x}
+);
+$accordion-title-color: var(
+  --#{root-defaults.$prefix}-accordion-title-color,
+  #{$accordion-color}
+);
+$accordion-title-font-size: var(
+  --#{root-defaults.$prefix}-accordion-title-font-size,
+  #{typography.$h5-font-size}
+);
+$accordion-title-font-weight: var(
+  --#{root-defaults.$prefix}-accordion-title-font-weight,
+  #{typography.$h5-font-weight}
+);
+$accordion-title-font-family: var(
+  --#{root-defaults.$prefix}-accordion-title-font-family,
+  #{typography.$h5-font-family}
+);
+$accordion-title-line-height: var(
+  --#{root-defaults.$prefix}-accordion-title-line-height,
+  #{typography.$h5-line-height}
+);
+
+// Accordion item content properties.
+$accordion-item-content-padding-x: var(
+  --#{root-defaults.$prefix}-accordion-item-content-padding-x,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$accordion-item-content-padding-y: var(
+  --#{root-defaults.$prefix}-accordion-item-content-padding-y,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$accordion-item-content-padding: var(
+  --#{root-defaults.$prefix}-accordion-item-content-padding,
+  #{$accordion-item-content-padding-y} #{$accordion-item-content-padding-x}
+);
+$accordion-item-content-column-gap: var(
+  --#{root-defaults.$prefix}-accordion-item-content-column-gap,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$accordion-item-content-row-gap: var(
+  --#{root-defaults.$prefix}-accordion-item-content-row-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-content-gap: var(
+  --#{root-defaults.$prefix}-accordion-item-content-gap,
+  #{$accordion-item-content-column-gap} #{$accordion-item-content-row-gap}
+);
+
+// Accordion item body properties.
+$accordion-item-body-padding-x: var(
+  --#{root-defaults.$prefix}-accordion-item-body-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-body-padding-y: var(
+  --#{root-defaults.$prefix}-accordion-item-body-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-body-padding: var(
+  --#{root-defaults.$prefix}-accordion-item-body-padding,
+  #{$accordion-item-body-padding-y} #{$accordion-item-body-padding-x}
+);
+
+// Accordion item footer properties.
+$accordion-item-footer-padding-x: var(
+  --#{root-defaults.$prefix}-accordion-item-footer-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-footer-padding-y: var(
+  --#{root-defaults.$prefix}-accordion-item-footer-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-footer-padding: var(
+  --#{root-defaults.$prefix}-accordion-item-footer-padding,
+  #{$accordion-item-footer-padding-y} #{$accordion-item-footer-padding-x}
+);
+
+// Accordion item transition properties.
+$accordion-transition-duration: var(
+  --#{root-defaults.$prefix}-accordion-transition-duration,
+  #{map.get(root-variables.$transition-durations, slow)}
+);
+$accordion-item-toggle-transition-duration: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-transition-duration,
+  #{$accordion-transition-duration}
+);
+$accordion-transition: var(
+  --#{root-defaults.$prefix}-accordion-transition,
+  height #{map.get(root-variables.$transition-durations, slow)} #{root-variables.$transition-timing-function}
+);
+$accordion-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-accordion-transition-reduced-motion,
+  none
+);
+$accordion-item-toggle-pseudo-transition: var(
+  --#{root-defaults.$prefix}-accordion-transition,
+  transform #{map.get(root-variables.$transition-durations, slow)} #{root-variables.$transition-timing-function}
+);
+$accordion-item-toggle-pseudo-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-accordion-transition-reduced-motion,
+  none
+);
+$accordion-item-content-transition: var(
+  --#{root-defaults.$prefix}-accordion-transition,
+  opacity #{map.get(root-variables.$transition-durations, slow)} #{root-variables.$transition-timing-function}
+    transform #{map.get(root-variables.$transition-durations, slow)} #{root-variables.$transition-timing-function}
+);
+$accordion-item-content-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-accordion-transition-reduced-motion,
+  opacity #{map.get(root-variables.$transition-durations, slow)} #{root-variables.$transition-timing-function}
+);
+
+// Accordion item transform properties.
+$accordion-item-content-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-content-transform,
+  #{defaults.$accordion-item-content-transform}
+);
+$accordion-item-content-open-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-content-open-transform,
+  #{defaults.$accordion-item-content-open-transform}
+);
+$accordion-item-toggle-pseudo-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-pseudo-transform,
+  #{defaults.$accordion-item-toggle-pseudo-transform}
+);
+$accordion-item-toggle-pseudo-open-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-pseudo-open-transform,
+  #{defaults.$accordion-item-toggle-pseudo-open-transform}
+);

package/src/scss/component/carousel/_index.scss

@@ -68,6 +68,7 @@
       1fr [previous-start] $carousel-control-width [previous-end next-start]
       $carousel-control-width [next-end];
     grid-template-rows: [autoplay-start next-start previous-start] $carousel-control-height [previous-end next-end autoplay-end];
+    pointer-events: none;
   }
 }
 
@@ -75,6 +76,8 @@
   @include button-mixins.apply-button;
 
   @include layer(component) {
+    pointer-events: auto;
+
     &#{defaults.$carousel-autoplay-selector} {
       grid-area: autoplay;
     }
@@ -170,6 +173,7 @@
     justify-content: center;
     padding: $carousel-tab-container-padding;
     gap: $carousel-tab-container-gap;
+    pointer-events: none;
   }
 }
 
@@ -178,5 +182,7 @@
 
   @include layer(component) {
     --#{root-defaults.$prefix}-button-border-radius: 50%;
+
+    pointer-events: auto;
   }
 }

package/src/scss/layout/columns/_index.scss

@@ -36,7 +36,7 @@
   }
 
   // Disable columns on small screens to avoid horizontal bleeding.
-  @include screen(xs) {
+  @include screen-trigger(force-single-column) {
     #{defaults.$columns-selector} {
       --#{root-defaults.$prefix}-columns-min-width: #{defaults.$columns-max-width};
 

package/src/scss/layout/flex-columns/_index.scss

@@ -39,7 +39,7 @@
       /* stylelint-enable  scss/operator-no-newline-after */
     }
 
-    @include screen(xs) {
+    @include screen-trigger(force-single-column) {
       #{defaults.$flex-columns-column-selector-prefix}#{$i} {
         --#{root-defaults.$prefix}-flex-columns-size: 100%;
         --#{root-defaults.$prefix}-flex-columns-max-width: auto;

package/src/scss/state/focus/_index.scss

@@ -2,12 +2,12 @@
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;
+@use "mixins" as *;
+@use "../../defaults" as root-defaults;
+@use "sass:map";
 
-@include layer(state) {
-  *:focus-visible {
-    border-color: transparent;
-    outline: $focus-outline-width $focus-outline-style $focus-outline-color;
-    outline-offset: $focus-outline-offset;
-    box-shadow: $focus-box-shadow;
+@each $state in map.get(root-defaults.$state-selectors, focus) {
+  *#{$state} {
+    @include apply-focus;
   }
 }

package/src/scss/state/focus/_mixins.scss

@@ -0,0 +1,15 @@
+// @graupl/graupl focus state mixins.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "../../defaults" as root-defaults;
+@use "sass:map";
+
+@mixin apply-focus() {
+  @include layer(state) {
+    border-color: transparent;
+    outline: $focus-outline-width $focus-outline-style $focus-outline-color;
+    outline-offset: $focus-outline-offset;
+    box-shadow: $focus-box-shadow;
+  }
+}

package/vite.config.js

@@ -0,0 +1,57 @@
+import { resolve } from "path";
+import { defineConfig } from "vite";
+import { fileURLToPath, URL } from "url";
+import process from "process";
+
+// Get the current directory path.
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+// The type of menu to build from the BUILD_TYPE environment variable.
+// If BUILD_TYPE is not set, the default build is used
+const buildType = process.env.BUILD_TYPE ?? "default";
+
+// Supported build types.
+const formats = ["iife", "esm", "cjs"];
+
+// The library options for the different menus.
+const lib = {
+  default: {
+    entry: resolve(__dirname, "build.js"),
+    name: "Graupl",
+    formats,
+    fileName: (format) => `graupl.${format}.js`,
+  },
+  Accordion: {
+    entry: resolve(__dirname, "/src/js/accordion/Accordion.js"),
+    name: "Accordion",
+    formats,
+    fileName: (format) => `component/accordion.${format}.js`,
+  },
+  Alert: {
+    entry: resolve(__dirname, "/src/js/alert/Alert.js"),
+    name: "Alert",
+    formats,
+    fileName: (format) => `component/alert.${format}.js`,
+  },
+  Carousel: {
+    entry: resolve(__dirname, "/src/js/carousel/Carousel.js"),
+    name: "Carousel",
+    formats,
+    fileName: (format) => `component/carousel.${format}.js`,
+  },
+};
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    outDir: "dist/js",
+    lib: lib[buildType] || lib.default,
+    emptyOutDir: false,
+  },
+  server: {
+    host: "0.0.0.0",
+    hmr: {
+      host: "localhost",
+    },
+  },
+});

package/dist/base/button.css

@@ -1,2 +0,0 @@
-@layer graupl.base{.button{align-items:center;border:var(--graupl-button-border,var(--graupl-button-border-width,var(--graupl-border-width,2px)) var(--graupl-botton-border-style,var(--graupl-border-style,solid)));border-radius:var(--graupl-button-border-radius,var(--graupl-border-radius,.125rem));cursor:pointer;display:flex;font-size:var(--graupl-button-font-size,var(--graupl-font-base,calc(var(--graupl-font-size-base, 1rem)*1)));justify-content:center;min-height:var(--graupl-button-min-height,44px);min-width:var(--graupl-button-min-width,44px);padding:var(--graupl-button-padding,var(--graupl-button-padding-y,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*.5))) var(--graupl-button-padding-x,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))));transform:var(--graupl-button-transform,none);transition:var(--graupl-button-transition,background var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease))}.button.visited,.button:visited{--graupl-button-transform:var(--graupl-button-visited-transform,none)}.button.focus,.button:focus-visible{--graupl-button-transform:var(--graupl-button-focus-transform,none)}.button.hover,.button:hover{--graupl-button-transform:var(--graupl-button-hover-transform,none)}.button.active,.button:active{--graupl-button-transform:var(--graupl-button-active-transform,scale(0.95))}.button.disabled,.button:disabled,.button[disabled]{cursor:not-allowed}.button.disabled,.button.disabled.active,.button.disabled.focus,.button.disabled.hover,.button.disabled.visited,.button.disabled:active,.button.disabled:focus-visible,.button.disabled:hover,.button.disabled:visited,.button:disabled,.button:disabled.active,.button:disabled.focus,.button:disabled.hover,.button:disabled.visited,.button:disabled:active,.button:disabled:focus-visible,.button:disabled:hover,.button:disabled:visited,.button[disabled],.button[disabled].active,.button[disabled].focus,.button[disabled].hover,.button[disabled].visited,.button[disabled]:active,.button[disabled]:focus-visible,.button[disabled]:hover,.button[disabled]:visited{--graupl-button-transform:var(--graupl-button-disabled-transform,none)}@media (prefers-reduced-motion:reduce){.button{--graupl-button-transition:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease))}}}@layer graupl.theme{.button{background:var(--graupl-button-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));border-color:var(--graupl-button-border-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));color:var(--graupl-button-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}.button.primary{--graupl-button-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-button-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-visited-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-button-visited-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-focus-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-button-focus-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));--graupl-button-hover-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));--graupl-button-active-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-disabled-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)));--graupl-button-disabled-border-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.button.secondary{--graupl-button-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-button-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-visited-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-button-visited-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-focus-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-button-focus-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)));--graupl-button-hover-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)));--graupl-button-active-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-disabled-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)));--graupl-button-disabled-border-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.button.tertiary{--graupl-button-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-button-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-visited-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-button-visited-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-focus-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-button-focus-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)));--graupl-button-hover-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)));--graupl-button-active-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-disabled-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)));--graupl-button-disabled-border-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.button.visited,.button:visited{--graupl-button-border-color:var(--graupl-button-visited-border-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));--graupl-button-background:var(--graupl-button-visited-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));--graupl-button-color:var(--graupl-button-visited-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}.button.focus,.button:focus-visible{--graupl-button-border-color:var(--graupl-button-focus-border-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));--graupl-button-background:var(--graupl-button-focus-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));--graupl-button-color:var(--graupl-button-focus-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}.button.hover,.button:hover{--graupl-button-border-color:var(--graupl-button-hover-border-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));--graupl-button-background:var(--graupl-button-hover-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));--graupl-button-color:var(--graupl-button-hover-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))}.button.active,.button:active{--graupl-button-border-color:var(--graupl-button-active-border-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));--graupl-button-background:var(--graupl-button-active-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));--graupl-button-color:var(--graupl-button-active-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))}.button.disabled,.button.disabled.active,.button.disabled.focus,.button.disabled.hover,.button.disabled.visited,.button.disabled:active,.button.disabled:focus-visible,.button.disabled:hover,.button.disabled:visited,.button:disabled,.button:disabled.active,.button:disabled.focus,.button:disabled.hover,.button:disabled.visited,.button:disabled:active,.button:disabled:focus-visible,.button:disabled:hover,.button:disabled:visited,.button[disabled],.button[disabled].active,.button[disabled].focus,.button[disabled].hover,.button[disabled].visited,.button[disabled]:active,.button[disabled]:focus-visible,.button[disabled]:hover,.button[disabled]:visited{--graupl-button-border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));--graupl-button-background:var(--graupl-button-disabled-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));--graupl-button-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}}.button.link{--graupl-button-padding:var(--graupl-link-padding,var(--graupl-link-padding-y,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))) var(--graupl-link-padding-x,var(--graupl-spacer-0,calc(var(--graupl-spacer, 1rem)*0))));--graupl-button-transition:var(--graupl-link-transition,background var(--graupl-transition-duration-fast,150ms) var(--graupl-transition-timing-function,ease),color var(--graupl-transition-duration-fast,150ms) var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,150ms) var(--graupl-transition-timing-function,ease));--graupl-button-transition-reduced-motion:var(--graupl-link-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease));--graupl-button-transform:var(--graupl-link-transform,none);--graupl-button-visited-transform:var(--graupl-link-visited-transform,none);--graupl-button-focus-transform:var(--graupl-link-transform,none);--graupl-button-hover-transform:var(--graupl-link-hover-transform,none);--graupl-button-active-transform:var(--graupl-link-active-transform,none);--graupl-button-border-width:var(--graupl-link-border-width,0);--graupl-button-border-style:var(--graupl-link-border-style,var(--graupl-border-style,solid));--graupl-button-border-radius:var(--graupl-link-border-radius,var(--graupl-border-radius,0.125rem));--graupl-button-min-width:var(--graupl-link-min-width,auto);--graupl-button-min-height:var(--graupl-link-min-height,auto);--graupl-button-font-size:inherit;-webkit-text-decoration:var(--graupl-link-text-decoration,underline);text-decoration:var(--graupl-link-text-decoration,underline);text-decoration-style:var(--graupl-link-text-decoration-style,solid);text-decoration-thickness:var(--graupl-link-text-decoration-thickness,var(--graupl-border-width,2px))}@layer graupl.base{.button.link{--graupl-button-color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))));--graupl-button-visited-color:var(--graupl-link-visited-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))));--graupl-button-focus-color:var(--graupl-link-focus-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))));--graupl-button-hover-color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))));--graupl-button-active-color:var(--graupl-link-active-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))));--graupl-button-disabled-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));--graupl-button-background:var(--graupl-link-background,transparent);--graupl-button-visited-background:var(--graupl-link-visited-background,transparent);--graupl-button-focus-background:var(--graupl-link-focus-background,transparent);--graupl-button-hover-background:var(--graupl-link-hover-background,transparent);--graupl-button-active-background:var(--graupl-link-active-background,transparent);--graupl-button-disabled-background:var(--graupl-link-disabled-background,transparent);--graupl-button-border-color:var(--graupl-link-border-color,transparent);--graupl-button-visited-border-color:var(--graupl-link-visited-border-color,transparent);--graupl-button-focus-border-color:var(--graupl-link-focus-border-color,transparent);--graupl-button-hover-border-color:var(--graupl-link-hover-border-color,transparent);--graupl-button-active-border-color:var(--graupl-link-active-border-color,transparent);--graupl-button-disabled-border-color:var(--graupl-link-disabled-border-color,transparent)}a.button:not(.link){--graupl-link-padding:var(--graupl-button-padding,var(--graupl-button-padding-y,var(--graupl-spacer-3,calc(var(--graupl-spacer, 1rem)*0.5))) var(--graupl-button-padding-x,var(--graupl-spacer-5,calc(var(--graupl-spacer, 1rem)*1))));--graupl-link-transition:var(--graupl-button-transition,background var(--graupl-transition-duration-fast,150ms) var(--graupl-transition-timing-function,ease),color var(--graupl-transition-duration-fast,150ms) var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,150ms) var(--graupl-transition-timing-function,ease));--graupl-link-transition-reduced-motion:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease));--graupl-link-transform:var(--graupl-button-transform,none);--graupl-link-visited-transform:var(--graupl-button-visited-transform,none);--graupl-link-focus-transform:var(--graupl-button-focus-transform,none);--graupl-link-hover-transform:var(--graupl-button-hover-transform,none);--graupl-link-active-transform:var(--graupl-button-active-transform,scale(0.95));--graupl-link-disabled-transform:var(--graupl-button-disabled-transform,none);--graupl-link-border-width:var(--graupl-button-border-width,var(--graupl-border-width,2px));--graupl-link-border-style:var(--graupl-botton-border-style,var(--graupl-border-style,solid));--graupl-link-border-radius:var(--graupl-button-border-radius,var(--graupl-border-radius,0.125rem));--graupl-link-min-width:var(--graupl-button-min-width,44px);--graupl-link-min-height:var(--graupl-button-min-height,44px);--graupl-link-text-decoration:none;--graupl-link-visited-text-decoration:none;--graupl-link-focus-text-decoration:none;--graupl-link-hover-text-decoration:none;--graupl-link-active-text-decoration:none;--graupl-link-disabled-text-decoration:none}}@layer graupl.theme{a.button:not(.link){--graupl-link-color:var(--graupl-button-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));--graupl-link-visited-color:var(--graupl-button-visited-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));--graupl-link-focus-color:var(--graupl-button-focus-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));--graupl-link-hover-color:var(--graupl-button-hover-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));--graupl-link-active-color:var(--graupl-button-active-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));--graupl-link-disabled-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));--graupl-link-background:var(--graupl-button-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));--graupl-link-visited-background:var(--graupl-button-visited-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));--graupl-link-focus-background:var(--graupl-button-focus-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));--graupl-link-hover-background:var(--graupl-button-hover-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));--graupl-link-active-background:var(--graupl-button-active-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));--graupl-link-disabled-background:var(--graupl-button-disabled-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));--graupl-link-border-color:var(--graupl-button-border-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));--graupl-link-visited-border-color:var(--graupl-button-visited-border-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));--graupl-link-focus-border-color:var(--graupl-button-focus-border-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));--graupl-link-hover-border-color:var(--graupl-button-hover-border-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));--graupl-link-active-border-color:var(--graupl-button-active-border-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));--graupl-link-disabled-border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}}
-/*# sourceMappingURL=button.css.map */