@preply/ds-web-lib 0.98.0 → 0.99.0

package/dist/assets/ButtonBase.css

@@ -0,0 +1,1284 @@
+/* AUTO GENERATED @Fri Aug 23 2024 08:49:35 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED @Fri Aug 23 2024 08:49:34 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED @Fri Aug 23 2024 08:49:38 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED @Fri Aug 23 2024 08:49:38 GMT+0000 (Coordinated Universal Time) */
+._button-width--width-full_1lq7z_5 {
+  width: 100%;
+}
+._button-width--width-auto_1lq7z_8 {
+  width: auto;
+}
+@media (min-width: 400px) {
+  ._button-width--narrow-l--width-full_1lq7z_12 {
+    width: 100%;
+  }
+  ._button-width--narrow-l--width-auto_1lq7z_15 {
+    width: auto;
+  }
+}
+@media (min-width: 700px) {
+  ._button-width--medium-s--width-full_1lq7z_20 {
+    width: 100%;
+  }
+  ._button-width--medium-s--width-auto_1lq7z_23 {
+    width: auto;
+  }
+}
+@media (min-width: 880px) {
+  ._button-width--medium-l--width-full_1lq7z_28 {
+    width: 100%;
+  }
+  ._button-width--medium-l--width-auto_1lq7z_31 {
+    width: auto;
+  }
+}
+@media (min-width: 1200px) {
+  ._button-width--wide-s--width-full_1lq7z_36 {
+    width: 100%;
+  }
+  ._button-width--wide-s--width-auto_1lq7z_39 {
+    width: auto;
+  }
+}
+@media (min-width: 1900px) {
+  ._button-width--wide-l--width-full_1lq7z_44 {
+    width: 100%;
+  }
+  ._button-width--wide-l--width-auto_1lq7z_47 {
+    width: auto;
+  }
+}
+._ButtonBase_1lq7z_51 {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-size: var(--8d63e4);
+  line-height: var(--d4313c);
+  color: var(--aface6);
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  font-weight: var(--d61910);
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: transparent;
+  border-radius: var(--8d5131);
+  border-width: var(--0b1b71);
+  border-style: solid;
+  border-color: transparent;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+}
+._ButtonBase--content_1lq7z_76 {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: var(--0aee7b);
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  vertical-align: baseline;
+}
+._ButtonBase--is-icon-button_1lq7z_83 ._ButtonBase--content_1lq7z_76 svg {
+  width: var(--f02c4e);
+  height: var(--f02c4e);
+}
+._ButtonBase--is-icon-button_1lq7z_83 ._ButtonBase--content_1lq7z_76 svg path {
+  fill: currentColor;
+}
+._ButtonBase--busy_1lq7z_90 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+._ButtonBase_1lq7z_51[disabled],
+._ButtonBase_1lq7z_51[disabled]:hover {
+  cursor: not-allowed;
+  color: var(--a8b89c);
+  background-color: var(--04daeb);
+  border-color: var(--e05289);
+}
+._ButtonBase_1lq7z_51:focus-visible {
+  outline-style: solid;
+  outline-color: var(--603ec6);
+  outline-width: var(--99d31f);
+  outline-offset: var(--c0b12c);
+}
+._ButtonBase--is-busy_1lq7z_113 {
+  cursor: default;
+  pointer-events: none;
+}
+._ButtonBase--is-busy_1lq7z_113 ._ButtonBase--content_1lq7z_76 {
+  visibility: hidden;
+}
+._ButtonBase--width-full_1lq7z_120 {
+  width: 100%;
+}
+._ButtonBase--width-auto_1lq7z_123 {
+  width: auto;
+}
+@media (min-width: 400px) {
+  ._ButtonBase--narrow-l--width-full_1lq7z_127 {
+    width: 100%;
+  }
+  ._ButtonBase--narrow-l--width-auto_1lq7z_130 {
+    width: auto;
+  }
+}
+@media (min-width: 700px) {
+  ._ButtonBase--medium-s--width-full_1lq7z_135 {
+    width: 100%;
+  }
+  ._ButtonBase--medium-s--width-auto_1lq7z_138 {
+    width: auto;
+  }
+}
+@media (min-width: 880px) {
+  ._ButtonBase--medium-l--width-full_1lq7z_143 {
+    width: 100%;
+  }
+  ._ButtonBase--medium-l--width-auto_1lq7z_146 {
+    width: auto;
+  }
+}
+@media (min-width: 1200px) {
+  ._ButtonBase--wide-s--width-full_1lq7z_151 {
+    width: 100%;
+  }
+  ._ButtonBase--wide-s--width-auto_1lq7z_154 {
+    width: auto;
+  }
+}
+@media (min-width: 1900px) {
+  ._ButtonBase--wide-l--width-full_1lq7z_159 {
+    width: 100%;
+  }
+  ._ButtonBase--wide-l--width-auto_1lq7z_162 {
+    width: auto;
+  }
+}
+._ButtonBase--size-xs_1lq7z_166 {
+  min-height: var(--50cc65);
+  padding-top: calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));
+  padding-bottom: calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));
+  padding-left: var(--29b033);
+  padding-right: var(--29b033);
+  font-size: var(--357dd0);
+  letter-spacing: var(--027f88);
+}
+._ButtonBase--is-icon-button-size-xs_1lq7z_175 {
+  width: var(--50cc65);
+  height: var(--50cc65);
+  padding: 0;
+}
+._ButtonBase--size-s_1lq7z_180 {
+  min-height: var(--2f2e00);
+  padding-top: calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));
+  padding-bottom: calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));
+  padding-left: var(--65766b);
+  padding-right: var(--65766b);
+  font-size: var(--b47a67);
+  letter-spacing: var(--fc5c61);
+}
+._ButtonBase--is-icon-button-size-s_1lq7z_189 {
+  width: var(--2f2e00);
+  height: var(--2f2e00);
+  padding: 0;
+}
+._ButtonBase--size-m_1lq7z_194 {
+  min-height: var(--bcfcbc);
+  padding-top: calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));
+  padding-bottom: calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));
+  padding-left: var(--0f2d7e);
+  padding-right: var(--0f2d7e);
+  font-size: var(--89a358);
+  letter-spacing: var(--2e1239);
+}
+._ButtonBase--is-icon-button-size-m_1lq7z_203 {
+  width: var(--bcfcbc);
+  height: var(--bcfcbc);
+  padding: 0;
+}
+._ButtonBase--size-l_1lq7z_208 {
+  min-height: var(--26156f);
+  padding-top: calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));
+  padding-bottom: calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));
+  padding-left: var(--b1c76a);
+  padding-right: var(--b1c76a);
+  font-size: var(--a899be);
+  letter-spacing: var(--c04d5d);
+}
+._ButtonBase--is-icon-button-size-l_1lq7z_217 {
+  width: var(--26156f);
+  height: var(--26156f);
+  padding: 0;
+}
+._ButtonBase--size-xl_1lq7z_222 {
+  min-height: var(--d6bfc9);
+  padding-top: calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));
+  padding-bottom: calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));
+  padding-left: var(--88eefe);
+  padding-right: var(--88eefe);
+  font-size: var(--f7be07);
+  letter-spacing: var(--a34be4);
+}
+._ButtonBase--is-icon-button-size-xl_1lq7z_231 {
+  width: var(--d6bfc9);
+  height: var(--d6bfc9);
+  padding: 0;
+}
+._ButtonBase--size-large_1lq7z_236 {
+  min-height: var(--3d8452);
+  padding-top: calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));
+  padding-bottom: calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));
+  padding-left: var(--79f043);
+  padding-right: var(--79f043);
+  font-size: var(--56d354);
+  letter-spacing: var(--dc9bea);
+}
+._ButtonBase--is-icon-button-size-large_1lq7z_245 {
+  width: var(--3d8452);
+  height: var(--3d8452);
+  padding: 0;
+}
+._ButtonBase--size-medium_1lq7z_250 {
+  min-height: var(--c82a41);
+  padding-top: calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));
+  padding-bottom: calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));
+  padding-left: var(--aebd97);
+  padding-right: var(--aebd97);
+  font-size: var(--c84e20);
+  letter-spacing: var(--ad1bd2);
+}
+._ButtonBase--is-icon-button-size-medium_1lq7z_259 {
+  width: var(--c82a41);
+  height: var(--c82a41);
+  padding: 0;
+}
+._ButtonBase--size-small_1lq7z_264 {
+  min-height: var(--5eca09);
+  padding-top: calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));
+  padding-bottom: calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));
+  padding-left: var(--d17b90);
+  padding-right: var(--d17b90);
+  font-size: var(--f20194);
+  letter-spacing: var(--9663af);
+}
+._ButtonBase--is-icon-button-size-small_1lq7z_273 {
+  width: var(--5eca09);
+  height: var(--5eca09);
+  padding: 0;
+}
+@media (min-width: 400px) {
+  ._ButtonBase--narrow-l--size-xs_1lq7z_279 {
+    min-height: var(--50cc65);
+    padding-top: calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));
+    padding-left: var(--29b033);
+    padding-right: var(--29b033);
+    font-size: var(--357dd0);
+    letter-spacing: var(--027f88);
+  }
+  ._ButtonBase--narrow-l--is-icon-button-size-xs_1lq7z_288 {
+    width: var(--50cc65);
+    height: var(--50cc65);
+    padding: 0;
+  }
+  ._ButtonBase--narrow-l--size-s_1lq7z_293 {
+    min-height: var(--2f2e00);
+    padding-top: calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));
+    padding-left: var(--65766b);
+    padding-right: var(--65766b);
+    font-size: var(--b47a67);
+    letter-spacing: var(--fc5c61);
+  }
+  ._ButtonBase--narrow-l--is-icon-button-size-s_1lq7z_302 {
+    width: var(--2f2e00);
+    height: var(--2f2e00);
+    padding: 0;
+  }
+  ._ButtonBase--narrow-l--size-m_1lq7z_307 {
+    min-height: var(--bcfcbc);
+    padding-top: calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));
+    padding-left: var(--0f2d7e);
+    padding-right: var(--0f2d7e);
+    font-size: var(--89a358);
+    letter-spacing: var(--2e1239);
+  }
+  ._ButtonBase--narrow-l--is-icon-button-size-m_1lq7z_316 {
+    width: var(--bcfcbc);
+    height: var(--bcfcbc);
+    padding: 0;
+  }
+  ._ButtonBase--narrow-l--size-l_1lq7z_321 {
+    min-height: var(--26156f);
+    padding-top: calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));
+    padding-left: var(--b1c76a);
+    padding-right: var(--b1c76a);
+    font-size: var(--a899be);
+    letter-spacing: var(--c04d5d);
+  }
+  ._ButtonBase--narrow-l--is-icon-button-size-l_1lq7z_330 {
+    width: var(--26156f);
+    height: var(--26156f);
+    padding: 0;
+  }
+  ._ButtonBase--narrow-l--size-xl_1lq7z_335 {
+    min-height: var(--d6bfc9);
+    padding-top: calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));
+    padding-left: var(--88eefe);
+    padding-right: var(--88eefe);
+    font-size: var(--f7be07);
+    letter-spacing: var(--a34be4);
+  }
+  ._ButtonBase--narrow-l--is-icon-button-size-xl_1lq7z_344 {
+    width: var(--d6bfc9);
+    height: var(--d6bfc9);
+    padding: 0;
+  }
+  ._ButtonBase--narrow-l--size-large_1lq7z_349 {
+    min-height: var(--3d8452);
+    padding-top: calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));
+    padding-left: var(--79f043);
+    padding-right: var(--79f043);
+    font-size: var(--56d354);
+    letter-spacing: var(--dc9bea);
+  }
+  ._ButtonBase--narrow-l--is-icon-button-size-large_1lq7z_358 {
+    width: var(--3d8452);
+    height: var(--3d8452);
+    padding: 0;
+  }
+  ._ButtonBase--narrow-l--size-medium_1lq7z_363 {
+    min-height: var(--c82a41);
+    padding-top: calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));
+    padding-left: var(--aebd97);
+    padding-right: var(--aebd97);
+    font-size: var(--c84e20);
+    letter-spacing: var(--ad1bd2);
+  }
+  ._ButtonBase--narrow-l--is-icon-button-size-medium_1lq7z_372 {
+    width: var(--c82a41);
+    height: var(--c82a41);
+    padding: 0;
+  }
+  ._ButtonBase--narrow-l--size-small_1lq7z_377 {
+    min-height: var(--5eca09);
+    padding-top: calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));
+    padding-left: var(--d17b90);
+    padding-right: var(--d17b90);
+    font-size: var(--f20194);
+    letter-spacing: var(--9663af);
+  }
+  ._ButtonBase--narrow-l--is-icon-button-size-small_1lq7z_386 {
+    width: var(--5eca09);
+    height: var(--5eca09);
+    padding: 0;
+  }
+}
+@media (min-width: 700px) {
+  ._ButtonBase--medium-s--size-xs_1lq7z_393 {
+    min-height: var(--50cc65);
+    padding-top: calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));
+    padding-left: var(--29b033);
+    padding-right: var(--29b033);
+    font-size: var(--357dd0);
+    letter-spacing: var(--027f88);
+  }
+  ._ButtonBase--medium-s--is-icon-button-size-xs_1lq7z_402 {
+    width: var(--50cc65);
+    height: var(--50cc65);
+    padding: 0;
+  }
+  ._ButtonBase--medium-s--size-s_1lq7z_407 {
+    min-height: var(--2f2e00);
+    padding-top: calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));
+    padding-left: var(--65766b);
+    padding-right: var(--65766b);
+    font-size: var(--b47a67);
+    letter-spacing: var(--fc5c61);
+  }
+  ._ButtonBase--medium-s--is-icon-button-size-s_1lq7z_416 {
+    width: var(--2f2e00);
+    height: var(--2f2e00);
+    padding: 0;
+  }
+  ._ButtonBase--medium-s--size-m_1lq7z_421 {
+    min-height: var(--bcfcbc);
+    padding-top: calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));
+    padding-left: var(--0f2d7e);
+    padding-right: var(--0f2d7e);
+    font-size: var(--89a358);
+    letter-spacing: var(--2e1239);
+  }
+  ._ButtonBase--medium-s--is-icon-button-size-m_1lq7z_430 {
+    width: var(--bcfcbc);
+    height: var(--bcfcbc);
+    padding: 0;
+  }
+  ._ButtonBase--medium-s--size-l_1lq7z_435 {
+    min-height: var(--26156f);
+    padding-top: calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));
+    padding-left: var(--b1c76a);
+    padding-right: var(--b1c76a);
+    font-size: var(--a899be);
+    letter-spacing: var(--c04d5d);
+  }
+  ._ButtonBase--medium-s--is-icon-button-size-l_1lq7z_444 {
+    width: var(--26156f);
+    height: var(--26156f);
+    padding: 0;
+  }
+  ._ButtonBase--medium-s--size-xl_1lq7z_449 {
+    min-height: var(--d6bfc9);
+    padding-top: calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));
+    padding-left: var(--88eefe);
+    padding-right: var(--88eefe);
+    font-size: var(--f7be07);
+    letter-spacing: var(--a34be4);
+  }
+  ._ButtonBase--medium-s--is-icon-button-size-xl_1lq7z_458 {
+    width: var(--d6bfc9);
+    height: var(--d6bfc9);
+    padding: 0;
+  }
+  ._ButtonBase--medium-s--size-large_1lq7z_463 {
+    min-height: var(--3d8452);
+    padding-top: calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));
+    padding-left: var(--79f043);
+    padding-right: var(--79f043);
+    font-size: var(--56d354);
+    letter-spacing: var(--dc9bea);
+  }
+  ._ButtonBase--medium-s--is-icon-button-size-large_1lq7z_472 {
+    width: var(--3d8452);
+    height: var(--3d8452);
+    padding: 0;
+  }
+  ._ButtonBase--medium-s--size-medium_1lq7z_477 {
+    min-height: var(--c82a41);
+    padding-top: calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));
+    padding-left: var(--aebd97);
+    padding-right: var(--aebd97);
+    font-size: var(--c84e20);
+    letter-spacing: var(--ad1bd2);
+  }
+  ._ButtonBase--medium-s--is-icon-button-size-medium_1lq7z_486 {
+    width: var(--c82a41);
+    height: var(--c82a41);
+    padding: 0;
+  }
+  ._ButtonBase--medium-s--size-small_1lq7z_491 {
+    min-height: var(--5eca09);
+    padding-top: calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));
+    padding-left: var(--d17b90);
+    padding-right: var(--d17b90);
+    font-size: var(--f20194);
+    letter-spacing: var(--9663af);
+  }
+  ._ButtonBase--medium-s--is-icon-button-size-small_1lq7z_500 {
+    width: var(--5eca09);
+    height: var(--5eca09);
+    padding: 0;
+  }
+}
+@media (min-width: 880px) {
+  ._ButtonBase--medium-l--size-xs_1lq7z_507 {
+    min-height: var(--50cc65);
+    padding-top: calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));
+    padding-left: var(--29b033);
+    padding-right: var(--29b033);
+    font-size: var(--357dd0);
+    letter-spacing: var(--027f88);
+  }
+  ._ButtonBase--medium-l--is-icon-button-size-xs_1lq7z_516 {
+    width: var(--50cc65);
+    height: var(--50cc65);
+    padding: 0;
+  }
+  ._ButtonBase--medium-l--size-s_1lq7z_521 {
+    min-height: var(--2f2e00);
+    padding-top: calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));
+    padding-left: var(--65766b);
+    padding-right: var(--65766b);
+    font-size: var(--b47a67);
+    letter-spacing: var(--fc5c61);
+  }
+  ._ButtonBase--medium-l--is-icon-button-size-s_1lq7z_530 {
+    width: var(--2f2e00);
+    height: var(--2f2e00);
+    padding: 0;
+  }
+  ._ButtonBase--medium-l--size-m_1lq7z_535 {
+    min-height: var(--bcfcbc);
+    padding-top: calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));
+    padding-left: var(--0f2d7e);
+    padding-right: var(--0f2d7e);
+    font-size: var(--89a358);
+    letter-spacing: var(--2e1239);
+  }
+  ._ButtonBase--medium-l--is-icon-button-size-m_1lq7z_544 {
+    width: var(--bcfcbc);
+    height: var(--bcfcbc);
+    padding: 0;
+  }
+  ._ButtonBase--medium-l--size-l_1lq7z_549 {
+    min-height: var(--26156f);
+    padding-top: calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));
+    padding-left: var(--b1c76a);
+    padding-right: var(--b1c76a);
+    font-size: var(--a899be);
+    letter-spacing: var(--c04d5d);
+  }
+  ._ButtonBase--medium-l--is-icon-button-size-l_1lq7z_558 {
+    width: var(--26156f);
+    height: var(--26156f);
+    padding: 0;
+  }
+  ._ButtonBase--medium-l--size-xl_1lq7z_563 {
+    min-height: var(--d6bfc9);
+    padding-top: calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));
+    padding-left: var(--88eefe);
+    padding-right: var(--88eefe);
+    font-size: var(--f7be07);
+    letter-spacing: var(--a34be4);
+  }
+  ._ButtonBase--medium-l--is-icon-button-size-xl_1lq7z_572 {
+    width: var(--d6bfc9);
+    height: var(--d6bfc9);
+    padding: 0;
+  }
+  ._ButtonBase--medium-l--size-large_1lq7z_577 {
+    min-height: var(--3d8452);
+    padding-top: calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));
+    padding-left: var(--79f043);
+    padding-right: var(--79f043);
+    font-size: var(--56d354);
+    letter-spacing: var(--dc9bea);
+  }
+  ._ButtonBase--medium-l--is-icon-button-size-large_1lq7z_586 {
+    width: var(--3d8452);
+    height: var(--3d8452);
+    padding: 0;
+  }
+  ._ButtonBase--medium-l--size-medium_1lq7z_591 {
+    min-height: var(--c82a41);
+    padding-top: calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));
+    padding-left: var(--aebd97);
+    padding-right: var(--aebd97);
+    font-size: var(--c84e20);
+    letter-spacing: var(--ad1bd2);
+  }
+  ._ButtonBase--medium-l--is-icon-button-size-medium_1lq7z_600 {
+    width: var(--c82a41);
+    height: var(--c82a41);
+    padding: 0;
+  }
+  ._ButtonBase--medium-l--size-small_1lq7z_605 {
+    min-height: var(--5eca09);
+    padding-top: calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));
+    padding-left: var(--d17b90);
+    padding-right: var(--d17b90);
+    font-size: var(--f20194);
+    letter-spacing: var(--9663af);
+  }
+  ._ButtonBase--medium-l--is-icon-button-size-small_1lq7z_614 {
+    width: var(--5eca09);
+    height: var(--5eca09);
+    padding: 0;
+  }
+}
+@media (min-width: 1200px) {
+  ._ButtonBase--wide-s--size-xs_1lq7z_621 {
+    min-height: var(--50cc65);
+    padding-top: calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));
+    padding-left: var(--29b033);
+    padding-right: var(--29b033);
+    font-size: var(--357dd0);
+    letter-spacing: var(--027f88);
+  }
+  ._ButtonBase--wide-s--is-icon-button-size-xs_1lq7z_630 {
+    width: var(--50cc65);
+    height: var(--50cc65);
+    padding: 0;
+  }
+  ._ButtonBase--wide-s--size-s_1lq7z_635 {
+    min-height: var(--2f2e00);
+    padding-top: calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));
+    padding-left: var(--65766b);
+    padding-right: var(--65766b);
+    font-size: var(--b47a67);
+    letter-spacing: var(--fc5c61);
+  }
+  ._ButtonBase--wide-s--is-icon-button-size-s_1lq7z_644 {
+    width: var(--2f2e00);
+    height: var(--2f2e00);
+    padding: 0;
+  }
+  ._ButtonBase--wide-s--size-m_1lq7z_649 {
+    min-height: var(--bcfcbc);
+    padding-top: calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));
+    padding-left: var(--0f2d7e);
+    padding-right: var(--0f2d7e);
+    font-size: var(--89a358);
+    letter-spacing: var(--2e1239);
+  }
+  ._ButtonBase--wide-s--is-icon-button-size-m_1lq7z_658 {
+    width: var(--bcfcbc);
+    height: var(--bcfcbc);
+    padding: 0;
+  }
+  ._ButtonBase--wide-s--size-l_1lq7z_663 {
+    min-height: var(--26156f);
+    padding-top: calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));
+    padding-left: var(--b1c76a);
+    padding-right: var(--b1c76a);
+    font-size: var(--a899be);
+    letter-spacing: var(--c04d5d);
+  }
+  ._ButtonBase--wide-s--is-icon-button-size-l_1lq7z_672 {
+    width: var(--26156f);
+    height: var(--26156f);
+    padding: 0;
+  }
+  ._ButtonBase--wide-s--size-xl_1lq7z_677 {
+    min-height: var(--d6bfc9);
+    padding-top: calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));
+    padding-left: var(--88eefe);
+    padding-right: var(--88eefe);
+    font-size: var(--f7be07);
+    letter-spacing: var(--a34be4);
+  }
+  ._ButtonBase--wide-s--is-icon-button-size-xl_1lq7z_686 {
+    width: var(--d6bfc9);
+    height: var(--d6bfc9);
+    padding: 0;
+  }
+  ._ButtonBase--wide-s--size-large_1lq7z_691 {
+    min-height: var(--3d8452);
+    padding-top: calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));
+    padding-left: var(--79f043);
+    padding-right: var(--79f043);
+    font-size: var(--56d354);
+    letter-spacing: var(--dc9bea);
+  }
+  ._ButtonBase--wide-s--is-icon-button-size-large_1lq7z_700 {
+    width: var(--3d8452);
+    height: var(--3d8452);
+    padding: 0;
+  }
+  ._ButtonBase--wide-s--size-medium_1lq7z_705 {
+    min-height: var(--c82a41);
+    padding-top: calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));
+    padding-left: var(--aebd97);
+    padding-right: var(--aebd97);
+    font-size: var(--c84e20);
+    letter-spacing: var(--ad1bd2);
+  }
+  ._ButtonBase--wide-s--is-icon-button-size-medium_1lq7z_714 {
+    width: var(--c82a41);
+    height: var(--c82a41);
+    padding: 0;
+  }
+  ._ButtonBase--wide-s--size-small_1lq7z_719 {
+    min-height: var(--5eca09);
+    padding-top: calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));
+    padding-left: var(--d17b90);
+    padding-right: var(--d17b90);
+    font-size: var(--f20194);
+    letter-spacing: var(--9663af);
+  }
+  ._ButtonBase--wide-s--is-icon-button-size-small_1lq7z_728 {
+    width: var(--5eca09);
+    height: var(--5eca09);
+    padding: 0;
+  }
+}
+@media (min-width: 1900px) {
+  ._ButtonBase--wide-l--size-xs_1lq7z_735 {
+    min-height: var(--50cc65);
+    padding-top: calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--50cc65) - var(--d4313c) * var(--357dd0)) / 2 - var(--0b1b71));
+    padding-left: var(--29b033);
+    padding-right: var(--29b033);
+    font-size: var(--357dd0);
+    letter-spacing: var(--027f88);
+  }
+  ._ButtonBase--wide-l--is-icon-button-size-xs_1lq7z_744 {
+    width: var(--50cc65);
+    height: var(--50cc65);
+    padding: 0;
+  }
+  ._ButtonBase--wide-l--size-s_1lq7z_749 {
+    min-height: var(--2f2e00);
+    padding-top: calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--2f2e00) - var(--d4313c) * var(--b47a67)) / 2 - var(--0b1b71));
+    padding-left: var(--65766b);
+    padding-right: var(--65766b);
+    font-size: var(--b47a67);
+    letter-spacing: var(--fc5c61);
+  }
+  ._ButtonBase--wide-l--is-icon-button-size-s_1lq7z_758 {
+    width: var(--2f2e00);
+    height: var(--2f2e00);
+    padding: 0;
+  }
+  ._ButtonBase--wide-l--size-m_1lq7z_763 {
+    min-height: var(--bcfcbc);
+    padding-top: calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--bcfcbc) - var(--d4313c) * var(--89a358)) / 2 - var(--0b1b71));
+    padding-left: var(--0f2d7e);
+    padding-right: var(--0f2d7e);
+    font-size: var(--89a358);
+    letter-spacing: var(--2e1239);
+  }
+  ._ButtonBase--wide-l--is-icon-button-size-m_1lq7z_772 {
+    width: var(--bcfcbc);
+    height: var(--bcfcbc);
+    padding: 0;
+  }
+  ._ButtonBase--wide-l--size-l_1lq7z_777 {
+    min-height: var(--26156f);
+    padding-top: calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--26156f) - var(--d4313c) * var(--a899be)) / 2 - var(--0b1b71));
+    padding-left: var(--b1c76a);
+    padding-right: var(--b1c76a);
+    font-size: var(--a899be);
+    letter-spacing: var(--c04d5d);
+  }
+  ._ButtonBase--wide-l--is-icon-button-size-l_1lq7z_786 {
+    width: var(--26156f);
+    height: var(--26156f);
+    padding: 0;
+  }
+  ._ButtonBase--wide-l--size-xl_1lq7z_791 {
+    min-height: var(--d6bfc9);
+    padding-top: calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--d6bfc9) - var(--d4313c) * var(--f7be07)) / 2 - var(--0b1b71));
+    padding-left: var(--88eefe);
+    padding-right: var(--88eefe);
+    font-size: var(--f7be07);
+    letter-spacing: var(--a34be4);
+  }
+  ._ButtonBase--wide-l--is-icon-button-size-xl_1lq7z_800 {
+    width: var(--d6bfc9);
+    height: var(--d6bfc9);
+    padding: 0;
+  }
+  ._ButtonBase--wide-l--size-large_1lq7z_805 {
+    min-height: var(--3d8452);
+    padding-top: calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--3d8452) - var(--d4313c) * var(--56d354)) / 2 - var(--0b1b71));
+    padding-left: var(--79f043);
+    padding-right: var(--79f043);
+    font-size: var(--56d354);
+    letter-spacing: var(--dc9bea);
+  }
+  ._ButtonBase--wide-l--is-icon-button-size-large_1lq7z_814 {
+    width: var(--3d8452);
+    height: var(--3d8452);
+    padding: 0;
+  }
+  ._ButtonBase--wide-l--size-medium_1lq7z_819 {
+    min-height: var(--c82a41);
+    padding-top: calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--c82a41) - var(--d4313c) * var(--c84e20)) / 2 - var(--0b1b71));
+    padding-left: var(--aebd97);
+    padding-right: var(--aebd97);
+    font-size: var(--c84e20);
+    letter-spacing: var(--ad1bd2);
+  }
+  ._ButtonBase--wide-l--is-icon-button-size-medium_1lq7z_828 {
+    width: var(--c82a41);
+    height: var(--c82a41);
+    padding: 0;
+  }
+  ._ButtonBase--wide-l--size-small_1lq7z_833 {
+    min-height: var(--5eca09);
+    padding-top: calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));
+    padding-bottom: calc((var(--5eca09) - var(--d4313c) * var(--f20194)) / 2 - var(--0b1b71));
+    padding-left: var(--d17b90);
+    padding-right: var(--d17b90);
+    font-size: var(--f20194);
+    letter-spacing: var(--9663af);
+  }
+  ._ButtonBase--wide-l--is-icon-button-size-small_1lq7z_842 {
+    width: var(--5eca09);
+    height: var(--5eca09);
+    padding: 0;
+  }
+}
+._ButtonBase--variant-primary_1lq7z_848 {
+  color: var(--d2baa6);
+  background-color: var(--508b34);
+  border-color: var(--44bfe9);
+  -webkit-text-decoration: var(--74cfa2);
+          text-decoration: var(--74cfa2);
+}
+._ButtonBase--variant-primary--dsInternalSimulation-hover_1lq7z_854 {
+  color: var(--df6151);
+  background-color: var(--902b50);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-primary_1lq7z_848:hover {
+    color: var(--df6151);
+    background-color: var(--902b50);
+  }
+}
+._ButtonBase--variant-primary_1lq7z_848[disabled],
+._ButtonBase--variant-primary_1lq7z_848[disabled]:hover {
+  border-color: var(--f0720e);
+}
+._ButtonBase--variant-primary_1lq7z_848:active,
+._ButtonBase--variant-primary--dsInternalSimulation-active_1lq7z_869 {
+  color: var(--15cee1);
+  background-color: var(--c1c1ca);
+}
+._ButtonBase--variant-secondary_1lq7z_873 {
+  color: var(--1614c9);
+  background-color: var(--e56164);
+  border-color: var(--ab736c);
+  -webkit-text-decoration: var(--c6c73d);
+          text-decoration: var(--c6c73d);
+}
+._ButtonBase--variant-secondary--dsInternalSimulation-hover_1lq7z_879 {
+  color: var(--0d6ae2);
+  background-color: var(--0d124d);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-secondary_1lq7z_873:hover {
+    color: var(--0d6ae2);
+    background-color: var(--0d124d);
+  }
+}
+._ButtonBase--variant-secondary_1lq7z_873[disabled],
+._ButtonBase--variant-secondary_1lq7z_873[disabled]:hover {
+  border-color: var(--3f0f51);
+}
+._ButtonBase--variant-secondary_1lq7z_873:active,
+._ButtonBase--variant-secondary--dsInternalSimulation-active_1lq7z_894 {
+  color: var(--22cb4c);
+  background-color: var(--33b439);
+}
+._ButtonBase--variant-tertiary_1lq7z_898 {
+  color: var(--937543);
+  background-color: var(--28f3c1);
+  border-color: var(--10556e);
+  -webkit-text-decoration: var(--ce0e6a);
+          text-decoration: var(--ce0e6a);
+}
+._ButtonBase--variant-tertiary--dsInternalSimulation-hover_1lq7z_904 {
+  color: var(--175a77);
+  background-color: var(--ec17be);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-tertiary_1lq7z_898:hover {
+    color: var(--175a77);
+    background-color: var(--ec17be);
+  }
+}
+._ButtonBase--variant-tertiary_1lq7z_898[disabled],
+._ButtonBase--variant-tertiary_1lq7z_898[disabled]:hover {
+  border-color: var(--fd08b7);
+}
+._ButtonBase--variant-tertiary_1lq7z_898:active,
+._ButtonBase--variant-tertiary--dsInternalSimulation-active_1lq7z_919 {
+  color: var(--8274ee);
+  background-color: var(--b0bf50);
+}
+._ButtonBase--variant-quaternary_1lq7z_923 {
+  color: var(--9cf6ec);
+  background-color: var(--e46449);
+  border-color: var(--0e9e01);
+  -webkit-text-decoration: var(--5c0a2f);
+          text-decoration: var(--5c0a2f);
+}
+._ButtonBase--variant-quaternary--dsInternalSimulation-hover_1lq7z_929 {
+  color: var(--6609c6);
+  background-color: var(--afc176);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-quaternary_1lq7z_923:hover {
+    color: var(--6609c6);
+    background-color: var(--afc176);
+  }
+}
+._ButtonBase--variant-quaternary_1lq7z_923[disabled],
+._ButtonBase--variant-quaternary_1lq7z_923[disabled]:hover {
+  border-color: var(--3e2684);
+}
+._ButtonBase--variant-quaternary_1lq7z_923:active,
+._ButtonBase--variant-quaternary--dsInternalSimulation-active_1lq7z_944 {
+  color: var(--e9f226);
+  background-color: var(--2ee553);
+}
+._ButtonBase--variant-ghost_1lq7z_948 {
+  color: var(--255ddc);
+  background-color: var(--64bffa);
+  border-color: var(--39e128);
+  -webkit-text-decoration: var(--31d455);
+          text-decoration: var(--31d455);
+}
+._ButtonBase--variant-ghost--dsInternalSimulation-hover_1lq7z_954 {
+  color: var(--e69072);
+  background-color: var(--3b749f);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-ghost_1lq7z_948:hover {
+    color: var(--e69072);
+    background-color: var(--3b749f);
+  }
+}
+._ButtonBase--variant-ghost_1lq7z_948[disabled],
+._ButtonBase--variant-ghost_1lq7z_948[disabled]:hover {
+  border-color: var(--af2d26);
+}
+._ButtonBase--variant-ghost_1lq7z_948:active,
+._ButtonBase--variant-ghost--dsInternalSimulation-active_1lq7z_969 {
+  color: var(--ddf285);
+  background-color: var(--6beb48);
+}
+._ButtonBase--variant-ghost--is-selected_1lq7z_973 {
+  color: var(--5f5238);
+  background-color: var(--a5cfbe);
+}
+._ButtonBase--variant-plain_1lq7z_977 {
+  color: var(--122a99);
+  background-color: var(--bbb356);
+  border-color: var(--0cad84);
+  -webkit-text-decoration: var(--d2d32f);
+          text-decoration: var(--d2d32f);
+}
+._ButtonBase--variant-plain--dsInternalSimulation-hover_1lq7z_983 {
+  color: var(--1265db);
+  background-color: var(--df2aca);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-plain_1lq7z_977:hover {
+    color: var(--1265db);
+    background-color: var(--df2aca);
+  }
+}
+._ButtonBase--variant-plain_1lq7z_977[disabled],
+._ButtonBase--variant-plain_1lq7z_977[disabled]:hover {
+  border-color: var(--c6b607);
+}
+._ButtonBase--variant-plain_1lq7z_977:active,
+._ButtonBase--variant-plain--dsInternalSimulation-active_1lq7z_998 {
+  color: var(--a41624);
+  background-color: var(--435fa5);
+}
+._ButtonBase--variant-dangerous_1lq7z_1002 {
+  color: var(--efde5b);
+  background-color: var(--118bda);
+  border-color: var(--ab5970);
+  -webkit-text-decoration: var(--0bf14c);
+          text-decoration: var(--0bf14c);
+}
+._ButtonBase--variant-dangerous--dsInternalSimulation-hover_1lq7z_1008 {
+  color: var(--6f5d5d);
+  background-color: var(--e0b0f4);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-dangerous_1lq7z_1002:hover {
+    color: var(--6f5d5d);
+    background-color: var(--e0b0f4);
+  }
+}
+._ButtonBase--variant-dangerous_1lq7z_1002[disabled],
+._ButtonBase--variant-dangerous_1lq7z_1002[disabled]:hover {
+  border-color: var(--7deffa);
+}
+._ButtonBase--variant-dangerous_1lq7z_1002:active,
+._ButtonBase--variant-dangerous--dsInternalSimulation-active_1lq7z_1023 {
+  color: var(--6b4e92);
+  background-color: var(--a5eaa1);
+}
+._ButtonBase--variant-critical_1lq7z_1027 {
+  color: var(--f68030);
+  background-color: var(--faae28);
+  border-color: var(--b357d0);
+  -webkit-text-decoration: var(--91f4fa);
+          text-decoration: var(--91f4fa);
+}
+._ButtonBase--variant-critical--dsInternalSimulation-hover_1lq7z_1033 {
+  color: var(--c3136e);
+  background-color: var(--064c43);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-critical_1lq7z_1027:hover {
+    color: var(--c3136e);
+    background-color: var(--064c43);
+  }
+}
+._ButtonBase--variant-critical_1lq7z_1027[disabled],
+._ButtonBase--variant-critical_1lq7z_1027[disabled]:hover {
+  border-color: var(--e117c7);
+}
+._ButtonBase--variant-critical_1lq7z_1027:active,
+._ButtonBase--variant-critical--dsInternalSimulation-active_1lq7z_1048 {
+  color: var(--f9fba8);
+  background-color: var(--152a7a);
+}
+._ButtonBase--variant-onColor_1lq7z_1052 {
+  color: var(--96343f);
+  background-color: var(--d64a99);
+  border-color: var(--d2723c);
+  -webkit-text-decoration: var(--af7137);
+          text-decoration: var(--af7137);
+}
+._ButtonBase--variant-onColor--dsInternalSimulation-hover_1lq7z_1058 {
+  color: var(--145384);
+  background-color: var(--549e56);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-onColor_1lq7z_1052:hover {
+    color: var(--145384);
+    background-color: var(--549e56);
+  }
+}
+._ButtonBase--variant-onColor_1lq7z_1052[disabled],
+._ButtonBase--variant-onColor_1lq7z_1052[disabled]:hover {
+  border-color: var(--e1a214);
+}
+._ButtonBase--variant-onColor_1lq7z_1052:active,
+._ButtonBase--variant-onColor--dsInternalSimulation-active_1lq7z_1073 {
+  color: var(--f772e8);
+  background-color: var(--936fce);
+}
+._ButtonBase--variant-classroom_1lq7z_1077 {
+  color: var(--8d482c);
+  background-color: var(--7a038f);
+  border-color: var(--38faba);
+  -webkit-text-decoration: var(--4d5ea8);
+          text-decoration: var(--4d5ea8);
+}
+._ButtonBase--variant-classroom--dsInternalSimulation-hover_1lq7z_1083 {
+  color: var(--55bfda);
+  background-color: var(--077a93);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-classroom_1lq7z_1077:hover {
+    color: var(--55bfda);
+    background-color: var(--077a93);
+  }
+}
+._ButtonBase--variant-classroom_1lq7z_1077[disabled],
+._ButtonBase--variant-classroom_1lq7z_1077[disabled]:hover {
+  border-color: var(--659377);
+}
+._ButtonBase--variant-classroom_1lq7z_1077:active,
+._ButtonBase--variant-classroom--dsInternalSimulation-active_1lq7z_1098 {
+  color: var(--b62751);
+  background-color: var(--45d93a);
+}
+._ButtonBase--variant-classroom--is-selected_1lq7z_1102 {
+  color: var(--a0b42b);
+  background-color: var(--16a985);
+}
+._ButtonBase--variant-primaryB2b_1lq7z_1106 {
+  color: var(--4a94de);
+  background-color: var(--6c36b5);
+  border-color: var(--4a9eb5);
+  -webkit-text-decoration: var(--6c9741);
+          text-decoration: var(--6c9741);
+}
+._ButtonBase--variant-primaryB2b--dsInternalSimulation-hover_1lq7z_1112 {
+  color: var(--3e45d7);
+  background-color: var(--dcdb32);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-primaryB2b_1lq7z_1106:hover {
+    color: var(--3e45d7);
+    background-color: var(--dcdb32);
+  }
+}
+._ButtonBase--variant-primaryB2b_1lq7z_1106[disabled],
+._ButtonBase--variant-primaryB2b_1lq7z_1106[disabled]:hover {
+  border-color: var(--e7f949);
+}
+._ButtonBase--variant-primaryB2b_1lq7z_1106:active,
+._ButtonBase--variant-primaryB2b--dsInternalSimulation-active_1lq7z_1127 {
+  color: var(--cb03bc);
+  background-color: var(--fc3d8b);
+}
+._ButtonBase--variant-primaryTutor_1lq7z_1131 {
+  color: var(--c93681);
+  background-color: var(--4aa1b1);
+  border-color: var(--f103e9);
+  -webkit-text-decoration: var(--6e7352);
+          text-decoration: var(--6e7352);
+}
+._ButtonBase--variant-primaryTutor--dsInternalSimulation-hover_1lq7z_1137 {
+  color: var(--e91696);
+  background-color: var(--46a009);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-primaryTutor_1lq7z_1131:hover {
+    color: var(--e91696);
+    background-color: var(--46a009);
+  }
+}
+._ButtonBase--variant-primaryTutor_1lq7z_1131[disabled],
+._ButtonBase--variant-primaryTutor_1lq7z_1131[disabled]:hover {
+  border-color: var(--f6a20e);
+}
+._ButtonBase--variant-primaryTutor_1lq7z_1131:active,
+._ButtonBase--variant-primaryTutor--dsInternalSimulation-active_1lq7z_1152 {
+  color: var(--58d992);
+  background-color: var(--dd5a43);
+}
+._ButtonBase--variant-inverted_1lq7z_1156 {
+  color: var(--81b7df);
+  background-color: var(--c54155);
+  border-color: var(--fe1378);
+  -webkit-text-decoration: var(--fb8624);
+          text-decoration: var(--fb8624);
+}
+._ButtonBase--variant-inverted--dsInternalSimulation-hover_1lq7z_1162 {
+  color: var(--79a09e);
+  background-color: var(--8a16b5);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-inverted_1lq7z_1156:hover {
+    color: var(--79a09e);
+    background-color: var(--8a16b5);
+  }
+}
+._ButtonBase--variant-inverted_1lq7z_1156[disabled],
+._ButtonBase--variant-inverted_1lq7z_1156[disabled]:hover {
+  border-color: var(--e797f1);
+}
+._ButtonBase--variant-inverted_1lq7z_1156:active,
+._ButtonBase--variant-inverted--dsInternalSimulation-active_1lq7z_1177 {
+  color: var(--77e945);
+  background-color: var(--de59a1);
+}
+._ButtonBase--variant-newFeature_1lq7z_1181 {
+  color: var(--ad44c3);
+  background-color: var(--7dbfce);
+  border-color: var(--a7eddc);
+  -webkit-text-decoration: var(--fd7ece);
+          text-decoration: var(--fd7ece);
+}
+._ButtonBase--variant-newFeature--dsInternalSimulation-hover_1lq7z_1187 {
+  color: var(--ddcea1);
+  background-color: var(--dd2815);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-newFeature_1lq7z_1181:hover {
+    color: var(--ddcea1);
+    background-color: var(--dd2815);
+  }
+}
+._ButtonBase--variant-newFeature_1lq7z_1181[disabled],
+._ButtonBase--variant-newFeature_1lq7z_1181[disabled]:hover {
+  border-color: var(--7d2338);
+}
+._ButtonBase--variant-newFeature_1lq7z_1181:active,
+._ButtonBase--variant-newFeature--dsInternalSimulation-active_1lq7z_1202 {
+  color: var(--d4762b);
+  background-color: var(--b3e453);
+}
+._ButtonBase--variant-ai_1lq7z_1206 {
+  color: var(--aa08fb);
+  background-color: var(--1bdcc0);
+  border-color: var(--8e8894);
+  -webkit-text-decoration: var(--c82204);
+          text-decoration: var(--c82204);
+}
+._ButtonBase--variant-ai--dsInternalSimulation-hover_1lq7z_1212 {
+  color: var(--59b757);
+  background-color: var(--f043dc);
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ButtonBase--variant-ai_1lq7z_1206:hover {
+    color: var(--59b757);
+    background-color: var(--f043dc);
+  }
+}
+._ButtonBase--variant-ai_1lq7z_1206[disabled],
+._ButtonBase--variant-ai_1lq7z_1206[disabled]:hover {
+  border-color: var(--6ac212);
+}
+._ButtonBase--variant-ai_1lq7z_1206:active,
+._ButtonBase--variant-ai--dsInternalSimulation-active_1lq7z_1227 {
+  color: var(--349ae3);
+  background-color: var(--5bba7d);
+}
+._ButtonBase--variant-ai_1lq7z_1206 {
+  -o-border-image: var(--0b0037);
+     border-image: var(--0b0037);
+}
+._ButtonBase--variant-ai_1lq7z_1206[disabled],
+._ButtonBase--variant-ai_1lq7z_1206[disabled]:hover {
+  -o-border-image: none;
+     border-image: none;
+  -o-border-image: initial;
+     border-image: initial;
+  border-color: var(--6ac212);
+}
+._ButtonBase--no-wrap_1lq7z_1239 {
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+}