:host {
  appearance: none !important; /* Safari browser reset */
  display: inline-flex;

  > :where(.ld-button) {
    width: 100%;
  }
}

:where(.ld-button) {
  margin: 0; /* margin reset for Safari must have zero specificity! */
}

.ld-button {
  --ld-button-border-top-left-radius: var(--ld-br-m);
  --ld-button-border-top-right-radius: var(--ld-br-m);
  --ld-button-border-bottom-right-radius: var(--ld-br-m);
  --ld-button-border-bottom-left-radius: var(--ld-br-m);
  --ld-button-icon-size-sm: 1rem;
  --ld-button-icon-size-md: 1.25rem;
  --ld-button-icon-size-lg: 1.5rem;
  --ld-button-icon-margin-x-sm: -0.125rem;
  --ld-button-icon-margin-x-md: -0.25rem;
  --ld-button-icon-margin-x-lg: -0.5rem;
  --ld-button-padding-x-sm: 0.625rem;
  --ld-button-padding-y-sm: 0.5rem;
  --ld-button-padding-x-md: 0.875rem;
  --ld-button-padding-y-md: 0.625rem;
  --ld-button-padding-x-lg: 1.3125rem;
  --ld-button-padding-y-lg: 0.75rem;
  --ld-button-gap-sm: 0.625rem;
  --ld-button-gap-md: 0.875rem;
  --ld-button-gap-lg: 1.1875rem;

  /* colors */
  --ld-button-bg-color: var(--ld-thm-primary);
  --ld-button-text-color: var(--ld-col-wht);
  --ld-button-progress-color: var(--ld-thm-secondary);
  --ld-button-bg-color-focus: var(--ld-thm-primary-focus);
  --ld-button-text-color-focus: var(--ld-thm-primary-active);
  --ld-button-bg-color-hover: var(--ld-thm-primary-hover);
  --ld-button-text-color-hover: var(--ld-col-wht);
  --ld-button-bg-color-active: var(--ld-thm-primary-active);
  --ld-button-text-color-active: var(--ld-col-wht);

  /* brand */
  --ld-button-brand-bg-color: var(--ld-col-wht);
  --ld-button-brand-text-color: var(--ld-thm-primary);
  --ld-button-brand-text-color-focus: var(--ld-thm-primary-focus);
  --ld-button-brand-bg-color-hover: var(--ld-col-wht-alpha-high);
  --ld-button-brand-bg-color-active: var(--ld-col-wht-alpha-medium);
  --ld-button-secondary-brand-text-color: var(--ld-col-wht);
  --ld-button-secondary-brand-progress-color: var(--ld-col-wht);
  --ld-button-secondary-brand-text-color-focus: var(--ld-col-wht-alpha-high);
  --ld-button-secondary-brand-progress-color-focus: var(
    --ld-col-wht-alpha-high
  );
  --ld-button-secondary-brand-bg-color-hover: var(--ld-col-wht-alpha-low);
  --ld-button-secondary-brand-bg-color-active: var(--ld-col-wht-alpha-lowest);
  --ld-button-secondary-brand-text-color-active: var(
    --ld-col-wht-alpha-highest
  );
  --ld-button-secondary-brand-progress-color-active: var(
    --ld-col-wht-alpha-highest
  );

  /* ghost */
  --ld-button-ghost-bg-color-active: var(--ld-thm-primary-alpha-low);
  --ld-button-ghost-bg-color-hover: var(--ld-thm-primary-alpha-lowest);
  --ld-button-ghost-progress-color: var(--ld-thm-primary);
  --ld-button-ghost-progress-color-active: var(--ld-thm-primary-active);
  --ld-button-ghost-progress-color-focus: var(--ld-thm-primary-focus);
  --ld-button-ghost-progress-color-hover: var(--ld-thm-primary-hover);
  --ld-button-ghost-progress-track-color: var(--ld-thm-primary-alpha-low);
  --ld-button-ghost-text-color: var(--ld-thm-primary);
  --ld-button-ghost-text-color-active: var(--ld-thm-primary-active);
  --ld-button-ghost-text-color-focus: var(--ld-thm-primary-focus);
  --ld-button-ghost-text-color-hover: var(--ld-thm-primary-hover);

  /* highlight */
  --ld-button-highlight-bg-color: var(--ld-thm-warning);
  --ld-button-highlight-text-color: var(--ld-thm-warning-active);
  --ld-button-highlight-progress-color: var(--ld-thm-warning-active);
  --ld-button-highlight-bg-color-focus: var(--ld-thm-warning-focus);
  --ld-button-highlight-bg-color-hover: var(--ld-thm-warning-hover);
  --ld-button-highlight-bg-color-active: var(--ld-thm-warning-active);
  --ld-button-highlight-text-color-active: var(--ld-thm-warning-hover);
  --ld-button-highlight-progress-active: var(--ld-thm-warning-hover);

  /* danger */
  --ld-button-danger-bg-color: var(--ld-thm-error);
  --ld-button-danger-text-color: var(--ld-col-wht);
  --ld-button-danger-progress-color: var(--ld-thm-error-hover);
  --ld-button-danger-bg-color-focus: var(--ld-thm-error-focus);
  --ld-button-danger-progress-color-focus: var(--ld-thm-error-active);
  --ld-button-danger-bg-color-hover: var(--ld-thm-error-hover);
  --ld-button-danger-text-color-focus: var(
    --ld-button-danger-color-focus,
    var(--ld-thm-error-active)
  );
  --ld-button-danger-text-color-hover: var(--ld-col-wht);
  --ld-button-danger-progress-color-hover: var(--ld-thm-error);
  --ld-button-danger-bg-color-active: var(--ld-thm-error-active);
  --ld-button-danger-text-color-active: var(--ld-col-wht);
  --ld-button-danger-progress-color-active: var(--ld-thm-error);

  /* danger-ghost */
  --ld-button-danger-ghost-brand-bg-color: var(
    --ld-button-danger-secondary-bg-color,
    var(--ld-col-wht)
  );
  --ld-button-danger-ghost-bg-color-active: var(
    --ld-button-danger-secondary-bg-color-active,
    var(--ld-thm-error-alpha-low)
  );
  --ld-button-danger-ghost-bg-color-hover: var(
    --ld-button-danger-secondary-bg-color-hover,
    var(--ld-thm-error-alpha-lowest)
  );
  --ld-button-danger-ghost-text-color: var(
    --ld-button-danger-secondary-text-color,
    var(--ld-thm-error)
  );
  --ld-button-danger-ghost-text-color-active: var(
    --ld-button-danger-secondary-text-color-active,
    var(--ld-thm-error-active)
  );
  --ld-button-danger-ghost-text-color-focus: var(
    --ld-button-danger-secondary-color-focus,
    var(--ld-thm-error-focus)
  );
  --ld-button-danger-ghost-text-color-hover: var(
    --ld-button-danger-secondary-text-color-hover,
    var(--ld-thm-error-hover)
  );
  --ld-button-danger-ghost-progress-color: var(
    --ld-button-danger-secondary-progress-color,
    var(--ld-thm-error)
  );
  --ld-button-danger-ghost-progress-color-active: var(
    --ld-button-danger-secondary-progress-color-active,
    var(--ld-thm-error-active)
  );
  --ld-button-danger-ghost-progress-color-focus: var(
    --ld-button-danger-secondary-progress-color-focus,
    var(--ld-thm-error-focus)
  );
  --ld-button-danger-ghost-progress-color-hover: var(
    --ld-button-danger-secondary-progress-color-hover,
    var(--ld-thm-error-hover)
  );

  /* neutral */
  --ld-button-neutral-bg-color: var(--ld-col-neutral);
  --ld-button-neutral-bg-color-active: var(--ld-col-neutral-900);
  --ld-button-neutral-bg-color-focus: var(--ld-col-neutral-400);
  --ld-button-neutral-bg-color-hover: var(--ld-col-neutral-800);
  --ld-button-neutral-progress-color: var(--ld-col-neutral-800);
  --ld-button-neutral-progress-color-active: var(--ld-col-neutral);
  --ld-button-neutral-progress-color-focus: var(--ld-col-neutral-900);
  --ld-button-neutral-progress-color-hover: var(--ld-col-neutral);
  --ld-button-neutral-text-color: var(--ld-col-wht);
  --ld-button-neutral-text-color-active: var(--ld-col-wht);
  --ld-button-neutral-text-color-focus: var(--ld-col-neutral-900);
  --ld-button-neutral-text-color-hover: var(--ld-col-wht);

  /* neutral-ghost */
  --ld-button-neutral-ghost-brand-bg-color: var(--ld-col-wht);
  --ld-button-neutral-ghost-bg-color-active: var(--ld-thm-primary-alpha-low);
  --ld-button-neutral-ghost-bg-color-hover: var(--ld-col-neutral-050);
  --ld-button-neutral-ghost-progress-color: var(--ld-col-neutral);
  --ld-button-neutral-ghost-progress-color-active: var(--ld-col-neutral-900);
  --ld-button-neutral-ghost-progress-color-focus: var(--ld-col-neutral-400);
  --ld-button-neutral-ghost-progress-color-hover: var(--ld-col-neutral-800);
  --ld-button-neutral-ghost-progress-track-color: var(--ld-col-neutral-050);
  --ld-button-neutral-ghost-text-color: var(--ld-col-neutral);
  --ld-button-neutral-ghost-text-color-active: var(--ld-col-neutral-900);
  --ld-button-neutral-ghost-text-color-focus: var(--ld-col-neutral-400);
  --ld-button-neutral-ghost-text-color-hover: var(--ld-col-neutral-800);

  background-color: var(--ld-button-bg-color);
  box-sizing: border-box;
  position: relative;
  font: var(--ld-typo-body-m);
  border: 0;
  overflow: hidden;
  transform: translateZ(0); /* fixes overflow issue in Safari */
  padding: var(--ld-button-padding-y-md) var(--ld-button-padding-x-md);
  border-radius: var(--ld-button-border-top-left-radius)
    var(--ld-button-border-top-right-radius)
    var(--ld-button-border-bottom-right-radius)
    var(--ld-button-border-bottom-left-radius);
  min-height: 2.5rem;
  min-width: 2.5rem;
  text-decoration: none;
  user-select: none;
  touch-action: manipulation;
  color: var(--ld-button-text-color);
  display: inline-grid;
  grid-auto-flow: column;
  gap: var(--ld-button-gap-md);
  align-items: center;
  text-align: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  -webkit-touch-callout: none;

  &:where(:disabled),
  &:where(
      [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
    ) {
    opacity: 0.2;
  }

  &:where(
      :not(
          :disabled,
          [aria-disabled]:where(
              :not([aria-disabled=''], [aria-disabled='false'])
            )
        )
    ) {
    cursor: pointer;

    &:where(:focus:focus-visible) {
      background-color: var(--ld-button-bg-color-focus);
      color: var(--ld-button-text-color-focus);
    }
    @media (hover: hover) {
      &:where(:hover) {
        background-color: var(--ld-button-bg-color-hover);
        color: var(--ld-button-text-color-hover);
      }
    }
    &:where(:active),
    &:where(:active:focus-visible) {
      background-color: var(--ld-button-bg-color-active);
      color: var(--ld-button-text-color-active);
    }
  }

  ::slotted(ld-icon),
  ::slotted(.ld-icon),
  > ld-icon,
  > .ld-icon {
    margin: auto var(--ld-button-icon-margin-x-md);
  }

  &:where(.ld-button--sm) {
    min-height: 2rem;
    min-width: 2rem;
    padding: var(--ld-button-padding-y-sm) var(--ld-button-padding-x-sm);
    font: var(--ld-typo-body-s);
    font-weight: 700;
    line-height: 1;
    gap: var(--ld-button-gap-sm);

    ::slotted(ld-icon),
    ::slotted(.ld-icon),
    > ld-icon,
    > .ld-icon {
      margin: auto var(--ld-button-icon-margin-x-sm);
    }
  }

  &:where(.ld-button--lg) {
    min-height: 3.125rem;
    min-width: 3.125rem;
    padding: var(--ld-button-padding-y-lg) var(--ld-button-padding-x-lg);
    font: var(--ld-typo-body-l);
    font-weight: 700;
    line-height: 1;
    gap: var(--ld-button-gap-lg);

    ::slotted(ld-icon),
    ::slotted(.ld-icon),
    > ld-icon,
    > .ld-icon {
      margin: auto var(--ld-button-icon-margin-x-lg);
    }
  }

  &:where(.ld-button--align-text-right) {
    text-align: right;
  }

  &:where(.ld-button--align-text-left) {
    text-align: left;
  }

  &:where(.ld-button--justify-start) {
    justify-content: flex-start;
  }

  &:where(.ld-button--justify-end) {
    justify-content: flex-end;
  }

  &:where(.ld-button--justify-between) {
    justify-content: space-between;
  }

  &:where(.ld-button--icon-only) {
    --ld-button-padding-x-sm: 0;
    --ld-button-padding-y-sm: 0;
    --ld-button-padding-x-md: 0;
    --ld-button-padding-y-md: 0;
    --ld-button-padding-x-lg: 0;
    --ld-button-padding-y-lg: 0;
  }

  &[aria-busy='true'] {
    cursor: progress;
  }
}

@keyframes ld-button-progress-pending {
  0% {
    transform: translateX(-100%);
    z-index: -1;
  }
  100% {
    transform: translateX(100%);
    z-index: -1;
  }
}

.ld-button__progress {
  --ld-button-progress: 0;
  position: absolute;
  inset: auto 0 0;
  z-index: -1;

  &::after {
    background-color: var(--ld-button-progress-color);
    content: '';
    display: block;
    height: var(--ld-sp-4);
    transform: translateX(-100%)
      translateX(calc(var(--ld-button-progress) * 100%));
    transition: transform var(--ld-transition-duration-normal) ease;
  }

  &--pending {
    &::after {
      animation: ld-button-progress-pending 1s linear infinite;
    }
  }
}

.ld-button--secondary,
.ld-button--ghost {
  --ld-button-bg-color: transparent;
  --ld-button-bg-color-active: var(--ld-button-ghost-bg-color-active);
  --ld-button-bg-color-focus: transparent;
  --ld-button-bg-color-hover: var(--ld-button-ghost-bg-color-hover);
  --ld-button-text-color: var(--ld-button-ghost-text-color);
  --ld-button-text-color-active: var(--ld-button-ghost-text-color-active);
  --ld-button-text-color-focus: var(--ld-button-ghost-text-color-focus);
  --ld-button-text-color-hover: var(--ld-button-ghost-text-color-hover);
  --ld-button-progress-color: var(--ld-button-ghost-progress-color);

  &:where(
      :not(
          :disabled,
          [aria-disabled]:where(
              :not([aria-disabled=''], [aria-disabled='false'])
            )
        )
    ) {
    &:where(:focus:focus-visible) .ld-button__progress::after {
      background-color: var(--ld-button-ghost-progress-color-focus);
    }

    @media (hover: hover) {
      &:where(:hover) .ld-button__progress::after {
        background-color: var(--ld-button-ghost-progress-color-hover);
      }
    }

    &:where(:active),
    &:where(:active:focus-visible) {
      .ld-button__progress::after {
        background-color: var(--ld-button-ghost-progress-color-active);
      }
    }
  }
}

.ld-button--secondary {
  box-shadow: inset 0 0 0 2px;
}

.ld-button--ghost {
  .ld-button__progress {
    background-color: var(--ld-button-ghost-progress-track-color);
  }

  @media (hover: hover) {
    &:where(:hover) {
      .ld-button__progress {
        background-color: transparent;
      }
    }
  }
  &:where(:active),
  &:where(:active:focus-visible) {
    .ld-button__progress {
      background-color: transparent;
    }
  }
}

.ld-button--brand-color {
  &:where(
      :not(
          .ld-button--danger,
          .ld-button--danger-secondary,
          .ld-button--danger-ghost,
          .ld-button--highlight,
          .ld-button--neutral,
          .ld-button--neutral-secondary,
          .ld-button--neutral-ghost
        )
    ) {
    &:where(:not(.ld-button--secondary, .ld-button--ghost)) {
      background-color: var(--ld-button-brand-bg-color);
      color: var(--ld-button-brand-text-color);

      &:where(
          &:not(
              :disabled,
              [aria-disabled]:where(
                  :not([aria-disabled=''], [aria-disabled='false'])
                )
            )
        ) {
        &:where(:focus:focus-visible) {
          color: var(--ld-button-brand-text-color-focus);
        }
        @media (hover: hover) {
          &:where(:hover) {
            background-color: var(--ld-button-brand-bg-color-hover);
          }
        }
        &:where(:active),
        &:where(:active:focus-visible) {
          background-color: var(--ld-button-brand-bg-color-active);
        }
      }
    }

    &.ld-button--secondary,
    &.ld-button--ghost {
      --ld-button-ghost-bg-color-active: var(
        --ld-button-secondary-brand-bg-color-active
      );
      --ld-button-ghost-bg-color-hover: var(
        --ld-button-secondary-brand-bg-color-hover
      );
      --ld-button-ghost-text-color: var(--ld-button-secondary-brand-text-color);
      --ld-button-ghost-text-color-active: var(
        --ld-button-secondary-brand-text-color-active
      );
      --ld-button-ghost-text-color-focus: var(
        --ld-button-secondary-brand-text-color-focus
      );
      --ld-button-ghost-text-color-hover: var(
        --ld-button-secondary-brand-text-color
      );
      --ld-button-ghost-progress-color: var(
        --ld-button-secondary-brand-progress-color
      );
      --ld-button-ghost-progress-color-active: var(
        --ld-button-secondary-brand-progress-color-active
      );
      --ld-button-ghost-progress-color-focus: var(
        --ld-button-secondary-brand-progress-color-focus
      );
      --ld-button-ghost-progress-color-hover: var(
        --ld-button-secondary-brand-progress-color
      );
    }
  }
}

.ld-button--highlight {
  --ld-button-bg-color: var(--ld-button-highlight-bg-color);
  --ld-button-bg-color-active: var(--ld-button-highlight-bg-color-active);
  --ld-button-bg-color-focus: var(--ld-button-highlight-bg-color-focus);
  --ld-button-bg-color-hover: var(--ld-button-highlight-bg-color-hover);
  --ld-button-text-color: var(--ld-button-highlight-text-color);
  --ld-button-text-color-active: var(--ld-button-highlight-text-color-active);
  --ld-button-text-color-focus: var(--ld-button-highlight-text-color);
  --ld-button-text-color-hover: var(--ld-button-highlight-text-color);
  --ld-button-progress-color: var(--ld-button-highlight-progress-color);

  &:where(
      :not(
          :disabled,
          [aria-disabled]:where(
              :not([aria-disabled=''], [aria-disabled='false'])
            )
        )
    ) {
    &:where(:active),
    &:where(:active:focus-visible) {
      .ld-button__progress::after {
        background-color: var(--ld-button-highlight-progress-active);
      }
    }
  }
}

.ld-button--danger {
  --ld-button-bg-color: var(--ld-button-danger-bg-color);
  --ld-button-bg-color-active: var(--ld-button-danger-bg-color-active);
  --ld-button-bg-color-focus: var(--ld-button-danger-bg-color-focus);
  --ld-button-bg-color-hover: var(--ld-button-danger-bg-color-hover);
  --ld-button-text-color: var(--ld-button-danger-text-color);
  --ld-button-text-color-active: var(--ld-button-danger-text-color-active);
  --ld-button-text-color-hover: var(--ld-button-danger-text-color-hover);
  --ld-button-text-color-focus: var(--ld-button-danger-text-color-focus);
  --ld-button-progress-color: var(--ld-button-danger-progress-color);

  &:where(
      :not(
          :disabled,
          [aria-disabled]:where(
              :not([aria-disabled=''], [aria-disabled='false'])
            )
        )
    ) {
    &:where(:focus:focus-visible) {
      .ld-button__progress::after {
        background-color: var(--ld-button-danger-progress-color-focus);
      }
    }
    @media (hover: hover) {
      &:where(:hover) {
        .ld-button__progress::after {
          background-color: var(--ld-button-danger-progress-color-hover);
        }
      }
    }
    &:where(:active),
    &:where(:active:focus-visible) {
      .ld-button__progress::after {
        background-color: var(--ld-button-danger-progress-color-active);
      }
    }
  }
}

.ld-button--danger-secondary,
.ld-button--danger-ghost {
  --ld-button-bg-color-active: var(--ld-button-danger-ghost-bg-color-active);
  --ld-button-bg-color-focus: var(--ld-button-danger-ghost-bg-color-focus);
  --ld-button-bg-color-hover: var(--ld-button-danger-ghost-bg-color-hover);
  --ld-button-text-color: var(--ld-button-danger-ghost-text-color);
  --ld-button-text-color-active: var(
    --ld-button-danger-ghost-text-color-active
  );
  --ld-button-text-color-focus: var(--ld-button-danger-ghost-text-color-focus);
  --ld-button-text-color-hover: var(--ld-button-danger-ghost-text-color-hover);
  --ld-button-progress-color: var(--ld-button-danger-ghost-progress-color);
  --ld-button-ghost-progress-color-active: var(
    --ld-button-danger-ghost-progress-color-active
  );
  --ld-button-ghost-progress-color-focus: var(
    --ld-button-danger-ghost-progress-color-focus
  );
  --ld-button-ghost-progress-color-hover: var(
    --ld-button-danger-ghost-progress-color-hover
  );

  &.ld-button--brand-color {
    --ld-button-bg-color: var(--ld-button-danger-ghost-brand-bg-color);
    --ld-button-bg-color-active: var(--ld-button-danger-ghost-brand-bg-color);
    --ld-button-bg-color-focus: var(--ld-button-danger-ghost-brand-bg-color);
    --ld-button-bg-color-hover: var(--ld-button-danger-ghost-brand-bg-color);
  }
}

/* ---------- */

.ld-button--neutral {
  --ld-button-bg-color: var(--ld-button-neutral-bg-color);
  --ld-button-bg-color-active: var(--ld-button-neutral-bg-color-active);
  --ld-button-bg-color-focus: var(--ld-button-neutral-bg-color-focus);
  --ld-button-bg-color-hover: var(--ld-button-neutral-bg-color-hover);
  --ld-button-text-color: var(--ld-button-neutral-text-color);
  --ld-button-text-color-active: var(--ld-button-neutral-text-color-active);
  --ld-button-text-color-hover: var(--ld-button-neutral-text-color-hover);
  --ld-button-text-color-focus: var(--ld-button-neutral-text-color-focus);
  --ld-button-progress-color: var(--ld-button-neutral-progress-color);

  &:where(
      :not(
          :disabled,
          [aria-disabled]:where(
              :not([aria-disabled=''], [aria-disabled='false'])
            )
        )
    ) {
    &:where(:focus:focus-visible) {
      .ld-button__progress::after {
        background-color: var(--ld-button-neutral-progress-color-focus);
      }
    }
    @media (hover: hover) {
      &:where(:hover) {
        .ld-button__progress::after {
          background-color: var(--ld-button-neutral-progress-color-hover);
        }
      }
    }
    &:where(:active),
    &:where(:active:focus-visible) {
      .ld-button__progress::after {
        background-color: var(--ld-button-neutral-progress-color-active);
      }
    }
  }
}

.ld-button--neutral-secondary,
.ld-button--neutral-ghost {
  --ld-button-bg-color: transparent;
  --ld-button-bg-color-active: var(--ld-button-neutral-ghost-bg-color-active);
  --ld-button-bg-color-focus: transparent;
  --ld-button-bg-color-hover: var(--ld-button-neutral-ghost-bg-color-hover);
  --ld-button-text-color: var(--ld-button-neutral-ghost-text-color);
  --ld-button-text-color-active: var(
    --ld-button-neutral-ghost-text-color-active
  );
  --ld-button-text-color-focus: var(--ld-button-neutral-ghost-text-color-focus);
  --ld-button-text-color-hover: var(--ld-button-neutral-ghost-text-color-hover);
  --ld-button-progress-color: var(--ld-button-neutral-ghost-progress-color);
  --ld-button-ghost-progress-color-active: var(
    --ld-button-neutral-ghost-progress-color-active
  );
  --ld-button-ghost-progress-color-focus: var(
    --ld-button-neutral-ghost-progress-color-focus
  );
  --ld-button-ghost-progress-color-hover: var(
    --ld-button-neutral-ghost-progress-color-hover
  );
  --ld-button-ghost-progress-track-color: var(
    --ld-button-neutral-ghost-progress-track-color
  );

  &.ld-button--brand-color {
    --ld-button-bg-color: var(--ld-button-neutral-ghost-brand-bg-color);
    --ld-button-bg-color-active: var(--ld-button-neutral-ghost-brand-bg-color);
    --ld-button-bg-color-focus: var(--ld-button-neutral-ghost-brand-bg-color);
    --ld-button-bg-color-hover: var(--ld-button-neutral-ghost-brand-bg-color);
  }
}
