@energie360/ui-library 0.0.4 → 0.1.1

package/wizard/wizard-intro/u-wizard-intro.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+  title?: string
+  description?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="wizard-intro">
+    <div class="left-col">
+      <div>
+        <div class="title-slot">
+          <slot name="title"
+            ><h1>{{ title }}</h1></slot
+          >
+        </div>
+
+        <div class="description-slot">
+          <slot name="description">
+            <p v-html="description" />
+          </slot>
+        </div>
+
+        <div class="cta-slot">
+          <slot name="cta"></slot>
+        </div>
+      </div>
+    </div>
+
+    <div class="right-col">
+      <slot name="contentRight"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use './wizard-intro.scss';
+</style>

package/wizard/wizard-intro/wizard-intro.scss

@@ -0,0 +1,39 @@
+@use '../../base/abstracts' as a;
+
+.wizard-intro {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: var(--e-space-10);
+
+  @include a.bp(lg) {
+    row-gap: var(--e-space-12);
+    grid-template-columns: 1fr;
+  }
+}
+
+.left-col {
+  display: flex;
+  align-items: center;
+}
+
+.title-slot {
+  @include a.type(1000, strong);
+
+  @include a.bp(lg) {
+    @include a.type(800, strong);
+  }
+}
+
+.description-slot {
+  margin-top: var(--e-space-6);
+
+  @include a.type(300);
+
+  @include a.bp(m) {
+    @include a.type(200);
+  }
+}
+
+.cta-slot {
+  margin-top: var(--e-space-16);
+}

