:host {
  --pds-button-background: var(--color-background-default);
  --pds-button-border: var(--pine-border);
  --pds-button-border-radius: var(--pine-border-radius-full);
  --pds-button-border-radius-start-end: var(--pine-border-radius-full);
  --pds-button-border-radius-start-start: var(--pine-border-radius-full);
  --pds-button-border-radius-end-end: var(--pine-border-radius-full);
  --pds-button-border-radius-end-start: var(--pine-border-radius-full);
  --pds-button-min-height: var(--pine-dimension-450);
  --pds-button-outline-offset: var(--pine-border-width);
  --color-border-default: transparent;
  --color-border-disabled: transparent;
  --color-border-focus: transparent;
  --color-border-hover: transparent;
  --button-loader-color: var(--color-text-default);
  display: inline-flex;
  vertical-align: middle;
}

:host([full-width=true]) {
  display: flex;
  width: 100%;
}
:host([full-width=true]) a,
:host([full-width=true]) button {
  justify-content: center;
  width: 100%;
}
:host([full-width=true]) .pds-button__content {
  justify-content: center;
  text-align: center;
}

:host([loading=true]) {
  cursor: wait;
  pointer-events: none;
}

:host([aria-disabled=true]) {
  pointer-events: none;
}

.pds-button {
  --pds-loader-color: var(--color-text-default);
  align-items: center;
  background-color: var(--pds-button-background, var(--color-background-default));
  border: var(--pds-button-border);
  border-color: var(--color-border-default);
  border-radius: var(--pds-button-border-radius);
  /* stylelint-disable-next-line order/properties-alphabetical-order */
  border-end-end-radius: var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));
  border-end-start-radius: var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));
  border-start-end-radius: var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));
  border-start-start-radius: var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));
  box-sizing: border-box;
  color: var(--color-text-default);
  cursor: pointer;
  display: flex;
  font: var(--pine-typography-body-brand-label);
  letter-spacing: var(--pine-letter-spacing);
  min-height: var(--pds-button-min-height);
  padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);
  position: relative;
  text-decoration: none;
}
.pds-button pds-icon {
  color: currentColor;
  fill: currentColor;
}
.pds-button:hover {
  background-color: var(--color-background-hover);
  border-color: var(--color-border-hover);
}
.pds-button:focus-visible {
  border-color: var(--color-border-focus);
  box-shadow: var(--pds-button-box-shadow-focus, none);
  outline: var(--pds-button-outline-focus, var(--pine-outline-focus));
  outline-offset: var(--pds-button-outline-offset);
}
.pds-button:disabled {
  background-color: var(--color-background-disabled);
  border-color: var(--color-border-disabled);
  color: var(--color-text-disabled);
  pointer-events: none;
}

.pds-button--primary {
  --color-background-default: var(--pine-color-primary);
  --color-background-hover: var(--pine-color-primary-hover);
  --color-background-disabled: var(--pine-color-primary-disabled);
  --color-border-default: var(--pine-color-primary);
  --color-border-hover: var(--pine-color-primary-hover);
  --color-text-default: var(--pine-color-text-primary);
  --color-text-disabled: var(--pine-color-text-primary-disabled);
  --color-outline: var(--pine-color-focus-ring);
  --button-loader-color: var(--pine-color-text-primary);
}

.pds-button--accent {
  --color-background-default: var(--pine-color-accent);
  --color-background-hover: var(--pine-color-accent-hover);
  --color-background-disabled: var(--pine-color-accent-disabled);
  --color-border-default: var(--pine-color-accent);
  --color-border-hover: var(--pine-color-accent-hover);
  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
  --color-text-default: var(--pine-color-white);
  --color-text-disabled: var(--pine-color-text-accent-disabled);
  --color-outline: var(--pine-color-focus-ring);
  --button-loader-color: var(--pine-color-text-primary);
}

.pds-button--destructive {
  --color-background-default: var(--pine-color-danger);
  --color-background-hover: var(--pine-color-danger-hover);
  --color-background-disabled: var(--pine-color-danger-disabled);
  --color-border-default: var(--pine-color-danger);
  --color-border-hover: var(--pine-color-danger-hover);
  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
  --color-text-default: var(--pine-color-white);
  --color-text-disabled: var(--pine-color-text-danger-disabled);
  --color-outline: var(--pine-color-focus-ring-danger);
  --button-loader-color: var(--pine-color-text-primary);
}
.pds-button--destructive:focus-visible {
  outline-color: var(--pine-color-focus-ring-danger);
}

