@energie360/ui-library 0.0.3

package/.browserslistrc

@@ -0,0 +1 @@
+defaults

package/README.md

@@ -0,0 +1,3 @@
+# Energie 360 UI Library
+
+*WIP*

package/base/_accessibility.scss

@@ -0,0 +1,5 @@
+@use './abstracts/_mixins.scss' as m;
+
+.visually-hidden {
+  @include m.visually-hidden;
+}

package/base/_base.scss

@@ -0,0 +1,104 @@
+@use './abstracts' as a;
+@use '@energie360/design-tokens/dist/scss' as dt;
+
+html {
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+
+html,
+body {
+  min-height: 100vh;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body {
+  font-family: a.$body-font;
+  font-size: a.rem(a.$body-font-size);
+  font-weight: a.$body-font-weight;
+  line-height: a.$body-line-height;
+  color: a.$body-font-color;
+}
+
+input {
+  font-family: inherit;
+  appearance: none;
+  border: 0;
+  background: none;
+
+  // Set this here because of specificity issues (with ::slotted)
+  @include a.type(200);
+
+  ::placeholder {
+    color: var(--e-c-mono-700);
+  }
+}
+
+[type='search']::-webkit-search-cancel-button {
+  display: none;
+}
+
+[type='date']::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  cursor: pointer;
+}
+
+select {
+  font-family: inherit;
+  appearance: none;
+  border: 0;
+  background: none;
+
+  // Set this here because of specificity issues (with ::slotted)
+  @include a.type(200);
+
+  &:invalid {
+    color: var(--e-c-mono-700);
+  }
+}
+
+textarea {
+  font-family: inherit;
+  appearance: none;
+  border: 0;
+  background: none;
+  resize: vertical;
+
+  // Set this here because of specificity issues (with ::slotted)
+  @include a.type(200);
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+// Focus Handling
+// There's still room for improvement here.
+// Maybe we'll implement floating focus later on.
+* {
+  outline: none;
+}
+
+*:focus-visible {
+  outline-style: solid;
+  outline-offset: 4px;
+  outline-color: rgba(dt.$c-mono-500, 0.8);
+}
+
+[data-whatintent='mouse'] *:focus {
+  outline: none;
+}
+
+@media print {
+  body {
+    -webkit-print-color-adjust: exact !important; /* stylelint-disable-line */
+    print-color-adjust: exact !important; /* stylelint-disable-line */
+  }
+}

package/base/_body.scss

@@ -0,0 +1,7 @@
+body {
+  font-family: var(--e-type-font-body), var(--e-type-font-fallback);
+  font-size: var(--e-type-size-300);
+  font-weight: var(--e-type-weight-weak);
+  line-height: var(--e-type-line-height-300);
+  color: var(--e-c-mono-900);
+}

package/base/_focus-handling.scss

@@ -0,0 +1,18 @@
+@use '@energie360/design-tokens/dist/scss' as dt;
+
+// Focus Handling
+// There's still room for improvement here.
+// Maybe we'll implement floating focus later on.
+* {
+  outline: none;
+}
+
+*:focus-visible {
+  outline-style: solid;
+  outline-offset: 4px;
+  outline-color: rgba(dt.$c-mono-500, 0.8);
+}
+
+[data-whatintent='mouse'] *:focus {
+  outline: none;
+}

package/base/_html.scss

@@ -0,0 +1,11 @@
+html {
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+  min-height: 100vh;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}

package/base/_input-resets.scss

@@ -0,0 +1,49 @@
+@use './abstracts' as a;
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  appearance: none;
+  border: 0;
+  background: none;
+  margin: 0;
+}
+
+input,
+select,
+textarea {
+  @include a.type(
+    200
+  ); // Set this here because of specificity issues (with ::slotted)
+}
+
+input {
+  &::placeholder {
+    color: var(--e-c-mono-700);
+  }
+
+  &:disabled::placeholder {
+    color: var(--e-c-mono-500);
+  }
+}
+
+[type='search']::-webkit-search-cancel-button {
+  display: none;
+}
+
+[type='date']::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  cursor: pointer;
+}
+
+select {
+  &:invalid {
+    color: var(--e-c-mono-700);
+  }
+}
+
+textarea {
+  resize: vertical;
+}

package/base/_print.scss

@@ -0,0 +1,6 @@
+@media print {
+  body {
+    -webkit-print-color-adjust: exact !important; /* stylelint-disable-line */
+    print-color-adjust: exact !important; /* stylelint-disable-line */
+  }
+}