package/wizard/wizard-layout/u-wizard-layout-block.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+interface Props {
+  columns: string | number
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="wizard-layout-block">
+    <div class="row row--centered">
+      <div :class="[`col-${columns}`]">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './wizard-layout-block.scss';
+</style>

package/wizard/wizard-layout/u-wizard-layout-element.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="wizard-layout-element">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './wizard-layout-element.scss';
+</style>

package/wizard/wizard-layout/u-wizard-layout.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="container">
+    <div class="wizard-layout">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './wizard-layout.scss';
+</style>

package/wizard/wizard-layout/wizard-layout-block.scss

@@ -0,0 +1,45 @@
+@use '../../base/abstracts' as a;
+@use '../../layout/grid/grid-row';
+@use '../../layout/grid/grid.mixin' as g;
+
+.wizard-layout-block + .wizard-layout-block {
+  margin-top: var(--e-wizard-block-bottom);
+}
+
+.wizard-layout-block {
+  .col-6 {
+    @include g.grid-col(6);
+
+    @include a.bp(xl) {
+      @include g.grid-col(8);
+    }
+
+    @include a.bp(m) {
+      @include g.grid-col(12);
+    }
+  }
+
+  .col-8 {
+    @include g.grid-col(8);
+
+    @include a.bp(m) {
+      @include g.grid-col(12);
+    }
+  }
+
+  .col-10 {
+    @include g.grid-col(10);
+
+    @include a.bp(lg) {
+      @include g.grid-col(8);
+    }
+
+    @include a.bp(m) {
+      @include g.grid-col(12);
+    }
+  }
+
+  .col-12 {
+    @include g.grid-col(12);
+  }
+}

package/wizard/wizard-layout/wizard-layout-element.scss

@@ -0,0 +1,3 @@
+.wizard-layout-element + .wizard-layout-element {
+  margin-top: var(--e-wizard-block-between);
+}

package/wizard/wizard-layout/wizard-layout.scss

@@ -0,0 +1,40 @@
+@use '@energie360/design-tokens/dist/scss/index' as dt;
+@use '../../base/abstracts' as a;
+@use '../../layout/container/container' as c;
+
+.container {
+  @include c.grid-container;
+
+  // TODO: Can we do this differently?
+  &.embedded {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.wizard-layout {
+  --e-wizard-wrapper-top: #{a.rem(dt.$space-28)};
+  --e-wizard-wrapper-bottom: #{a.rem(dt.$space-28)};
+  --e-wizard-block-bottom: #{a.rem(dt.$space-16)};
+  --e-wizard-block-between: #{a.rem(dt.$space-6)};
+
+  @include a.bp(lg) {
+    --e-wizard-wrapper-top: #{a.rem(dt.$space-12)};
+    --e-wizard-wrapper-bottom: #{a.rem(dt.$space-20)};
+    --e-wizard-block-bottom: #{a.rem(dt.$space-12)};
+  }
+
+  padding-top: var(--e-wizard-wrapper-top);
+  padding-bottom: var(--e-wizard-wrapper-bottom);
+
+  // Spacing rules
+  .wizard-layout-block + .wizard-layout-block {
+    margin-top: var(--e-wizard-block-bottom);
+  }
+
+  .wizard-layout-block {
+    .wizard-layout-element + .wizard-layout-element {
+      margin-top: var(--e-wizard-block-between);
+    }
+  }
+}

package/dist/index.css

@@ -1 +0,0 @@
-.icon[data-v-7772a60e]{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-7772a60e]{width:100%;height:100%}.icon.icon--inline[data-v-7772a60e]{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-c55bae2c]: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-c55bae2c],[data-v-c55bae2c]:after,[data-v-c55bae2c]:before{box-sizing:inherit}[data-v-c55bae2c]{outline:none}[data-v-c55bae2c]:focus-visible{outline-style:solid;outline-offset:4px;outline-color:#b3b3b3cc}[data-whatintent=mouse][data-v-c55bae2c] *:focus{outline:none}body[data-v-c55bae2c]{margin:0;min-height:100vh}h1[data-v-c55bae2c],h2[data-v-c55bae2c],h3[data-v-c55bae2c],h4[data-v-c55bae2c],h5[data-v-c55bae2c],h6[data-v-c55bae2c]{margin:0;text-wrap:balance}p[data-v-c55bae2c],figure[data-v-c55bae2c],blockquote[data-v-c55bae2c]{margin:0}button[data-v-c55bae2c]{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-c55bae2c],ol[data-v-c55bae2c]{list-style:none;padding:0;margin:0}dl[data-v-c55bae2c],dt[data-v-c55bae2c],dd[data-v-c55bae2c]{margin:0}address[data-v-c55bae2c]{font-style:normal}img[data-v-c55bae2c],picture[data-v-c55bae2c]{max-width:100%;display:block}fieldset[data-v-c55bae2c]{padding:0;margin:0;border:0}.visually-hidden[data-v-c55bae2c]{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-c55bae2c]{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-c55bae2c],.icon-button e-icon[data-v-c55bae2c]{width:1.5rem;height:1.5rem}.icon-button .icon[data-v-c55bae2c],.icon-button e-icon[data-v-c55bae2c]{position:relative}.icon-button[data-v-c55bae2c]: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-c55bae2c]:hover:not(:disabled):before{transform:scale(1.05)}.icon-button[data-v-c55bae2c]:active:before{transform:scale(1)}.icon-button[data-v-c55bae2c]:disabled{cursor:default}.icon-button[data-v-c55bae2c]:before{background-color:var(--e-c-primary-01-700);border-color:var(--e-c-primary-01-700)}.icon-button .icon[data-v-c55bae2c],.icon-button e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-00)}.icon-button[data-v-c55bae2c]:hover:before{background-color:var(--e-c-secondary-01-900);border-color:var(--e-c-secondary-01-900)}.icon-button[data-v-c55bae2c]:active:before{background-color:var(--e-c-secondary-01-700);border-color:var(--e-c-secondary-01-700)}.icon-button[data-v-c55bae2c]:disabled:before{background-color:var(--e-c-mono-500);border-color:var(--e-c-mono-500)}.icon-button.outlined[data-v-c55bae2c]:before{background-color:transparent;border-color:var(--e-c-mono-500)}.icon-button.outlined .icon[data-v-c55bae2c],.icon-button.outlined e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-900)}.icon-button.outlined[data-v-c55bae2c]:hover:before{border-color:var(--e-c-primary-01-200)}.icon-button.outlined[data-v-c55bae2c]:active:before{border-color:var(--e-c-primary-01-500)}.icon-button.outlined[data-v-c55bae2c]:disabled:before{border-color:var(--e-c-mono-500)}.icon-button.outlined:disabled .icon[data-v-c55bae2c],.icon-button.outlined:disabled e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-500)}.icon-button.plain[data-v-c55bae2c]:before{background-color:transparent;border-color:transparent}.icon-button.plain .icon[data-v-c55bae2c],.icon-button.plain e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-primary-01-700)}.icon-button.plain[data-v-c55bae2c]:hover:before{background-color:var(--e-c-primary-01-50);border-color:var(--e-c-primary-01-50)}.icon-button.plain[data-v-c55bae2c]: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-c55bae2c],.icon-button.plain:disabled e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-500)}.icon-button.filled-inverted[data-v-c55bae2c]:before{background-color:var(--e-c-mono-00);border-color:var(--e-c-mono-00)}.icon-button.filled-inverted .icon[data-v-c55bae2c],.icon-button.filled-inverted e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-primary-01-700)}.icon-button.filled-inverted[data-v-c55bae2c]: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-c55bae2c],.icon-button.filled-inverted:hover e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-secondary-01-700)}.icon-button.filled-inverted[data-v-c55bae2c]:active:before{background-color:var(--e-c-primary-01-200);border-color:var(--e-c-primary-01-200)}.icon-button.filled-inverted[data-v-c55bae2c]:disabled:before{background-color:var(--e-c-mono-500);border-color:var(--e-c-mono-500)}.icon-button.filled-inverted:disabled .icon[data-v-c55bae2c],.icon-button.filled-inverted:disabled e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-700)}.icon-button.outlined-inverted[data-v-c55bae2c]:before{background-color:transparent;border-color:var(--e-c-mono-00)}.icon-button.outlined-inverted .icon[data-v-c55bae2c],.icon-button.outlined-inverted e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-00)}.icon-button.outlined-inverted[data-v-c55bae2c]:hover:before{border-color:var(--e-c-primary-01-200)}.icon-button.outlined-inverted[data-v-c55bae2c]:active:before{border-color:var(--e-c-primary-01-500)}.icon-button.outlined-inverted[data-v-c55bae2c]:disabled:before{border-color:var(--e-c-mono-500)}.icon-button.outlined-inverted:disabled .icon[data-v-c55bae2c],.icon-button.outlined-inverted:disabled e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-500)}.icon-button.plain-inverted[data-v-c55bae2c]:before{background-color:transparent;border-color:transparent}.icon-button.plain-inverted .icon[data-v-c55bae2c],.icon-button.plain-inverted e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-00)}.icon-button.plain-inverted[data-v-c55bae2c]:hover:before{background-color:var(--e-c-secondary-01-700);border-color:var(--e-c-secondary-01-700)}.icon-button.plain-inverted[data-v-c55bae2c]: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-c55bae2c],.icon-button.plain-inverted:disabled e-icon[data-v-c55bae2c]{--icon-fill-color: var(--e-c-mono-500)}