._button_193uu_1 {
  /*
    To account for the blank space inside of icons, we define CSS custom property values to be subtracted from the vertical padding when an icon is present. Icons have different amounts of white space depending on their shape, but they all have at least 2px of white space on each side.
    PDL button icon sizes vary by button size and variant, and their icon sizes are defined in rems. So the subtraction value needs to be defined in rems to properly scale. The precise subtraction values are below, but we use 0.125rem (i.e. --zds-space-2) for simplicity.
      - compact/small: 0.83 rem white space on each side
      - medium: 0.10 rem white space on each side
      - large: 0.125 rem white space on each side
  */
  --padding-left-subtraction: 0px;
  --padding-right-subtraction: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--zds-size-8);
  padding: 0 var(--zds-space-12);
  padding-left: calc(var(--zds-space-12) - var(--padding-left-subtraction));
  padding-right: calc(var(--zds-space-12) - var(--padding-right-subtraction));
  cursor: pointer;
  border-style: solid;
  border-radius: var(--zds-radius-small);
  border-width: 1px;
  border-color: transparent;
  transition-property: all;
  transition-timing-function: ease-in-out;
  transition-duration: 200ms;
  /* Once the different legacy focus-visible styles are removed, this will be the only data-focus-visible block needed. */
}
._button_193uu_1[data-has-icon-start] {
  --padding-left-subtraction: var(--zds-size-2);
}
._button_193uu_1[data-has-icon-end] {
  --padding-right-subtraction: var(--zds-size-2);
}
._button_193uu_1[data-hovered] {
  box-shadow: var(--zds-radius-none);
  color: #000;
}
._button_193uu_1[data-loading=true] {
  cursor: not-allowed;
}
._button_193uu_1 [role=status] {
  opacity: 0;
  position: absolute;
  transition: opacity 200ms ease-in-out;
  animation-play-state: paused;
}
._button_193uu_1[data-loading=true] [role=status] {
  opacity: 1;
  animation-play-state: running;
}
._button_193uu_1 ._content_193uu_51 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--zds-size-8);
  opacity: 1;
  transition: opacity 100ms ease, transform 100ms ease;
}
._button_193uu_1[data-loading=true] ._content_193uu_51 {
  opacity: 0;
  transform: translateY(5px);
}
._button_193uu_1[data-size=compact] {
  height: var(--zds-size-small);
  padding: 0 var(--zds-space-8);
  padding-left: calc(var(--zds-space-8) - var(--padding-left-subtraction));
  padding-right: calc(var(--zds-space-8) - var(--padding-right-subtraction));
  gap: var(--zds-space-4);
}
._button_193uu_1[data-size=compact] [data-testid=iconContainer] {
  height: var(--zds-size-16);
  width: var(--zds-size-16);
}
._button_193uu_1[data-size=compact] [role=status] {
  height: var(--zds-space-12);
  width: var(--zds-space-12);
  border-width: 3px;
}
._button_193uu_1[data-size=small] {
  height: var(--zds-size-small);
  padding: 0 var(--zds-space-8);
  padding-left: calc(var(--zds-space-8) - var(--padding-left-subtraction));
  padding-right: calc(var(--zds-space-8) - var(--padding-right-subtraction));
  gap: var(--zds-space-4);
}
._button_193uu_1[data-size=small] [data-testid=iconContainer] {
  height: var(--zds-size-16);
  width: var(--zds-size-16);
}
._button_193uu_1[data-size=small] [role=status] {
  height: var(--zds-space-12);
  width: var(--zds-space-12);
  border-width: 3px;
}
._button_193uu_1[data-size=medium] {
  height: var(--zds-size-medium);
}
._button_193uu_1[data-size=medium] [data-testid=iconContainer] {
  height: var(--zds-size-20);
  width: var(--zds-size-20);
}
._button_193uu_1[data-size=medium] [role=status] {
  height: var(--zds-size-16);
  width: var(--zds-size-16);
}
._button_193uu_1[data-size=large] {
  height: var(--zds-size-large);
  padding: 0 var(--zds-space-16);
  padding-left: calc(var(--zds-space-16) - var(--padding-left-subtraction));
  padding-right: calc(var(--zds-space-16) - var(--padding-right-subtraction));
  gap: var(--zds-space-12);
}
._button_193uu_1[data-size=large] [data-testid=iconContainer] {
  height: var(--zds-size-24);
  width: var(--zds-size-24);
}
._button_193uu_1[data-size=large] [role=status] {
  height: var(--zds-size-20);
  width: var(--zds-size-20);
}
._button_193uu_1[data-focus-visible] {
  outline: var(--zds-border-focus);
  outline-offset: var(--zds-space-2);
}
._button_193uu_1[data-variant=brand] {
  border-radius: var(--zds-radius-large);
  background-color: var(--zds-ui-brand);
  color: var(--zds-text-inverted);
}
._button_193uu_1[data-variant=brand] [role=status] {
  border-color: var(--zds-text-inverted);
  border-right-color: transparent;
}
._button_193uu_1[data-variant=brand][data-focus-visible] {
  outline: var(--zds-border-focus);
  outline-offset: var(--zds-space-2);
}
._button_193uu_1[data-variant=brand][data-hovered] {
  background-color: var(--zds-ui-brand-stronger);
}
._button_193uu_1[data-variant=brand][data-size=compact] {
  padding: 0 var(--zds-space-12);
  padding-left: calc(var(--zds-space-12) - var(--padding-left-subtraction));
  padding-right: calc(var(--zds-space-12) - var(--padding-right-subtraction));
  font: var(--zds-minimal-print-3);
}
._button_193uu_1[data-variant=brand][data-size=small] {
  padding: 0 var(--zds-space-12);
  padding-left: calc(var(--zds-space-12) - var(--padding-left-subtraction));
  padding-right: calc(var(--zds-space-12) - var(--padding-right-subtraction));
  font: var(--zds-body-3);
}
._button_193uu_1[data-variant=brand][data-size=medium] {
  padding: 0 var(--zds-space-16);
  padding-left: calc(var(--zds-space-16) - var(--padding-left-subtraction));
  padding-right: calc(var(--zds-space-16) - var(--padding-right-subtraction));
  font: var(--zds-body-3);
}
._button_193uu_1[data-variant=brand][data-size=large] {
  padding: 0 var(--zds-space-20);
  padding-left: calc(var(--zds-space-20) - var(--padding-left-subtraction));
  padding-right: calc(var(--zds-space-20) - var(--padding-right-subtraction));
  font: var(--zds-paragraph-header-3);
}
._button_193uu_1[data-variant=primary] {
  background-color: var(--zds-ui-primary-stronger);
  color: var(--zds-text-inverted);
}
._button_193uu_1[data-variant=primary] [role=status] {
  border-color: var(--zds-text-inverted);
  border-right-color: transparent;
}
._button_193uu_1[data-variant=primary][data-hovered] {
  background-color: var(--zds-ui-primary-strongest);
}
._button_193uu_1[data-variant=primary][data-size=compact] {
  font: var(--zds-minimal-print-3);
}
._button_193uu_1[data-variant=primary][data-size=small], ._button_193uu_1[data-variant=primary][data-size=medium] {
  font: var(--zds-body-3);
}
._button_193uu_1[data-variant=primary][data-size=large] {
  font: var(--zds-paragraph-header-3);
}
._button_193uu_1[data-variant=secondary] {
  background-color: var(--zds-ui-primary-weaker);
  border-color: var(--zds-ui-primary-weaker);
  color: var(--zds-ui-primary-strongest);
  border-width: 1px;
}
._button_193uu_1[data-variant=secondary] [role=status] {
  border-color: var(--zds-ui-primary-strongest);
  border-right-color: transparent;
}
._button_193uu_1[data-variant=secondary][data-hovered] {
  background-color: var(--zds-ui-primary);
  border-color: var(--zds-ui-primary);
  color: var(--zds-text-inverted);
}
._button_193uu_1[data-variant=secondary][data-size=compact] {
  font: var(--zds-minimal-print-2);
}
._button_193uu_1[data-variant=secondary][data-size=small], ._button_193uu_1[data-variant=secondary][data-size=medium] {
  font: var(--zds-body-2);
}
._button_193uu_1[data-variant=secondary][data-size=large] {
  font: var(--zds-paragraph-header-2);
}
._button_193uu_1[data-variant=tertiary] {
  background-color: var(--zds-background-weaker);
  color: var(--zds-text-default);
  border: var(--zds-border-default);
}
._button_193uu_1[data-variant=tertiary] [role=status] {
  border-color: var(--zds-text-default);
  border-right-color: transparent;
}
._button_193uu_1[data-variant=tertiary][data-focus-visible] {
  outline: var(--zds-border-focus);
  outline-offset: var(--zds-space-2);
}
._button_193uu_1[data-variant=tertiary][data-hovered] {
  background-color: var(--zds-background-stronger);
  color: var(--zds-text-default);
}
._button_193uu_1[data-variant=tertiary][data-size=compact] {
  font: var(--zds-minimal-print-2);
}
._button_193uu_1[data-variant=tertiary][data-size=small], ._button_193uu_1[data-variant=tertiary][data-size=medium] {
  font: var(--zds-body-2);
}
._button_193uu_1[data-variant=tertiary][data-size=large] {
  font: var(--zds-paragraph-header-2);
}
._button_193uu_1[data-variant=ghost] {
  background-color: transparent;
  color: var(--zds-ui-primary-stronger);
}
._button_193uu_1[data-variant=ghost] [role=status] {
  border-color: var(--zds-text-weakest);
  border-right-color: transparent;
}
._button_193uu_1[data-variant=ghost][data-hovered] {
  background-color: var(--zds-ui-primary-weakest);
}
._button_193uu_1[data-variant=ghost][data-size=compact] {
  font: var(--zds-minimal-print-2);
}
._button_193uu_1[data-variant=ghost][data-size=small], ._button_193uu_1[data-variant=ghost][data-size=medium] {
  font: var(--zds-body-2);
}
._button_193uu_1[data-variant=ghost][data-size=large] {
  font: var(--zds-paragraph-header-2);
}
._button_193uu_1[data-variant=danger] {
  background-color: var(--zds-status-error-stronger);
  color: var(--zds-text-inverted);
}
._button_193uu_1[data-variant=danger] [role=status] {
  border-color: var(--zds-text-inverted);
  border-right-color: transparent;
}
._button_193uu_1[data-variant=danger][data-focus-visible] {
  outline: var(--zds-border-focus);
  outline-offset: var(--zds-space-2);
}
._button_193uu_1[data-variant=danger][data-hovered] {
  background-color: var(--zds-status-error-stronger);
}
._button_193uu_1[data-variant=danger][data-size=compact] {
  font: var(--zds-minimal-print-2);
}
._button_193uu_1[data-variant=danger][data-size=small], ._button_193uu_1[data-variant=danger][data-size=medium] {
  font: var(--zds-body-3);
}
._button_193uu_1[data-variant=danger][data-size=large] {
  font: var(--zds-paragraph-header-3);
}
._button_193uu_1[data-disabled]:not([data-loading]) {
  cursor: not-allowed;
  background-color: var(--zds-background-strongest);
  border-color: var(--zds-background-strongest);
  border-width: 1px;
  color: var(--zds-text-weakest);
  outline: none;
  box-shadow: none;
}
._button_193uu_1[data-disabled]:not([data-loading])[data-variant=tertiary] {
  background-color: var(--zds-background-strongest);
  border: none;
}._iconButton_10t6e_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--zds-radius-small);
  padding: var(--zds-space-4);
}
._iconButton_10t6e_1[data-hovered] {
  cursor: pointer;
}
._iconButton_10t6e_1[data-disabled] {
  cursor: not-allowed;
}
._iconButton_10t6e_1[data-focus-visible] {
  outline: var(--zds-border-focus);
  outline-offset: var(--zds-space-2);
}
._iconButton_10t6e_1[data-size=small] {
  width: var(--zds-size-small);
  height: var(--zds-size-small);
}
._iconButton_10t6e_1[data-size=small] span {
  width: var(--zds-size-20);
  height: var(--zds-size-20);
}
._iconButton_10t6e_1[data-size=medium] {
  width: var(--zds-size-medium);
  height: var(--zds-size-medium);
}
._iconButton_10t6e_1[data-size=medium] span {
  width: var(--zds-size-24);
  height: var(--zds-size-24);
}
._iconButton_10t6e_1[data-size=large] {
  width: var(--zds-size-large);
  height: var(--zds-size-large);
}
._iconButton_10t6e_1[data-size=large] span {
  width: var(--zds-size-32);
  height: var(--zds-size-32);
}
._iconButton_10t6e_1[data-variant=primary] {
  border: 1px solid var(--zds-ui-primary-stronger);
  background-color: var(--zds-ui-primary-stronger);
  color: var(--zds-prime-white);
}
._iconButton_10t6e_1[data-variant=primary][data-hovered] {
  color: var(--zds-prime-white);
  background-color: var(--zds-ui-primary-strongest);
}
._iconButton_10t6e_1[data-variant=primary][data-disabled] {
  background: var(--zds-background-strongest);
  border: 1px solid var(--zds-background-strongest);
  color: var(--zds-text-weakest);
}
._iconButton_10t6e_1[data-variant=secondary] {
  color: var(--zds-ui-primary-stronger);
  background-color: var(--zds-ui-primary-weaker);
  border: 1px solid var(--zds-ui-primary-weaker);
}
._iconButton_10t6e_1[data-variant=secondary][data-hovered] {
  color: var(--zds-prime-white);
  background-color: var(--zds-ui-primary);
  border-color: var(--zds-ui-primary);
}
._iconButton_10t6e_1[data-variant=secondary][data-disabled] {
  color: var(--zds-text-weakest);
  background: var(--zds-background-strongest);
  border-color: var(--zds-background-strongest);
}
._iconButton_10t6e_1[data-variant=tertiary] {
  background-color: var(--zds-background-weaker);
  color: var(--zds-text-default);
  border: 1px solid var(--zds-stroke-default);
}
._iconButton_10t6e_1[data-variant=tertiary][data-hovered] {
  background-color: var(--zds-background-stronger);
}
._iconButton_10t6e_1[data-variant=tertiary][data-focus-visible] {
  background-color: var(--zds-background-weaker);
}
._iconButton_10t6e_1[data-variant=tertiary][data-disabled] {
  background-color: var(--zds-background-strongest);
  border: none;
  color: var(--zds-text-weakest);
}
._iconButton_10t6e_1[data-variant=ghost] {
  color: var(--zds-gray-warm-8);
  background-color: transparent;
}
._iconButton_10t6e_1[data-variant=ghost][data-hovered] {
  background-color: var(--zds-ui-primary-weakest);
}
._iconButton_10t6e_1[data-variant=ghost][data-focus-visible] {
  background-color: var(--zds-background-weaker);
}
._iconButton_10t6e_1[data-variant=ghost][data-disabled] {
  background-color: var(--zds-background-strongest);
  border-color: var(--zds-background-strongest);
  color: var(--zds-text-weakest);
}
._iconButton_10t6e_1[data-variant=brand] {
  background-color: var(--zds-ui-brand);
  color: var(--zds-prime-white);
}
._iconButton_10t6e_1[data-variant=brand][data-hovered] {
  background-color: var(--zds-ui-brand-stronger);
}
._iconButton_10t6e_1[data-variant=brand][data-disabled] {
  background-color: var(--zds-background-strongest);
  border-color: var(--zds-background-strongest);
  color: var(--zds-text-weakest);
}