@ebay/skin 17.5.0 → 18.0.0-next.0

package/dist/button/button.css

@@ -1,500 +1,675 @@
-button.btn,
-a.fake-btn {
-  border: 1px solid;
-  box-sizing: border-box;
-  font-family: inherit;
-  margin: 0;
-  text-align: center;
-  text-decoration: none;
-  vertical-align: bottom;
-  background-color: transparent;
-  border-radius: var(--btn-border-radius, calc(40px / 2));
-  color: inherit;
-  display: inline-block;
-  font-size: var(--font-size-default);
-  min-height: 40px;
-  min-width: 88px;
-  padding: 9.5px 20px;
-}
-button.btn--fixed-height,
-a.fake-btn--fixed-height {
-  height: 40px;
-}
-button.btn--truncated,
-a.fake-btn--truncated {
-  height: 40px;
-}
-button.btn--truncated,
+a.fake-btn,
+button.btn {
+    background-color: initial;
+    border: 1px solid;
+    border-radius: var(--btn-border-radius, 20px);
+    box-sizing: border-box;
+    color: inherit;
+    display: inline-block;
+    font-family: inherit;
+    font-size: var(--font-size-default);
+    margin: 0;
+    min-height: 40px;
+    min-width: 88px;
+    padding: 9.5px 20px;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: bottom;
+}
+a.fake-btn--fixed-height,
 a.fake-btn--truncated,
