/*
 * DO NOT EDIT THIS FILE.
 * It's generated automatically by 'yarn build' command.
 * @preserve
 */

.h-button {
  --h-button-vertical-padding: 0.5rem;
  --h-button-horizontal-padding: 0.9375rem;
  --h-button-hover-horizontal-padding: var(--h-button-horizontal-padding);
  --h-button-disabled-horizontal-padding: var(--h-button-horizontal-padding);
  --h-button-background-color: var(--color-primary-primary);
  --h-button-border-color: var(--color-primary-primary);
  --h-button-content-color: var(--color-text-stroke-light);
  --h-button-hover-background-color: var(--color-primary-dark-primary);
  --h-button-hover-border-color: var(--color-primary-dark-primary);
  --h-button-hover-content-color: var(--color-text-stroke-light);
  --h-button-disabled-background-color: var(--color-primary-ghost-primary);
  --h-button-disabled-border-color: var(--color-primary-ghost-primary);
  --h-button-disabled-content-color: var(--color-text-stroke-secondary);
  --h-button-icon-size: 0.75rem;
  --h-button-icon-side-offset: 0.25rem;
  --h-button-inner-gap: 1rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--h-button-vertical-padding) var(--h-button-horizontal-padding);
  cursor: pointer;
  transition-timing-function: var(--transition-timing-function-cubic-bezier);
  transition-duration: var(--transition-duration-0-2);
  transition-property: border-color, color, background-color, padding-left,
    padding-right;
  text-decoration: none;
  letter-spacing: var(--letter-spacing-0-1);
  text-transform: uppercase;
  color: var(--h-button-content-color);
  border: 0.0625rem solid var(--h-button-border-color);
  border-radius: var(--border-radius-6);
  background-color: var(--h-button-background-color);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  gap: var(--h-button-inner-gap);
}

@media (hover: hover) {
  .h-button:hover,
  [wrapper-as-link-built]:hover .h-button {
    padding-right: var(--h-button-hover-horizontal-padding);
    padding-left: var(--h-button-hover-horizontal-padding);
    color: var(--h-button-hover-content-color);
    border-color: var(--h-button-hover-border-color);
    background-color: var(--h-button-hover-background-color);
  }
}

.h-button[disabled],
.h-button.is-disabled {
  position: relative;
  padding-right: var(--h-button-disabled-horizontal-padding);
  padding-left: var(--h-button-disabled-horizontal-padding);
  color: var(--h-button-disabled-content-color);
  border-color: var(--h-button-disabled-border-color);
  background-color: var(--h-button-disabled-background-color);
}

.h-button--default-white-bg {
  --h-button-background-color: var(--color-background-primary);
  --h-button-border-color: var(--color-background-primary);
  --h-button-content-color: var(--color-text-stroke-primary);
  --h-button-hover-background-color: var(--color-primary-ghost-primary);
  --h-button-hover-border-color: var(--color-primary-ghost-primary);
  --h-button-hover-content-color: var(--color-text-stroke-primary);
}

.h-button--second,
.h-button--second-white-bg {
  --h-button-content-color: var(--color-primary-primary);
  --h-button-disabled-background-color: transparent;
  --h-button-disabled-border-color: var(--color-text-stroke-tertiary);
  --h-button-disabled-content-color: var(--color-text-stroke-tertiary);
}

.h-button--second {
  --h-button-background-color: transparent;
}

.h-button--second-white-bg {
  --h-button-background-color: var(--color-text-stroke-light);
}

.h-button--sixth {
  --h-button-background-color: transparent;
  --h-button-content-color: var(--color-text-stroke-secondary);
  --h-button-border-color: var(--color-text-stroke-secondary);
  --h-button-hover-background-color: var(--color-text-stroke-secondary);
  --h-button-hover-border-color: var(--color-text-stroke-secondary);
}

.h-button--third,
.h-button--third-white-color {
  --h-button-border-color: transparent;
  --h-button-background-color: transparent;
  --h-button-hover-background-color: transparent;
  --h-button-disabled-background-color: transparent;
  --h-button-disabled-border-color: transparent;
  --h-button-disabled-content-color: var(--color-text-stroke-tertiary);
  --h-button-horizontal-padding: 0;
  --h-button-hover-horizontal-padding: 0.9375rem;
  --h-button-disabled-horizontal-padding: 0;
}

.h-button--third {
  --h-button-content-color: var(--color-primary-primary);
  --h-button-hover-border-color: var(--color-primary-primary);
  --h-button-hover-content-color: var(--color-primary-primary);
}

.h-button--third-white-color {
  --h-button-content-color: var(--color-text-stroke-light);
  --h-button-hover-border-color: var(--color-text-stroke-light);
  --h-button-hover-content-color: var(--color-text-stroke-light);
}

.h-button--fourth {
  --h-button-background-color: var(--color-text-stroke-secondary);
  --h-button-border-color: var(--color-text-stroke-secondary);
  --h-button-hover-background-color: var(--color-text-stroke-primary);
  --h-button-hover-border-color: var(--color-text-stroke-primary);
  --h-button-disabled-background-color: var(--color-text-stroke-tertiary);
  --h-button-disabled-border-color: var(--color-text-stroke-tertiary);
  --h-button-disabled-content-color: var(--color-text-stroke-light);
}

.h-button--fifth {
  --h-button-background-color: var(--color-primary-ghost-primary);
  --h-button-border-color: var(--color-primary-ghost-primary);
  --h-button-content-color: var(--color-text-stroke-secondary);
  --h-button-hover-background-color: var(--color-primary-ghost-primary);
  --h-button-hover-border-color: var(--color-primary-ghost-primary);
  --h-button-hover-content-color: var(--color-text-stroke-secondary);
  --h-button-disabled-background-color: var(--color-primary-ghost-primary);
  --h-button-disabled-border-color: var(--color-primary-ghost-primary);
  --h-button-disabled-content-color: var(--color-text-stroke-secondary);
}

.h-button--icon-size-bigger {
  --h-button-inner-gap: 0.875rem;
  --h-button-icon-size: 1rem;
}

.h-button--container-click::before {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
}

.h-button--disable-outline-focus:focus-visible {
  outline: none;
}

.h-button__throbber-container {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  transform: translate(-50%, -50%);
}

.h-button__icon {
  flex-shrink: 0;
  width: var(--h-button-icon-size);
  height: var(--h-button-icon-size);
  fill: currentColor;
}

.h-button__throbber--start ~ .h-button__icon--start {
  display: none;
}

.h-button__throbber--end ~ .h-button__icon--end {
  display: none;
}

.h-button__throbber-container ~ .h-button__icon {
  opacity: 0;
}

.h-button__throbber-container ~ .h-button__text {
  opacity: 0;
}