.pds-button--secondary,
.pds-button--disclosure {
  --color-background-default: var(--pine-color-secondary);
  --color-background-hover: var(--pine-color-secondary-hover);
  --color-background-disabled: var(--pine-color-secondary-disabled);
  --color-border-disabled: var(--pine-color-border-disabled);
  --color-border-focus: var(--pine-color-border);
  --color-border-hover: var(--pine-color-border-hover);
  --color-border-default: var(--pine-color-border);
  --color-text-default: var(--pine-color-text-secondary);
  --color-text-disabled: var(--pine-color-text-secondary-disabled);
  --color-outline: var(--pine-color-focus-ring);
  --button-loader-color: var(--pine-color-text-secondary);
}
.pds-button--secondary:hover,
.pds-button--disclosure:hover {
  background-color: var(--pine-color-secondary-hover);
}

.pds-button--tertiary {
  --color-background-default: transparent;
  --color-background-hover: var(--pine-color-background-muted);
  --color-background-disabled: transparent;
  --color-border-default: transparent;
  --color-border-hover: var(--pine-color-background-muted);
  --color-border-disabled: transparent;
  --color-text-default: var(--pine-color-text-secondary);
  --color-text-disabled: var(--pine-color-text-secondary-disabled);
  --color-outline: var(--pine-color-focus-ring);
  --button-loader-color: var(--pine-color-text-secondary);
}

.pds-button--filter {
  --color-background-default: var(--pine-color-background-container);
  --color-background-hover: var(--pine-color-background-subtle);
  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
  --color-background-disabled: var(--pine-color-white);
  --color-border-default: transparent;
  --color-border-hover: transparent;
  --color-border-focus: transparent;
  --color-text-default: var(--pine-color-text-secondary);
  --color-text-hover: var(--pine-color-text-hover);
  --color-text-disabled: var(--pine-color-text-disabled);
  --color-outline: var(--pine-color-focus-ring);
  --button-loader-color: var(--pine-color-text-secondary);
  --pds-button-border-radius: var(--pine-dimension-125);
  --pds-button-border-radius-start-end: var(--pine-dimension-125);
  --pds-button-border-radius-start-start: var(--pine-dimension-125);
  --pds-button-border-radius-end-end: var(--pine-dimension-125);
  --pds-button-border-radius-end-start: var(--pine-dimension-125);
  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
}
.pds-button--filter:disabled {
  background-color: var(--pine-color-background-container);
}
.pds-button--filter:hover {
  color: var(--color-text-hover);
}

.pds-button--unstyled {
  --color-background-default: transparent;
  --color-background-hover: transparent;
  --color-background-disabled: transparent;
  --color-text-default: var(--pine-color-text);
  --button-loader-color: var(--pine-color-text);
  border-width: var(--pine-dimension-none);
  margin: var(--pine-dimension-none);
  min-height: auto;
  padding: var(--pine-dimension-none);
  width: inherit;
}

.pds-button__content {
  align-items: center;
  display: inline-flex;
  gap: var(--pine-dimension-xs);
  position: relative;
  width: 100%;
}

.pds-button__icon {
  display: inline-flex;
}
.pds-button__icon--empty {
  display: none;
}

.pds-button__text {
  align-items: center;
  display: inline-flex;
  white-space: nowrap;
}

.pds-button__icon--hidden,
.pds-button__text--hidden {
  opacity: 0;
}

.pds-button__loader {
  height: var(--pine-dimension-250);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--pine-dimension-250);
}

.pds-button--loading {
  cursor: wait;
  pointer-events: none;
}
.pds-button--loading .pds-button__loader pds-loader {
  --loader-color: var(--button-loader-color);
}

.pds-button--small {
  min-height: var(--pine-dimension-400);
  padding: calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm);
}

.pds-button--micro {
  font-size: var(--pine-font-size-085);
  min-height: var(--pine-dimension-300);
  padding: var(--pine-dimension-025) var(--pine-dimension-xs);
}

.pds-button--icon-only {
  align-items: center;
  border-radius: var(--pine-border-radius-full);
  height: var(--button-dimension);
  justify-content: center;
  min-height: var(--button-dimension);
  min-width: var(--button-dimension);
  padding: var(--pine-dimension-xs);
  width: var(--button-dimension);
}
.pds-button--icon-only .pds-button__content {
  height: 100%;
  justify-content: center;
  width: 100%;
}
.pds-button--icon-only .pds-button__text--hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.pds-button--icon-only.pds-button--small {
  height: var(--pine-dimension-400);
  min-height: var(--pine-dimension-400);
  min-width: var(--pine-dimension-400);
  padding: var(--pine-dimension-2xs);
  width: var(--pine-dimension-400);
}
.pds-button--icon-only.pds-button--micro {
  height: var(--pine-dimension-300);
  min-height: var(--pine-dimension-300);
  min-width: var(--pine-dimension-300);
  padding: var(--pine-dimension-3xs);
  width: var(--pine-dimension-300);
}