-button.btn--truncated span,
-a.fake-btn--truncated span {
-  line-height: 1.4em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-button.btn:focus:not(:focus-visible),
-a.fake-btn:focus:not(:focus-visible) {
-  outline: none;
-}
-button.btn[disabled],
-button.btn[aria-disabled="true"] {
-  border-color: var(--expand-btn-disabled-border-color, var(--color-stroke-disabled));
-  color: var(--expand-btn-disabled-foreground-color, var(--color-foreground-disabled));
-}
-button.btn--borderless,
-a.fake-btn--borderless {
-  border-color: transparent;
-  min-width: auto;
-  padding-left: 0;
-  vertical-align: initial;
+button.btn--fixed-height,
+button.btn--truncated {
+    height: 40px;
+}
+a.fake-btn:focus:not(:focus-visible),
+button.btn:focus:not(:focus-visible) {
+    outline: none;
+}
+
+button.btn[aria-disabled="true"],
+button.btn[disabled] {
+    border-color: var(
+        --expand-btn-disabled-border-color,
+        var(--color-stroke-disabled)
+    );
+    color: var(
+        --expand-btn-disabled-foreground-color,
+        var(--color-foreground-disabled)
+    );
+}
+
+a.fake-btn--borderless,
+button.btn--borderless {
+    border-color: transparent;
+    min-width: auto;
+    padding-left: 0;
+    vertical-align: initial;
 }
-button.btn--borderless:focus,
 a.fake-btn--borderless:focus,
-button.btn--borderless:hover,
-a.fake-btn--borderless:hover {
-  background-color: transparent;
-  outline: none;
-  text-decoration: underline;
+a.fake-btn--borderless:hover,
+button.btn--borderless:focus,
+button.btn--borderless:hover {
+    background-color: initial;
+    outline: none;
+    text-decoration: underline;
 }
-button.btn--borderless[disabled],
+
+a.fake-btn--borderless[aria-disabled="true"],
 a.fake-btn--borderless[disabled],
 button.btn--borderless[aria-disabled="true"],
-a.fake-btn--borderless[aria-disabled="true"] {
-  border-color: transparent;
-}
-button.btn--borderless.btn--destructive,
-a.fake-btn--borderless.btn--destructive {
-  color: var(--btn-secondary-destructive-foreground-color, var(--color-foreground-attention));
-}
-button.btn--slim,
-a.fake-btn--slim {
-  height: 40px;
-  min-width: auto;
-  padding-left: var(--spacing-100);
-  padding-right: var(--spacing-100);
-}
+button.btn--borderless[disabled] {
+    border-color: transparent;
+}
+
+a.fake-btn--borderless.btn--destructive,
+button.btn--borderless.btn--destructive {
+    color: var(
+        --btn-secondary-destructive-foreground-color,
+        var(--color-foreground-attention)
+    );
+}
+
+a.fake-btn--slim,
+button.btn--slim {
+    height: 40px;
+    min-width: auto;
+    padding-left: var(--spacing-100);
+    padding-right: var(--spacing-100);
+}
+
 a.fake-btn:visited {
-  color: inherit;
+    color: inherit;
 }
-button.btn--fluid,
-a.fake-btn--fluid {
-  width: 100%;
+
+a.fake-btn--fluid,
+button.btn--fluid {
+    width: 100%;
 }
+
 .btn__cell,
 .fake-btn__cell {
-  align-items: center;
-  display: flex;
-  width: 100%;
-  justify-content: center;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    width: 100%;
 }
 .btn__cell--fixed-height,
 .fake-btn__cell--fixed-height {
-  display: inline-flex;
+    display: inline-flex;
 }
 .btn__cell--fixed-height > svg,
 .fake-btn__cell--fixed-height > svg {
-  align-self: baseline;
-  max-width: calc(100% - 32px);
+    align-self: baseline;
+    max-width: calc(100% - 32px);
 }
 .btn__cell--truncated,
 .fake-btn__cell--truncated {
-  display: inline-flex;
+    display: inline-flex;
 }
 .btn__cell--truncated > svg,
 .fake-btn__cell--truncated > svg {
-  align-self: baseline;
-  max-width: calc(100% - 32px);
+    align-self: baseline;
+    max-width: calc(100% - 32px);
 }
-button.btn--form .btn__cell,
+
+a.fake-btn--borderless .fake-btn__cell,
 a.fake-btn--form .fake-btn__cell,
 button.btn--borderless .btn__cell,
-a.fake-btn--borderless .fake-btn__cell {
-  justify-content: space-between;
-}
-button.btn svg.icon,
-a.fake-btn svg.icon {
-  align-self: center;
-}
-button.btn svg.icon:first-child,
-a.fake-btn svg.icon:first-child {
-  -webkit-margin-end: 8px;
-          margin-inline-end: 8px;
-}
-button.btn svg.icon:last-child,
-a.fake-btn svg.icon:last-child {
-  -webkit-margin-start: 8px;
-          margin-inline-start: 8px;
-}
-button.btn svg.icon:only-child,
-a.fake-btn svg.icon:only-child {
-  margin: 0;
-}
-button.btn__cell--fixed-height svg.icon,
-a.fake-btn__cell--fixed-height svg.icon {
-  align-self: center;
-  height: 1rem;
-  overflow: visible;
-  width: 1rem;
-}
-button.btn--primary,
-a.fake-btn--primary {
-  background-color: var(--btn-primary-background-color, var(--color-background-accent));
-  border-color: var(--btn-primary-border-color, var(--color-stroke-accent));
-  color: var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
-  font-weight: bold;
-}
+button.btn--form .btn__cell {
+    justify-content: space-between;
+}
+
+a.fake-btn svg.icon,
+button.btn svg.icon {
+    align-self: center;
+}
+a.fake-btn svg.icon:first-child,
+button.btn svg.icon:first-child {
+    -webkit-margin-end: 8px;
+    margin-inline-end: 8px;
+}
+a.fake-btn svg.icon:last-child,
+button.btn svg.icon:last-child {
+    -webkit-margin-start: 8px;
+    margin-inline-start: 8px;
+}
+a.fake-btn svg.icon:only-child,
+button.btn svg.icon:only-child {
+    margin: 0;
+}
+
+a.fake-btn__cell--fixed-height svg.icon,
+button.btn__cell--fixed-height svg.icon {
+    align-self: center;
+    height: 1rem;
+    overflow: visible;
+    width: 1rem;
+}
+
+a.fake-btn--primary,
+button.btn--primary {
+    background-color: var(
+        --btn-primary-background-color,
+        var(--color-background-accent)
+    );
+    border-color: var(--btn-primary-border-color, var(--color-stroke-accent));
+    color: var(
+        --btn-primary-foreground-color,
+        var(--color-foreground-on-accent)
+    );
+    font-weight: 700;
+}
+
 a.fake-btn--primary {
-  outline-color: var(--color-foreground-primary);
+    outline-color: var(--color-foreground-primary);
 }
+
 a.fake-btn--primary:visited {
-  color: var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
+    color: var(
+        --btn-primary-foreground-color,
+        var(--color-foreground-on-accent)
+    );
 }
-button.btn--primary:not([disabled], [aria-disabled="true"]):focus,
+
 a.fake-btn--primary[href]:focus,
-button.btn--primary:not([disabled], [aria-disabled="true"]):hover,
-a.fake-btn--primary[href]:hover {
-  background-blend-mode: multiply;
-  filter: brightness(96%);
-}
-button.btn--primary:not([disabled], [aria-disabled="true"]):active,
-a.fake-btn--primary[href]:active {
-  filter: brightness(92%);
-}
-button.btn--primary.btn--destructive,
-a.fake-btn--primary.fake-btn--destructive {
-  background-color: var(--btn-primary-destructive-background-color, var(--color-background-attention));
-  border-color: var(--btn-primary-destructive-border-color, var(--color-stroke-attention));
-  color: var(--btn-primary-destructive-foreground-color, var(--color-foreground-on-attention));
-  font-weight: bold;
-}
-button.btn--primary.btn--destructive[disabled],
-button.btn--primary.btn--destructive[aria-disabled="true"] {
-  background-color: var(--btn-primary-destructive-disabled-background, var(--color-background-disabled));
-  border-color: var(--btn-primary-destructive-disabled-border, var(--color-stroke-disabled));
-}
-button.btn--primary.btn--destructive:not([disabled], [aria-disabled="true"]):focus,
+a.fake-btn--primary[href]:hover,
+button.btn--primary:not([disabled], [aria-disabled="true"]):focus,
+button.btn--primary:not([disabled], [aria-disabled="true"]):hover {
+    background-blend-mode: multiply;
+    filter: brightness(96%);
+}
+a.fake-btn--primary[href]:active,
+button.btn--primary:not([disabled], [aria-disabled="true"]):active {
+    filter: brightness(92%);
+}
+
+a.fake-btn--primary.fake-btn--destructive,
+button.btn--primary.btn--destructive {
+    background-color: var(
+        --btn-primary-destructive-background-color,
+        var(--color-background-attention)
+    );
+    border-color: var(
+        --btn-primary-destructive-border-color,
+        var(--color-stroke-attention)
+    );
+    color: var(
+        --btn-primary-destructive-foreground-color,
+        var(--color-foreground-on-attention)
+    );
+    font-weight: 700;
+}
+
+button.btn--primary.btn--destructive[aria-disabled="true"],
+button.btn--primary.btn--destructive[disabled] {
+    background-color: var(
+        --btn-primary-destructive-disabled-background,
+        var(--color-background-disabled)
+    );
+    border-color: var(
+        --btn-primary-destructive-disabled-border,
+        var(--color-stroke-disabled)
+    );
+}
+
 a.fake-btn--primary.fake-btn--destructive[href]:focus,
-button.btn--primary.btn--destructive:not([disabled], [aria-disabled="true"]):hover,
-a.fake-btn--primary.fake-btn--destructive[href]:hover {
-  background-color: var(--color-state-attention-hover);
-}
-button.btn--primary.btn--destructive:not([disabled], [aria-disabled="true"]):active,
-a.fake-btn--primary.fake-btn--destructive[href]:active {
-  background-color: var(--color-state-attention-active);
-}
+a.fake-btn--primary.fake-btn--destructive[href]:hover,
+button.btn--primary.btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus,
+button.btn--primary.btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover {
+    background-color: var(--color-state-attention-hover);
+}
+a.fake-btn--primary.fake-btn--destructive[href]:active,
+button.btn--primary.btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active {
+    background-color: var(--color-state-attention-active);
+}
+
 button.btn .progress-spinner {
-  height: 24px;
-  margin: -4px 0;
-  width: 24px;
+    height: 24px;
+    margin: -4px 0;
+    width: 24px;
 }
+
 button.btn--form .progress-spinner {
-  margin-left: auto;
-  margin-right: auto;
+    margin-left: auto;
+    margin-right: auto;
 }
+
 button.btn--primary .progress-spinner {
-  --color-spinner-icon-background: var(--color-background-primary);
-  --color-spinner-icon-foreground: #8fa3f8;
+    --color-spinner-icon-background: var(--color-background-primary);
+    --color-spinner-icon-foreground: #8fa3f8;
 }
+
 button.btn--primary.btn--destructive .progress-spinner {
-  --color-spinner-icon-background: var(--color-foreground-on-accent);
-  --color-spinner-icon-foreground: #ec7089;
-}
-button.btn[aria-expanded="true"] svg.icon--chevron-down-12,
-a.fake-btn[aria-expanded="true"] svg.icon--chevron-down-12 {
-  transform: rotate(180deg);
-}
-button.btn--large svg.icon,
-a.fake-btn--large svg.icon {
-  max-height: 22px;
-}
-button.btn--small svg.icon,
-a.fake-btn--small svg.icon {
-  max-height: 20px;
-}
-button.btn--primary[disabled],
-button.btn--primary[aria-disabled="true"] {
-  background-color: var(--btn-primary-disabled-background-color, var(--color-foreground-disabled));
-  border-color: var(--btn-primary-disabled-border-color, var(--color-foreground-disabled));
-  color: var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
-}
-button.btn--primary[disabled] svg.icon,
-button.btn--primary[aria-disabled="true"] svg.icon {
-  fill: var(--btn-primary-disabled-foreground-color, var(--color-background-primary));
-}
+    --color-spinner-icon-background: var(--color-foreground-on-accent);
+    --color-spinner-icon-foreground: #ec7089;
+}
+
+a.fake-btn[aria-expanded="true"] svg.icon--chevron-down-12,
+button.btn[aria-expanded="true"] svg.icon--chevron-down-12 {
+    transform: rotate(180deg);
+}
+
+a.fake-btn--large svg.icon,
+button.btn--large svg.icon {
+    max-height: 22px;
+}
+
+a.fake-btn--small svg.icon,
+button.btn--small svg.icon {
+    max-height: 20px;
+}
+
+button.btn--primary[aria-disabled="true"],
+button.btn--primary[disabled] {
+    background-color: var(
+        --btn-primary-disabled-background-color,
+        var(--color-foreground-disabled)
+    );
+    border-color: var(
+        --btn-primary-disabled-border-color,
+        var(--color-foreground-disabled)
+    );
+    color: var(
+        --btn-primary-foreground-color,
+        var(--color-foreground-on-accent)
+    );
+}
+button.btn--primary[aria-disabled="true"] svg.icon,
+button.btn--primary[disabled] svg.icon {
+    fill: var(
+        --btn-primary-disabled-foreground-color,
+        var(--color-background-primary)
+    );
+}
+
 a.fake-btn--primary:not([href]),
 a.fake-btn--primary[aria-disabled="true"] {
-  background-color: var(--btn-primary-disabled-background-color, var(--color-foreground-disabled));
-  border-color: var(--btn-primary-disabled-border-color, var(--color-foreground-disabled));
-}
-button.btn--secondary,
-a.fake-btn--secondary {
-  background-color: var(--btn-secondary-background-color, transparent);
-  border-color: var(--btn-secondary-border-color, var(--color-stroke-accent));
-  color: var(--btn-secondary-foreground-color, var(--color-foreground-accent));
-}
+    background-color: var(
+        --btn-primary-disabled-background-color,
+        var(--color-foreground-disabled)
+    );
+    border-color: var(
+        --btn-primary-disabled-border-color,
+        var(--color-foreground-disabled)
+    );
+}
+
+a.fake-btn--secondary,
+button.btn--secondary {
+    background-color: var(--btn-secondary-background-color, transparent);
+    border-color: var(--btn-secondary-border-color, var(--color-stroke-accent));
+    color: var(
+        --btn-secondary-foreground-color,
+        var(--color-foreground-accent)
+    );
+}
+
 a.fake-btn--secondary:visited {
-  color: var(--btn-secondary-foreground-color, var(--color-blue-4));
+    color: var(--btn-secondary-foreground-color, var(--color-blue-4));
 }
-button.btn--secondary:not([disabled], [aria-disabled="true"]):active,
-a.fake-btn--secondary[href]:active {
-  background-color: var(--color-state-primary-active);
-  border-color: var(--color-state-active-foreground-on-secondary);
-  color: var(--color-state-active-foreground-on-secondary);
+
+a.fake-btn--secondary[href]:active,
+button.btn--secondary:not([disabled], [aria-disabled="true"]):active {
+    background-color: var(--color-state-primary-active);
+    border-color: var(--color-state-active-foreground-on-secondary);
+    color: var(--color-state-active-foreground-on-secondary);
 }
-button.btn--secondary:not([disabled], [aria-disabled="true"]):hover,
+a.fake-btn--secondary[href]:focus,
 a.fake-btn--secondary[href]:hover,
 button.btn--secondary:not([disabled], [aria-disabled="true"]):focus,
-a.fake-btn--secondary[href]:focus {
-  background-color: var(--color-state-primary-hover);
-  border-color: var(--color-state-hover-foreground-on-secondary);
-  color: var(--color-state-hover-foreground-on-secondary);
-}
-button.btn--secondary.btn--destructive,
-a.fake-btn--secondary.fake-btn--destructive {
-  background-color: var(--btn-secondary-destructive-background-color, transparent);
-  border-color: var(--btn-secondary-destructive-border-color, var(--color-stroke-attention));
-  color: var(--btn-secondary-destructive-foreground-color, var(--color-foreground-attention));
-}
-button.btn--secondary.btn--destructive:not([disabled], [aria-disabled="true"]):hover,
+button.btn--secondary:not([disabled], [aria-disabled="true"]):hover {
+    background-color: var(--color-state-primary-hover);
+    border-color: var(--color-state-hover-foreground-on-secondary);
+    color: var(--color-state-hover-foreground-on-secondary);
+}
+
+a.fake-btn--secondary.fake-btn--destructive,
+button.btn--secondary.btn--destructive {
+    background-color: var(
+        --btn-secondary-destructive-background-color,
+        transparent
+    );
+    border-color: var(
+        --btn-secondary-destructive-border-color,
+        var(--color-stroke-attention)
+    );
+    color: var(
+        --btn-secondary-destructive-foreground-color,
+        var(--color-foreground-attention)
+    );
+}
+
+a.fake-btn--secondary.fake-btn--destructive[href]:focus,
 a.fake-btn--secondary.fake-btn--destructive[href]:hover,
-button.btn--secondary.btn--destructive:not([disabled], [aria-disabled="true"]):focus,
-a.fake-btn--secondary.fake-btn--destructive[href]:focus {
-  background-color: var(--color-state-primary-hover);
-  border-color: var(--color-state-hover-foreground-on-secondary-desctructive);
-  color: var(--color-state-hover-foreground-on-secondary-desctructive);
-}
-button.btn--secondary.btn--destructive:not([disabled], [aria-disabled="true"]):active,
-a.fake-btn--secondary.fake-btn--destructive[href]:active {
-  background-color: var(--color-state-primary-active);
-  border-color: var(--color-state-active-foreground-on-secondary-desctructive);
-  color: var(--color-state-active-foreground-on-secondary-desctructive);
-}
+button.btn--secondary.btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus,
+button.btn--secondary.btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover {
+    background-color: var(--color-state-primary-hover);
+    border-color: var(--color-state-hover-foreground-on-secondary-desctructive);
+    color: var(--color-state-hover-foreground-on-secondary-desctructive);
+}
+a.fake-btn--secondary.fake-btn--destructive[href]:active,
+button.btn--secondary.btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active {
+    background-color: var(--color-state-primary-active);
+    border-color: var(
+        --color-state-active-foreground-on-secondary-desctructive
+    );
+    color: var(--color-state-active-foreground-on-secondary-desctructive);
+}
+
 button.btn--secondary.btn--destructive .progress-spinner {
-  --color-spinner-icon-background: #f39fb0;
-  --color-spinner-icon-foreground: #e0103a;
-}
-button.btn--secondary[disabled],
-button.btn--secondary[aria-disabled="true"] {
-  background-color: var(--btn-secondary-disabled-background-color, var(--color-background-primary));
-  border-color: var(--btn-secondary-disabled-border-color, var(--color-stroke-disabled));
-  color: var(--btn-secondary-disabled-foreground-color, var(--color-background-disabled));
-}
-button.btn--secondary[disabled] svg.icon,
-button.btn--secondary[aria-disabled="true"] svg.icon {
-  fill: var(--btn-secondary-disabled-foreground-color, var(--color-foreground-disabled));
-}
+    --color-spinner-icon-background: #f39fb0;
+    --color-spinner-icon-foreground: #e0103a;
+}
+
+button.btn--secondary[aria-disabled="true"],
+button.btn--secondary[disabled] {
+    background-color: var(
+        --btn-secondary-disabled-background-color,
+        var(--color-background-primary)
+    );
+    border-color: var(
+        --btn-secondary-disabled-border-color,
+        var(--color-stroke-disabled)
+    );
+    color: var(
+        --btn-secondary-disabled-foreground-color,
+        var(--color-background-disabled)
+    );
+}
+button.btn--secondary[aria-disabled="true"] svg.icon,
+button.btn--secondary[disabled] svg.icon {
+    fill: var(
+        --btn-secondary-disabled-foreground-color,
+        var(--color-foreground-disabled)
+    );
+}
+
 a.fake-btn--secondary:not([href]),
 a.fake-btn--secondary[aria-disabled="true"] {
-  border-color: var(--btn-secondary-disabled-border-color, var(--color-background-disabled));
-  color: var(--btn-secondary-disabled-foreground-color, var(--color-background-disabled));
-}
-button.btn--tertiary,
-a.fake-btn--tertiary {
-  border-color: var(--btn-tertiary-border-color, var(--color-stroke-default));
-}
-button.btn--tertiary:not([disabled], [aria-disabled="true"]):focus,
+    border-color: var(
+        --btn-secondary-disabled-border-color,
+        var(--color-background-disabled)
+    );
+    color: var(
+        --btn-secondary-disabled-foreground-color,
+        var(--color-background-disabled)
+    );
+}
+
+a.fake-btn--tertiary,
+button.btn--tertiary {
+    border-color: var(--btn-tertiary-border-color, var(--color-stroke-default));
+}
+
 a.fake-btn--tertiary[href]:focus,
-button.btn--tertiary:not([disabled], [aria-disabled="true"]):hover,
-a.fake-btn--tertiary[href]:hover {
-  background-color: var(--color-state-secondary-hover);
+a.fake-btn--tertiary[href]:hover,
+button.btn--tertiary:not([disabled], [aria-disabled="true"]):focus,
+button.btn--tertiary:not([disabled], [aria-disabled="true"]):hover {
+    background-color: var(--color-state-secondary-hover);
 }
-button.btn--tertiary:not([disabled], [aria-disabled="true"]):active,
-a.fake-btn--tertiary[href]:active {
-  background-color: var(--color-state-secondary-active);
+a.fake-btn--tertiary[href]:active,
+button.btn--tertiary:not([disabled], [aria-disabled="true"]):active {
+    background-color: var(--color-state-secondary-active);
 }
-button.btn--tertiary[disabled],
+
+a.fake-btn--tertiary:not([href]),
 button.btn--tertiary[aria-disabled="true"]:not(
         [aria-live="polite"][aria-disabled="true"]
     ),
-a.fake-btn--tertiary:not([href]) {
-  color: var(--btn-tertiary-disabled-foreground-color, var(--color-background-disabled));
-}
-button.btn--tertiary.btn--destructive,
-a.fake-btn--tertiary.fake-btn--destructive {
-  border-color: var(--btn-tertiary-destructive-foreground-color, var(--color-stroke-subtle));
-}
-button.btn--tertiary.btn--destructive:not([disabled], [aria-disabled="true"]):focus,
+button.btn--tertiary[disabled] {
+    color: var(
+        --btn-tertiary-disabled-foreground-color,
+        var(--color-background-disabled)
+    );
+}
+
+a.fake-btn--tertiary.fake-btn--destructive,
+button.btn--tertiary.btn--destructive {
+    border-color: var(
+        --btn-tertiary-destructive-foreground-color,
+        var(--color-stroke-subtle)
+    );
+}
+
 a.fake-btn--tertiary.fake-btn--destructive[href]:focus,
-button.btn--tertiary.btn--destructive:not([disabled], [aria-disabled="true"]):hover,
-a.fake-btn--tertiary.fake-btn--destructive[href]:hover {
-  background-color: var(--color-state-secondary-hover);
-}
-button.btn--tertiary.btn--destructive:not([disabled], [aria-disabled="true"]):active,
-a.fake-btn--tertiary.fake-btn--destructive[href]:active {
-  background-color: var(--color-state-secondary-active);
-}
-button.btn--tertiary.btn--destructive[disabled],
-button.btn--tertiary.btn--destructive[aria-disabled="true"] {
-  color: var(--btn-tertiary-destructive-disabled-foreground-color, var(--color-foreground-disabled));
-}
+a.fake-btn--tertiary.fake-btn--destructive[href]:hover,
+button.btn--tertiary.btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):focus,
+button.btn--tertiary.btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):hover {
+    background-color: var(--color-state-secondary-hover);
+}
+a.fake-btn--tertiary.fake-btn--destructive[href]:active,
+button.btn--tertiary.btn--destructive:not(
+        [disabled],
+        [aria-disabled="true"]
+    ):active {
+    background-color: var(--color-state-secondary-active);
+}
+
+button.btn--tertiary.btn--destructive[aria-disabled="true"],
+button.btn--tertiary.btn--destructive[disabled] {
+    color: var(
+        --btn-tertiary-destructive-disabled-foreground-color,
+        var(--color-foreground-disabled)
+    );
+}
+
 button.btn--tertiary.btn--destructive .progress-spinner {
-  --color-spinner-icon-background: #ee9aab;
-  --color-spinner-icon-foreground: #e0103a;
-}
-button.btn--large,
-a.fake-btn--large {
-  border-radius: var(--btn-border-radius, calc(48px / 2));
-  font-size: var(--font-size-medium);
-  min-height: 48px;
-  padding: 13px 20px;
-}
-button.btn--small,
-a.fake-btn--small {
-  border-radius: var(--btn-border-radius, calc(32px / 2));
-  font-size: var(--font-size-default);
-  min-height: 32px;
-  padding: 6px 16px;
-}
-button.btn--form,
-a.fake-btn--form {
-  border-color: inherit;
-  border-radius: var(--expand-btn-border-radius, var(--border-radius-50));
-  max-width: 100%;
-}
-button.btn--form:not([disabled], [aria-disabled="true"]):hover,
+    --color-spinner-icon-background: #ee9aab;
+    --color-spinner-icon-foreground: #e0103a;
+}
+
+a.fake-btn--large,
+button.btn--large {
+    border-radius: var(--btn-border-radius, 24px);
+    font-size: var(--font-size-medium);
+    min-height: 48px;
+    padding: 13px 20px;
+}
+
+a.fake-btn--small,
+button.btn--small {
+    border-radius: var(--btn-border-radius, 16px);
+    font-size: var(--font-size-default);
+    min-height: 32px;
+    padding: 6px 16px;
+}
+
+a.fake-btn--form,
+button.btn--form {
+    border-color: inherit;
+    border-radius: var(--expand-btn-border-radius, var(--border-radius-50));
+    max-width: 100%;
+}
+
+a.fake-btn--form:not([href]):focus,
 a.fake-btn--form:not([href]):hover,
 button.btn--form:not([disabled], [aria-disabled="true"]):focus,
