.dxp-button {
  /* component variables */
  --button-min-height: 2.75rem;
  --button-icon-size: 1rem;
  --button-width: var(--inline-button-width, auto);
  --button-filled-background-color: var(--inline-button-filled-background-color, var(--dxp-color-brand-primary));
  --button-border: var(--dxp-line-width) var(--dxp-line-style) var(--button-filled-background-color);
  --button-border-radius: var(--inline-button-border-radius, var(--dxp-style-radius-2xl));
  --button-label-color: var(--inline-button-label-color, var(--dxp-color-foreground-primary));
  --button-filled-label-color: var(--inline-button-label-color, var(--dxp-color-background-primary));
  --button-elevated-label-color: var(--inline-button-label-color, var(--dxp-black-color));
  --button-elevated-border-color: var(--dxp-shade-900, #cbcddf);
  --button-hover-color: var(--inline-button-hover-color, color-mix(in srgb, var(--button-filled-background-color) 75%, #000 25%));
  --button-disabled-background-color: var(--dxp-shade-900);
  --button-disabled-label-color: var(--dxp-white-color);
  --button-disabled-cursor: not-allowed;
  --button-padding-vertical: var(--dxp-spacing-1);
  --button-padding-horizontal: var(--dxp-spacing-2);
  --button-text-transform: none;
  --button-text-decoration: none;
  --button-text-hover-decoration: none;
  --button-font: var(--dxp-font-body-secondary);
  --button-letter-spacing: var(--dxp-letter-spacing-wide);
  --button-outline-width: var(--dxp-outline-width);
  --button-outline-offset: var(--dxp-outline-offset);
  --button-brand-focus: var(--dxp-color-brand-focus);
  /* end: component variables */

  position: relative;
  display: inline-flex;
  overflow: hidden;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--button-width);
  min-height: var(--button-min-height);
  margin-right: 0;
  margin-left: 0;
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s, box-shadow 0.3s ease;;
  text-align: center;
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
  color: var(--button-label-color);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  font: var(--button-font);
  appearance: none;
  gap: 0.5rem;
}

  .dxp-button:hover {
    -webkit-text-decoration: var(--button-text-hover-decoration);
    text-decoration: var(--button-text-hover-decoration);
  }

  .dxp-button.disabled, .dxp-button [disabled] {
    --icon-color: var(--button-disabled-label-color);

    cursor: var(--button-disabled-cursor);
    color: var(--button-disabled-label-color);
    background-color: var(--button-disabled-background-color);
  }

  .dxp-button.color--primary {
    --button-filled-background-color: var(--dxp-color-brand-primary);
  }

  .dxp-button.color--secondary {
    --button-filled-background-color: var(--dxp-color-brand-secondary);
  }

  .dxp-button.color--tertiary {
    --button-filled-background-color: var(--dxp-color-brand-tertiary);
  }

  .dxp-button__icon {
    --icon-size: var(--button-icon-size);

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }

  .dxp-button__icon svg {
      width: var(--button-icon-size);
      min-width: 0.875rem;
      height: var(--button-icon-size);
      min-height: 0.875rem;
    }

  .dxp-button__label {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .dxp-button__label.dxp-button__icon-left {
      padding-left: 0;
    }

  .dxp-button__label.dxp-button__icon-right {
      padding-right: 0;
    }

  .dxp-button--text {
    --icon-color: var(--button-filled-background-color);

    color: var(--button-filled-background-color);
    border: none;
    background-color: transparent;
    padding-block: var(--button-padding-vertical);
    padding-inline: 0;
  }

  .dxp-button--text:hover {
      --icon-color: var(--button-hover-color);

      color: var(--button-hover-color);
    }

  .dxp-button--text .dxp-button__label {
      padding-right: 0;
      padding-left: 0;
    }

  .dxp-button--text:focus-visible {
      --icon-color: var(--button-hover-color);

      color: var(--button-hover-color);
      outline: var(--button-outline-width) solid var(--button-brand-focus);
      outline-offset: var(--button-outline-offset);
    }

  .dxp-button--text:active {
      --icon-color: var(--button-filled-background-color);

      color: var(--button-filled-background-color);
    }

  .dxp-button--text.disabled, .dxp-button--text [disabled] {
      --icon-color: var(--dxp-black-color) !important;

      opacity: 0.4;
      color: var(--dxp-black-color) !important;
      background-color: transparent !important;
    }

  .dxp-button--filled {
    --icon-color: var(--button-filled-label-color);

    color: var(--button-filled-label-color);
    border: none;
    background-color: var(--button-filled-background-color);
  }

  .dxp-button--filled:hover {
      background-color: var(--button-hover-color);
    }

  .dxp-button--filled:focus-visible {
      outline: var(--button-outline-width) solid var(--button-brand-focus);
      outline-offset: var(--button-outline-offset);
    }

  .dxp-button--filled.disabled, .dxp-button--filled [disabled] {
      background-color: var(--button-disabled-background-color) !important;
    }

  .dxp-button--outlined {
    --icon-color: var(--button-filled-background-color);

    color: var(--button-filled-background-color);
    border-color: var(--button-elevated-border-color);
    background-color: transparent;
  }

  .dxp-button--outlined:hover {
      --icon-color: var(--button-hover-color);

      color: var(--button-hover-color);
      border-color: var(--button-hover-color);
    }

  .dxp-button--outlined:focus-visible {
      border-color: transparent;
      outline: var(--button-outline-width) solid var(--button-brand-focus);
      outline-offset: var(--button-outline-offset);
    }

  .dxp-button--outlined:active {
      --icon-color: var(--button-filled-background-color);

      color: var(--button-filled-background-color);
      border-color: #cbcddf;
    }

  .dxp-button--outlined.disabled, .dxp-button--outlined [disabled] {
      --icon-color: var(--button-disabled-label-color) !important;

      color: var(--button-disabled-label-color) !important;
      border-color: transparent !important;
      background-color: var(--button-disabled-background-color) !important;
    }

  .dxp-button--elevated {
    --icon-color: var(--button-filled-background-color);

    color: var(--button-filled-background-color);
    border: none;
    background-color: #fff;
    box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.15), 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.30);
  }

  .dxp-button--elevated:hover {
      --icon-color: var(--button-hover-color);

      color: var(--button-hover-color);
      box-shadow: 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.15), 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.30);
    }

  .dxp-button--elevated:focus-visible {
      outline: var(--button-outline-width) solid var(--button-brand-focus);
      outline-offset: var(--button-outline-offset);
      box-shadow: none;
    }

  .dxp-button--elevated:active {
      --icon-color: var(--button-filled-background-color);

      color: var(--button-filled-background-color);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(0, 0, 0, 0.15);
    }

  .dxp-button--elevated.disabled, .dxp-button--elevated [disabled] {
      --icon-color: var(--button-disabled-label-color) !important;

      color: var(--button-disabled-label-color) !important;
      background-color: var(--button-disabled-background-color) !important;
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(0, 0, 0, 0.15) !important;
    }

  .dxp-button--tonal {
    --icon-color: var(--dxp-black-color);

    color: var(--dxp-black-color);
    border: none;
    background-color: color-mix(in sRGB, var(--button-filled-background-color) 50%, var(--button-filled-label-color) 50%);
  }

  .dxp-button--tonal:hover {
      --icon-color: var(--button-hover-color);

      color: var(--button-hover-color);
      background-color: color-mix(in sRGB, var(--button-filled-background-color) 30%, var(--button-filled-label-color) 70%);
    }

  .dxp-button--tonal:focus-visible {
      outline: var(--button-outline-width) solid var(--button-brand-focus);
      outline-offset: var(--button-outline-offset);
      box-shadow: none;
    }

  .dxp-button--tonal:active {
      background-color: color-mix(in sRGB, var(--button-filled-background-color) 25%, var(--button-filled-label-color) 75%);
    }

  .dxp-button--tonal.disabled, .dxp-button--tonal [disabled] {
      --icon-color: var(--button-disabled-label-color) !important;

      color: var(--button-disabled-label-color) !important;
      background-color: var(--button-disabled-background-color) !important;
    }