package/base/_resets.scss

@@ -0,0 +1,53 @@
+@use './abstracts/resets' as r;
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  text-wrap: balance;
+}
+
+p,
+figure,
+blockquote {
+  margin: 0;
+}
+
+@include r.button-reset;
+
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+dl,
+dt,
+dd {
+  margin: 0;
+}
+
+address {
+  font-style: normal;
+}
+
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}

package/base/abstracts/_functions.scss

@@ -0,0 +1,21 @@
+@use 'variables' as v;
+@use 'sass:math';
+@use 'sass:list';
+@use 'sass:meta';
+
+/* prettier-ignore */
+@function rem($size, $base-size: v.$base-font-size) {
+  @if meta.function-exists(get-env) {
+    @if get-env() == 'development' {
+      @return #{math.div($size, $size * 0 + 1)}px;
+    }
+  } @else {
+    $rem-size: math.div(($size * 1px), $base-size);
+
+    @if list.index('px', math.unit($size)) != null and meta.type_of($size) == 'number' {
+      $rem-size: math.div(($size), $base-size);
+    }
+
+    @return #{$rem-size}rem;
+  }
+}

package/base/abstracts/_layers.scss

@@ -0,0 +1,6 @@
+// TODO: Check if these vars are even used. They could also be moved to design-tokens.
+// z-index layers
+$layer-tooltip: 100;
+$layer-nav-flyout: 200;
+$layer-mobile-menu: 200;
+$layer-message: 300;

package/base/abstracts/_mixins.scss