-a.fake-btn--form:not([href]):focus {
-  background-color: var(--color-state-primary-hover);
+button.btn--form:not([disabled], [aria-disabled="true"]):hover {
+    background-color: var(--color-state-primary-hover);
 }
-button.btn--form:not([disabled], [aria-disabled="true"]):active,
-a.fake-btn--form:not([href]):active {
-  background-color: var(--color-state-primary-active);
+a.fake-btn--form:not([href]):active,
+button.btn--form:not([disabled], [aria-disabled="true"]):active {
+    background-color: var(--color-state-primary-active);
 }
+
 button.btn--form.btn--large {
-  padding: 13px 20px;
+    padding: 13px 20px;
 }
+
 button.btn--form.btn--small {
-  padding: 6px 16px;
-}
-button.btn--transparent,
-a.fake-btn--transparent {
-  background-color: transparent;
+    padding: 6px 16px;
 }
-button.btn--transparent:hover,
+a.fake-btn--transparent,
+a.fake-btn--transparent:focus,
 a.fake-btn--transparent:hover,
+button.btn--transparent,
 button.btn--transparent:focus,
-a.fake-btn--transparent:focus {
-  background-color: transparent;
-}
-button.btn--fixed-height,
-a.fake-btn--fixed-height {
-  padding-top: calc(21.5px - 0.75em);
-}
-button.btn--large-fixed-height,
-a.fake-btn--large-fixed-height {
-  height: 48px;
-  min-height: 48px;
-  padding-top: calc(27px - 0.75em);
-}
-button.btn--truncated,
+button.btn--transparent:hover {
+    background-color: initial;
+}
+
+a.fake-btn--fixed-height,
+button.btn--fixed-height {
+    padding-top: calc(21.5px - 0.75em);
+}
+
+a.fake-btn--large-fixed-height,
+button.btn--large-fixed-height {
+    height: 48px;
+    min-height: 48px;
+    padding-top: calc(27px - 0.75em);
+}
+
 a.fake-btn--truncated,
-button.btn--truncated span,
-a.fake-btn--truncated span {
-  line-height: 1.4em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-button.btn--large-truncated,
-a.fake-btn--large-truncated {
-  font-size: var(--font-size-medium);
-  height: 48px;
-  min-height: 48px;
-  padding: 13px 20px;
+a.fake-btn--truncated span,
+button.btn--truncated,
+button.btn--truncated span {
+    line-height: 1.4em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
-button.btn--large-truncated,
+
 a.fake-btn--large-truncated,
-button.btn--large-truncated span,
-a.fake-btn--large-truncated span {
-  line-height: 1.4em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-button.btn--split-start,
-a.fake-btn--split-start {
-  border-radius: 24px 0 0 24px;
-}
-button.btn--split-end,
-a.fake-btn--split-end {
-  border-radius: 0 24px 24px 0;
-  margin-left: -1px;
-  min-width: 40px;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-button.btn.btn--tertiary.btn--split-end,
-a.fake-btn.fake-btn--tertiary.fake-btn--split-end {
-  margin-left: -2px;
-}
-button.btn.btn--primary.btn--split-end,
-a.fake-btn.fake-btn--primary.fake-btn--split-end {
-  border-left-color: var(--btn-primary-border-split-color, var(--color-background-primary));
+button.btn--large-truncated {
+    font-size: var(--font-size-medium);
+    height: 48px;
+    min-height: 48px;
+    padding: 13px 20px;
 }
-button.btn.btn--primary.btn--split-end:hover,
+a.fake-btn--large-truncated,
+a.fake-btn--large-truncated span,
+button.btn--large-truncated,
+button.btn--large-truncated span {
+    line-height: 1.4em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+a.fake-btn--split-start,
+button.btn--split-start {
+    border-radius: 24px 0 0 24px;
+}
+
+a.fake-btn--split-end,
+button.btn--split-end {
+    border-radius: 0 24px 24px 0;
+    margin-left: -1px;
+    min-width: 40px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+a.fake-btn.fake-btn--tertiary.fake-btn--split-end,
+button.btn.btn--tertiary.btn--split-end {
+    margin-left: -2px;
+}
+a.fake-btn.fake-btn--primary.fake-btn--split-end,
+a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,
 a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,
+button.btn.btn--primary.btn--split-end,
 button.btn.btn--primary.btn--split-end:focus,
-a.fake-btn.fake-btn--primary.fake-btn--split-end:focus {
-  border-left-color: var(--btn-primary-border-split-color, var(--color-background-primary));
+button.btn.btn--primary.btn--split-end:hover {
+    border-left-color: var(
+        --btn-primary-border-split-color,
+        var(--color-background-primary)
+    );
 }
+
 button.btn--floating-label {
-  padding-bottom: 0;
-  padding-top: 0;
+    padding-bottom: 0;
+    padding-top: 0;
 }
+
 button.btn--floating-label .btn__text {
-  min-height: 19px;
-  padding-bottom: 2px;
-  padding-top: 17px;
+    min-height: 19px;
+    padding-bottom: 2px;
+    padding-top: 17px;
 }
+
 button.btn--floating-label .btn__floating-label {
-  align-self: flex-start;
-  display: inline-block;
-  overflow: hidden;
-  padding-bottom: 2px;
-  padding-top: 17px;
-  pointer-events: none;
-  position: absolute;
-  text-align: left;
-  text-overflow: ellipsis;
-  transform: scale(0.75, 0.75) translate(0, -18px);
-  transform-origin: left;
-  white-space: nowrap;
-  width: calc(100% - 24px);
-  z-index: 1;
-}
+    align-self: flex-start;
+    display: inline-block;
+    overflow: hidden;
+    padding-bottom: 2px;
+    padding-top: 17px;
+    pointer-events: none;
+    position: absolute;
+    text-align: left;
+    text-overflow: ellipsis;
+    transform: scale(0.75) translateY(-18px);
+    transform-origin: left;
+    white-space: nowrap;
+    width: calc(100% - 24px);
+    z-index: 1;
+}
+
 button.btn--floating-label .btn__floating-label--animate {
-  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), bottom 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+    transition:
+        transform 0.3s ease,
+        bottom 0.3s ease;
 }
+
 button.btn--floating-label .btn__floating-label--inline {
-  font-size: 0.875rem;
-  position: unset;
-  transform: translate(0, -6px);
-}
-[dir="rtl"] button.btn--split-start,
-[dir="rtl"] a.fake-btn--split-start {
-  border-radius: 0 24px 24px 0;
-}
-[dir="rtl"] button.btn--split-end,
-[dir="rtl"] a.fake-btn--split-end {
-  border-radius: 24px 0 0 24px;
-  margin-left: inherit;
-  margin-right: -1px;
-}
-[dir="rtl"] button.btn.btn--tertiary.btn--split-end,
-[dir="rtl"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end {
-  margin-right: -2px;
-}
-[dir="rtl"] button.btn.btn--primary.btn--split-end,
-[dir="rtl"] a.fake-btn.fake-btn--primary.fake-btn--split-end {
-  border-left-color: var(--btn-primary-border-color, var(--color-stroke-accent));
-  border-right-color: var(--primary-border-split-color, var(--color-stroke-subtle));
-}
-[dir="rtl"] button.btn.btn--primary.btn--split-end:hover,
+    font-size: 0.875rem;
+    position: unset;
+    transform: translateY(-6px);
+}
+
+[dir="rtl"] a.fake-btn--split-start,
+[dir="rtl"] button.btn--split-start {
+    border-radius: 0 24px 24px 0;
+}
+[dir="rtl"] a.fake-btn--split-end,
+[dir="rtl"] button.btn--split-end {
+    border-radius: 24px 0 0 24px;
+    margin-left: inherit;
+    margin-right: -1px;
+}
+[dir="rtl"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,
+[dir="rtl"] button.btn.btn--tertiary.btn--split-end {
+    margin-right: -2px;
+}
+[dir="rtl"] a.fake-btn.fake-btn--primary.fake-btn--split-end,
+[dir="rtl"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,
 [dir="rtl"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,
+[dir="rtl"] button.btn.btn--primary.btn--split-end,
 [dir="rtl"] button.btn.btn--primary.btn--split-end:focus,
-[dir="rtl"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus {
-  border-left-color: var(--btn-primary-border-color, var(--color-stroke-accent));
-  border-right-color: var(--primary-border-split-color, var(--color-stroke-subtle));
-}
+[dir="rtl"] button.btn.btn--primary.btn--split-end:hover {
+    border-left-color: var(
+        --btn-primary-border-color,
+        var(--color-stroke-accent)
+    );
+    border-right-color: var(
+        --primary-border-split-color,
+        var(--color-stroke-subtle)
+    );
+}
+
+/*# sourceMappingURL=button.css.map */