@@ -0,0 +1,80 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '@energie360/design-tokens/dist/scss' as dt;
+@use './functions' as f;
+
+// Accessibility
+@mixin visually-hidden {
+  position: absolute;
+  display: block;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+// Media query helper mixin
+@mixin bp($query) {
+  @media (max-width: #{map.get(dt.$mediaquery-token-map, #{'mq-breakpoint-' + $query})}) {
+    @content;
+  }
+}
+
+$letter-spacings: (
+  // (weak, strong)
+  1000: (0.2px, 0.2px),
+  900: (0.2px, 0.2px),
+  800: (0.6px, 0.4px),
+  700: (0.4px, 0.4px),
+  600: (0.4px, 0.4px),
+  500: (0.7px, 0.7px),
+  400: (0.5px, 0.5px),
+  300: (0.3px, 0.3px),
+  200: (0.3px, 0.1px),
+  100: (0.3px, 0.4px),
+  50: (0.4px, 0.4px)
+);
+
+// Small helper because font-size and line-height are basically are always the same size.
+@mixin type($size, $weight: null) {
+  font-size: var(--e-type-size-#{$size});
+  line-height: var(--e-type-line-height-#{$size});
+
+  @if $weight == strong {
+    letter-spacing: f.rem(list.nth(map.get($letter-spacings, $size), 2));
+  } @else {
+    letter-spacing: f.rem(list.nth(map.get($letter-spacings, $size), 1));
+  }
+
+  @if $weight {
+    font-weight: var(--e-type-weight-#{$weight});
+
+    @if $weight == strong {
+      // TODO: find a better way to set this smoothing properties.
+      // Now they would be rendered multiple times on every type(xxx, strong).
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }
+
+  @media print {
+    font-size: calc(var(--e-type-size-#{$size}) * 0.75);
+    line-height: calc(var(--e-type-line-height-#{$size}) * 0.75);
+  }
+}
+
+// This mixin will simply add an animated background.
+@mixin skeleton-background {
+  background-color: var(--e-c-mono-200);
+  animation-name: skeleton-bg-loader;
+  animation-duration: 1500ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: var(--e-trs-easing-default);
+  border-radius: var(--e-brd-radius-1);
+  overflow: hidden;
+  color: transparent;
+}

package/base/abstracts/_resets.scss

@@ -0,0 +1,11 @@
+@mixin button-reset {
+  button {
+    padding: 0;
+    margin: 0;
+    appearance: none;
+    border: 0;
+    font-family: inherit;
+    font-size: inherit;
+    background: none;
+  }
+}

package/base/abstracts/_variables.scss

@@ -0,0 +1,42 @@
+// TODO: Use CSS vars instead of SCSS vars.
+@use '@energie360/design-tokens/dist/scss' as dt;
+@use 'sass:math';
+
+// Global variables
+// These are abstractions of design tokens
+
+$body-font:
+  #{dt.$type-font-body},
+  #{dt.$type-font-fallback};
+$body-font-color: dt.$c-mono-900;
+$body-line-height: dt.$type-line-height-300;
+$body-font-size: dt.$type-size-300;
+$body-font-weight: dt.$type-weight-weak;
+
+// $base-font-size: dt.$type-font-base-size;
+$base-font-size: 16px;
+
+// Layout: Container
+$container-edge-2xl: dt.$space-20;
+$container-edge-lg: dt.$space-10;
+$container-edge-m: dt.$space-10;
+$container-edge-s: dt.$space-5;
+$container-inner-2xl: dt.$layout-site-width - 2 * $container-edge-2xl;
+$container-inner-lg: dt.$layout-site-width-lg - 2 * $container-edge-lg;
+$container-inner-m: dt.$layout-site-width-m - 2 * $container-edge-m;
+$container-inner-s: dt.$layout-site-width-s - 2 * $container-edge-s;
+
+// Layout: Grid
+$grid-columns: dt.$layout-grid-columns; // Default columns in grid. Can be overridden in mixin.
+$grid-gutter-2xl: math.div(dt.$space-10, $container-inner-2xl) * 100%;
+$grid-gutter-lg: math.div(dt.$space-6, $container-inner-lg) * 100%;
+$grid-gutter-m: math.div(dt.$space-6, $container-inner-m) * 100%;
+$grid-gutter-s: math.div(dt.$space-5, $container-inner-s) * 100%;
+
+// Transition
+$trs-default: var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+// CMS-Section
+$section-default-padding-2xl: dt.$space-28;
+$section-default-padding: dt.$space-20;
+$section-default-padding-mobile: dt.$space-16;

package/base/abstracts/index.scss

@@ -0,0 +1,5 @@
+@forward './variables';
+@forward './functions';
+@forward './mixins';
+@forward './layers';
+@forward './resets';

package/base/base-v2.scss

@@ -0,0 +1,35 @@
+/*
+Base styling and resets for all web-components.
+This must be loaded before all other styles.
+*/
+
+@use '@energie360/design-tokens/dist/css/design-tokens.css';
+@use 'resets';
+@use 'input-resets';
+@use 'focus-handling';
+@use '@energie360/design-tokens/dist/fonts/fonts.css';
+
+html {
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+
+html,
+body {
+  min-height: 100vh;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+  font-family: var(--e-type-font-body), var(--e-type-font-fallback);
+  font-size: var(--e-type-size-300);
+  font-weight: var(--e-type-weight-weak);
+  line-height: var(--e-type-line-height-300);
+  color: var(--e-c-mono-900);
+}

package/base/custom-element-base.scss

@@ -0,0 +1,14 @@
+:host {
+  font-family: var(--e-type-font-body), var(--e-type-font-fallback);
+  font-size: var(--e-type-size-300);
+  font-weight: var(--e-type-weight-weak);
+  line-height: var(--e-type-line-height-300);
+  color: var(--e-c-mono-900);
+  box-sizing: border-box;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+}

package/base/index.scss

@@ -0,0 +1,5 @@
+@use './base';
+@use './resets';
+
+// TODO: _fonts.scss needs a variable '$host', which is set depedending on environment. figure it out how to get this here...
+// @import './fonts';

package/base/main.scss

@@ -0,0 +1,14 @@
+@use './resets';
+@use './html';
+@use './body';
+@use './focus-handling';
+@import '@energie360/design-tokens/dist/fonts/fonts.css';
+@import '@energie360/design-tokens/dist/css/design-tokens.css';
+
+e-button,
+e-icon-button,
+e-loader {
+  &:not(:defined) {
+    opacity: 0;
+  }
+}

package/dist/index.css

@@ -0,0 +1 @@
+.icon[data-v-fee8d5eb]{display:block;fill:var(--icon-fill-color, currentColor);width:var(--icon-width, 24px);height:var(--icon-height, 24px);transition:var(--icon-transition, none)}.icon.icon--custom-size[data-v-fee8d5eb]{width:100%;height:100%}.icon.icon--inline[data-v-fee8d5eb]{display:inline-block;vertical-align:baseline}@keyframes horizontal-a2f9c45c{0%{transform:translate(0)}20%{transform:translate(0);opacity:1;width:8px}50%{transform:translate(24px);opacity:.7;width:16px}80%{transform:translate(56px);opacity:1;width:8px}to{transform:translate(56px)}}@keyframes vertical-a2f9c45c{0%{transform:translateY(0)}50%{transform:translateY(0);opacity:1;height:8px}55%{transform:translateY(-12px);opacity:.7;height:16px}60%{transform:translateY(0);opacity:1;height:8px}70%{transform:translateY(-4px)}to{transform:translateY(0)}}.loader[data-v-a2f9c45c]{position:relative;display:inline-flex;--dot-color: var(--e-c-mono-900)}.loader>span[data-v-a2f9c45c]{display:block;width:8px;height:8px;border-radius:4px;background-color:var(--dot-color)}.loader.horizontal[data-v-a2f9c45c]{width:64px}.loader.horizontal>span[data-v-a2f9c45c]{transform:translate(0);animation-name:horizontal-a2f9c45c;animation-duration:1s;animation-direction:alternate;animation-timing-function:cubic-bezier(.4,.61,.61,.4);animation-iteration-count:infinite}.loader.vertical[data-v-a2f9c45c]{height:8px;width:8px}.loader.vertical>span[data-v-a2f9c45c]{transform:translateY(0);animation-name:vertical-a2f9c45c;animation-duration:2s;animation-timing-function:cubic-bezier(.47,.52,.165,1.005);animation-iteration-count:infinite}button[data-v-9f038231]{padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;font-family:inherit;font-size:inherit;background:none}.button[data-v-9f038231]{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.875rem;grid-gap:var(--e-space-2);border-radius:24px;transition:background-color var(--e-trs-duration-faster) var(--e-trs-easing-default),box-shadow var(--e-trs-duration-faster) var(--e-trs-easing-default),color var(--e-trs-duration-faster) var(--e-trs-easing-default),border var(--e-trs-duration-faster) var(--e-trs-easing-default);border-width:2px;border-style:solid;text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer;font-size:var(--e-type-size-200);line-height:var(--e-type-line-height-200);letter-spacing:.00625rem;font-weight:var(--e-type-weight-strong);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.button .icon[data-v-9f038231],.button e-icon[data-v-9f038231]{width:24px;height:24px}@media print{.button[data-v-9f038231]{font-size:calc(var(--e-type-size-200) * .75);line-height:calc(var(--e-type-line-height-200) * .75)}}.button .button__loader[data-v-9f038231]{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.button.disabled[data-v-9f038231],.button[data-v-9f038231]:disabled{pointer-events:none}.button[loading][data-v-9f038231]{cursor:default}.button .icon[data-v-9f038231],.button e-icon[data-v-9f038231]{--icon-transition: fill var(--e-trs-duration-faster) var(--e-trs-easing-default)}.button[data-v-9f038231]{background-color:var(--e-c-primary-01-700);color:var(--e-c-mono-00);border-color:var(--e-c-primary-01-700)}.button .icon[data-v-9f038231],.button e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-00)}.button .loader[data-v-9f038231],.button e-loader[data-v-9f038231]{--dot-color: var(--e-c-mono-00)}.button[data-v-9f038231]:hover{background-color:var(--e-c-secondary-01-900);border-color:var(--e-c-secondary-01-900)}.button[data-v-9f038231]:active,.button[loading][data-v-9f038231]{background-color:var(--e-c-secondary-01-700);border-color:var(--e-c-secondary-01-700)}.button.disabled[data-v-9f038231]:not([loading]),.button[data-v-9f038231]:disabled:not([loading]){background-color:var(--e-c-mono-500);border-color:var(--e-c-mono-500)}.button.outlined[data-v-9f038231]{background-color:transparent;color:var(--e-c-primary-01-700);border:2px solid var(--e-c-primary-01-700)}.button.outlined .icon[data-v-9f038231],.button.outlined e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-primary-01-700)}.button.outlined .loader[data-v-9f038231],.button.outlined e-loader[data-v-9f038231]{--dot-color: var(--e-c-primary-01-500)}.button.outlined[data-v-9f038231]:hover{background-color:var(--e-c-primary-01-50);border-color:var(--e-c-primary-01-200)}.button.outlined[data-v-9f038231]:active,.button.outlined[loading][data-v-9f038231]{background-color:transparent;border-color:var(--e-c-primary-01-500)}.button.outlined.disabled[data-v-9f038231]:not([loading]),.button.outlined[data-v-9f038231]:disabled:not([loading]){border-color:var(--e-c-mono-500);background-color:transparent;color:var(--e-c-mono-500)}.button.outlined.disabled:not([loading]) .icon[data-v-9f038231],.button.outlined.disabled:not([loading]) e-icon[data-v-9f038231],.button.outlined:disabled:not([loading]) .icon[data-v-9f038231],.button.outlined:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-500)}.button.plain[data-v-9f038231]{padding:var(--e-space-2) var(--e-space-3);color:var(--e-c-primary-01-700);background:none;border:0;text-decoration:none;grid-gap:var(--e-space-1)}.button.plain .icon[data-v-9f038231],.button.plain e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-primary-01-700)}.button.plain[data-v-9f038231]:hover{color:var(--e-c-secondary-01-900)}.button.plain:hover .icon[data-v-9f038231],.button.plain:hover e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-01-900)}.button.plain[data-v-9f038231]:active{color:var(--e-c-secondary-01-700)}.button.plain:active .icon[data-v-9f038231],.button.plain:active e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-01-700)}.button.plain.disabled[data-v-9f038231]:not([loading]),.button.plain[data-v-9f038231]:disabled:not([loading]){background:none;color:var(--e-c-mono-500)}.button.plain.disabled:not([loading]) .icon[data-v-9f038231],.button.plain.disabled:not([loading]) e-icon[data-v-9f038231],.button.plain:disabled:not([loading]) .icon[data-v-9f038231],.button.plain:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-500)}.button.plain[loading] .loader[data-v-9f038231],.button.plain[loading] e-loader[data-v-9f038231]{--dot-color: var(--e-c-secondary-01-700)}.button.plain-small[data-v-9f038231]{padding:var(--e-space-2) var(--e-space-3);color:var(--e-c-primary-01-700);background:none;border:0;text-decoration:none;grid-gap:var(--e-space-1);font-size:var(--e-type-size-100);line-height:var(--e-type-line-height-100);letter-spacing:.025rem;font-weight:var(--e-type-weight-strong);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.button.plain-small .icon[data-v-9f038231],.button.plain-small e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-primary-01-700)}.button.plain-small[data-v-9f038231]:hover{color:var(--e-c-secondary-01-900)}.button.plain-small:hover .icon[data-v-9f038231],.button.plain-small:hover e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-01-900)}.button.plain-small[data-v-9f038231]:active{color:var(--e-c-secondary-01-700)}.button.plain-small:active .icon[data-v-9f038231],.button.plain-small:active e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-01-700)}.button.plain-small.disabled[data-v-9f038231]:not([loading]),.button.plain-small[data-v-9f038231]:disabled:not([loading]){background:none;color:var(--e-c-mono-500)}.button.plain-small.disabled:not([loading]) .icon[data-v-9f038231],.button.plain-small.disabled:not([loading]) e-icon[data-v-9f038231],.button.plain-small:disabled:not([loading]) .icon[data-v-9f038231],.button.plain-small:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-500)}.button.plain-small[loading] .loader[data-v-9f038231],.button.plain-small[loading] e-loader[data-v-9f038231]{--dot-color: var(--e-c-secondary-01-700)}@media print{.button.plain-small[data-v-9f038231]{font-size:calc(var(--e-type-size-100) * .75);line-height:calc(var(--e-type-line-height-100) * .75)}}.button.filled-inverted[data-v-9f038231]{background-color:var(--e-c-mono-00);border-color:var(--e-c-mono-00);color:var(--e-c-primary-01-700)}.button.filled-inverted e-loader[data-v-9f038231]{--dot-color: var(--e-c-secondary-01-900)}.button.filled-inverted .icon[data-v-9f038231],.button.filled-inverted e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-primary-01-700)}.button.filled-inverted[data-v-9f038231]:hover{background-color:var(--e-c-primary-01-100);border-color:var(--e-c-primary-01-100);color:var(--e-c-secondary-01-700)}.button.filled-inverted:hover .icon[data-v-9f038231],.button.filled-inverted:hover e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-01-700)}.button.filled-inverted[data-v-9f038231]:active,.button.filled-inverted[loading][data-v-9f038231]{background-color:var(--e-c-primary-01-200);border-color:var(--e-c-primary-01-200)}.button.filled-inverted.disabled[data-v-9f038231]:not([loading]),.button.filled-inverted[data-v-9f038231]:disabled:not([loading]){color:var(--e-c-mono-700)}.button.filled-inverted.disabled:not([loading]) .icon[data-v-9f038231],.button.filled-inverted.disabled:not([loading]) e-icon[data-v-9f038231],.button.filled-inverted:disabled:not([loading]) .icon[data-v-9f038231],.button.filled-inverted:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-700)}.button.outlined-inverted[data-v-9f038231]{background-color:transparent;border-color:var(--e-c-mono-00);color:var(--e-c-mono-00)}.button.outlined-inverted .icon[data-v-9f038231],.button.outlined-inverted e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-00)}.button.outlined-inverted .loader[data-v-9f038231],.button.outlined-inverted e-loader[data-v-9f038231]{--dot-color: var(--e-c-mono-00)}.button.outlined-inverted[data-v-9f038231]:hover{background-color:rgba(var(--e-c-primary-01-900-rgb),.7);border-color:var(--e-c-primary-01-200)}.button.outlined-inverted[data-v-9f038231]:active,.button.outlined-inverted[loading][data-v-9f038231]{background-color:transparent;border-color:var(--e-c-primary-01-500)}.button.outlined-inverted.disabled[data-v-9f038231]:not([loading]),.button.outlined-inverted[data-v-9f038231]:disabled:not([loading]){color:var(--e-c-mono-500);border:2px solid var(--e-c-mono-500);background-color:transparent}.button.outlined-inverted.disabled:not([loading]) .icon[data-v-9f038231],.button.outlined-inverted.disabled:not([loading]) e-icon[data-v-9f038231],.button.outlined-inverted:disabled:not([loading]) .icon[data-v-9f038231],.button.outlined-inverted:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-500)}.button.secondary-outlined[data-v-9f038231]{background-color:transparent;color:var(--e-c-secondary-02-500);border:2px solid var(--e-c-secondary-02-500)}.button.secondary-outlined .icon[data-v-9f038231],.button.secondary-outlined e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-02-500)}.button.secondary-outlined .loader[data-v-9f038231],.button.secondary-outlined e-loader[data-v-9f038231]{--dot-color: var(--e-c-secondary-02-500)}.button.secondary-outlined[data-v-9f038231]:hover{background-color:var(--e-c-secondary-02-50);border-color:var(--e-c-secondary-02-200)}.button.secondary-outlined[data-v-9f038231]:active,.button.secondary-outlined[loading][data-v-9f038231]{background-color:transparent;border-color:var(--e-c-secondary-02-200)}.button.secondary-outlined.disabled[data-v-9f038231]:not([loading]),.button.secondary-outlined[data-v-9f038231]:disabled:not([loading]){border-color:var(--e-c-mono-500);background-color:transparent;color:var(--e-c-mono-500)}.button.secondary-outlined.disabled:not([loading]) .icon[data-v-9f038231],.button.secondary-outlined.disabled:not([loading]) e-icon[data-v-9f038231],.button.secondary-outlined:disabled:not([loading]) .icon[data-v-9f038231],.button.secondary-outlined:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-500)}.button.secondary-outlined-small[data-v-9f038231]{padding:var(--e-space-2_5) var(--e-space-6);background-color:transparent;color:var(--e-c-secondary-02-500);border:2px solid var(--e-c-secondary-02-500);font-size:var(--e-type-size-100);line-height:var(--e-type-line-height-100);letter-spacing:.025rem;font-weight:var(--e-type-weight-strong);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.button.secondary-outlined-small .icon[data-v-9f038231],.button.secondary-outlined-small e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-secondary-02-500)}.button.secondary-outlined-small .loader[data-v-9f038231],.button.secondary-outlined-small e-loader[data-v-9f038231]{--dot-color: var(--e-c-secondary-02-500)}.button.secondary-outlined-small[data-v-9f038231]:hover{background-color:var(--e-c-secondary-02-50);border-color:var(--e-c-secondary-02-200)}.button.secondary-outlined-small[data-v-9f038231]:active,.button.secondary-outlined-small[loading][data-v-9f038231]{background-color:transparent;border-color:var(--e-c-secondary-02-200)}.button.secondary-outlined-small.disabled[data-v-9f038231]:not([loading]),.button.secondary-outlined-small[data-v-9f038231]:disabled:not([loading]){border-color:var(--e-c-mono-500);background-color:transparent;color:var(--e-c-mono-500)}.button.secondary-outlined-small.disabled:not([loading]) .icon[data-v-9f038231],.button.secondary-outlined-small.disabled:not([loading]) e-icon[data-v-9f038231],.button.secondary-outlined-small:disabled:not([loading]) .icon[data-v-9f038231],.button.secondary-outlined-small:disabled:not([loading]) e-icon[data-v-9f038231]{--icon-fill-color: var(--e-c-mono-500)}@media print{.button.secondary-outlined-small[data-v-9f038231]{font-size:calc(var(--e-type-size-100) * .75);line-height:calc(var(--e-type-line-height-100) * .75)}}.button[loading][data-v-9f038231]{color:transparent}.button[loading] .icon[data-v-9f038231],.button[loading] e-icon[data-v-9f038231]{--icon-fill-color: transparent}[data-v-cc80eb1c]:host{font-family:var(--e-type-font-body),var(--e-type-font-fallback);font-size:var(--e-type-size-300);font-weight:var(--e-type-weight-weak);line-height:var(--e-type-line-height-300);color:var(--e-c-mono-900);box-sizing:border-box}[data-v-cc80eb1c],[data-v-cc80eb1c]:after,[data-v-cc80eb1c]:before{box-sizing:inherit}[data-v-cc80eb1c]{outline:none}[data-v-cc80eb1c]:focus-visible{outline-style:solid;outline-offset:4px;outline-color:#b3b3b3cc}[data-whatintent=mouse][data-v-cc80eb1c] *:focus{outline:none}body[data-v-cc80eb1c]{margin:0;min-height:100vh}h1[data-v-cc80eb1c],h2[data-v-cc80eb1c],h3[data-v-cc80eb1c],h4[data-v-cc80eb1c],h5[data-v-cc80eb1c],h6[data-v-cc80eb1c]{margin:0;text-wrap:balance}p[data-v-cc80eb1c],figure[data-v-cc80eb1c],blockquote[data-v-cc80eb1c]{margin:0}button[data-v-cc80eb1c]{padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;font-family:inherit;font-size:inherit;background:none}ul[data-v-cc80eb1c],ol[data-v-cc80eb1c]{list-style:none;padding:0;margin:0}dl[data-v-cc80eb1c],dt[data-v-cc80eb1c],dd[data-v-cc80eb1c]{margin:0}address[data-v-cc80eb1c]{font-style:normal}img[data-v-cc80eb1c],picture[data-v-cc80eb1c]{max-width:100%;display:block}fieldset[data-v-cc80eb1c]{padding:0;margin:0;border:0}.visually-hidden[data-v-cc80eb1c]{position:absolute;display:block;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}.icon-button[data-v-cc80eb1c]{position:relative;display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:100%;color:transparent;cursor:pointer}.icon-button .icon[data-v-cc80eb1c],.icon-button e-icon[data-v-cc80eb1c]{width:1.5rem;height:1.5rem}.icon-button .icon[data-v-cc80eb1c],.icon-button e-icon[data-v-cc80eb1c]{position:relative}.icon-button[data-v-cc80eb1c]:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:100%;border-width:2px;border-style:solid;transition:background-color var(--e-trs-duration-faster) var(--e-trs-easing-default),border-color var(--e-trs-duration-faster) var(--e-trs-easing-default),transform var(--e-trs-duration-faster) var(--e-trs-easing-default)}.icon-button[data-v-cc80eb1c]:hover:not(:disabled):before{transform:scale(1.05)}.icon-button[data-v-cc80eb1c]:active:before{transform:scale(1)}.icon-button[data-v-cc80eb1c]:disabled{cursor:default}.icon-button[data-v-cc80eb1c]:before{background-color:var(--e-c-primary-01-700);border-color:var(--e-c-primary-01-700)}.icon-button .icon[data-v-cc80eb1c],.icon-button e-icon[data-v-cc80eb1c]{--icon-fill-color: var(--e-c-mono-00)}.icon-button[data-v-cc80eb1c]:hover:before{background-color:var(--e-c-secondary-01-900);border-color:var(--e-c-secondary-01-900)}.icon-button[data-v-cc80eb1c]:active:before{background-color:var(--e-c-secondary-01-700);border-color:var(--e-c-secondary-01-700)}.icon-button[data-v-cc80eb1c]:disabled:before{background-color:var(--e-c-mono-500);border-color:var(--e-c-mono-500)}.icon-button.outlined[data-v-cc80eb1c]:before{background-color:transparent;border-color:var(--e-c-mono-500)}.icon-button.outlined .icon[data-v-cc80eb1c],.icon-button.outlined e-icon[data-v-cc80eb1c]{--icon-fill-color: var(--e-c-mono-900)}.icon-button.outlined[data-v-cc80eb1c]:hover:before{border-color:var(--e-c-primary-01-200)}.icon-button.outlined[data-v-cc80eb1c]:active:before{border-color:var(--e-c-primary-01-500)}.icon-button.outlined[data-v-cc80eb1c]:disabled:before{border-color:var(--e-c-mono-500)}.icon-button.outlined:disabled .icon[data-v-cc80eb1c],.icon-button.outlined:disabled e-icon[data-v-cc80eb1c]{--icon-fill-color: var(--e-c-mono-500)}.icon-button.plain[data-v-cc80eb1c]:before{background-color:transparent;border-color:transparent}.icon-button.plain .icon[data-v-cc80eb1c],.icon-button.plain e-icon[data-v-cc80eb1c]{--icon-fill-color: var(--e-c-primary-01-700)}.icon-button.plain[data-v-cc80eb1c]:hover:before{background-color:var(--e-c-primary-01-50);border-color:var(--e-c-primary-01-50)}.icon-button.plain[data-v-cc80eb1c]:active:before{background-color:var(--e-c-primary-01-100);border-color:var(--e-c-primary-01-100)}.icon-button.plain:disabled .icon[data-v-cc80eb1c],.icon-button.plain:disabled e-icon[data-v-cc80eb1c]{--icon-fill-color: var(--e-c-mono-500)}.icon-button.filled-inverted[data-v-cc80eb1c]:before{background-color:var(--e-c-mono-00);border-color:var(--e-c-mono-00)}.icon-button.filled-inverted .icon[data-v-cc80eb1c],.icon-button.filled-inverted e-icon[data-v-cc80eb1c]{--icon-fill-color: var(--e-c-primary-01-700)}.icon-button.filled-inverted[data-v-cc80eb1c]:hover:before{background-color:var(--e-c-primary-01-100);border-color:var(--e-c-primary-01-100)}.icon-button.filled-inverted:hover .icon[data-v-cc80eb1c],.icon-button.filled-inverted:hover e-icon[data-v-cc80eb1c]{--icon-fill-color: var(--e-c-secondary-01-700)}.icon-button.filled-inverted[data-v-cc80eb1c]:active:before{background-color:var(--e-c-primary-01-200);border-color:var(--e-c-primary-01-200)}.icon-button.filled-inverted[data-v-cc80eb1c]:disabled:before{background-color:var(--e-c-mono-500);border-color:var(--e-c-mono-500)}.icon-button.filled-inverted:disabled .icon[data-v-cc80eb1c],.icon-button.filled-inverted:disabled e-icon[data-v-cc80eb1c]{--icon-fill-color: var(--e-c-mono-700)}.icon-button.outlined-inverted[data-v-cc80eb1c]:before{background-color:transparent;border-color:var(--e-c-mono-00)}.icon-button.outlined-inverted .icon[data-v-cc80eb1c],.icon-button.outlined-inverted e-icon[data-v-cc80eb1c]{--icon-fill-color: var(--e-c-mono-00)}.icon-button.outlined-inverted[data-v-cc80eb1c]:hover:before{border-color:var(--e-c-primary-01-200)}.icon-button.outlined-inverted[data-v-cc80eb1c]:active:before{border-color:var(--e-c-primary-01-500)}.icon-button.outlined-inverted[data-v-cc80eb1c]:disabled:before{border-color:var(--e-c-mono-500)}.icon-button.outlined-inverted:disabled .icon[data-v-cc80eb1c],.icon-button.outlined-inverted:disabled e-icon[data-v-cc80eb1c]{--icon-fill-color: var(--e-c-mono-500)}.icon-button.plain-inverted[data-v-cc80eb1c]:before{background-color:transparent;border-color:transparent}.icon-button.plain-inverted .icon[data-v-cc80eb1c],.icon-button.plain-inverted e-icon[data-v-cc80eb1c]{--icon-fill-color: var(--e-c-mono-00)}.icon-button.plain-inverted[data-v-cc80eb1c]:hover:before{background-color:var(--e-c-secondary-01-700);border-color:var(--e-c-secondary-01-700)}.icon-button.plain-inverted[data-v-cc80eb1c]:active:before{background-color:var(--e-c-secondary-01-900);border-color:var(--e-c-secondary-01-900)}.icon-button.plain-inverted:disabled .icon[data-v-cc80eb1c],.icon-button.plain-inverted:disabled e-icon[data-v-cc80eb1c]{--icon-fill-color: var(--e-c-mono-500)}