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

.h-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem 1.75rem;
  transition-timing-function: var(--transition-timing-function-cubic-bezier);
  transition-duration: var(--transition-duration-0-25);
  transition-property: border-color, background-color, color;
  text-align: center;
  text-decoration: none;
  border: 0.0625rem solid transparent;
  border-radius: 0.375rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  appearance: none;
}

.h-button--primary {
  color: var(--color-light);
  background-color: var(--color-primary-brand);
}

@media (hover: hover) and (pointer: fine) {
  .h-button--primary:not([disabled], .is-disabled):hover:where(:is(a, button)),
  [wrapper-as-link-built]:hover .h-button--primary {
    background-color: var(--color-primary-brand-hover);
  }
}

.h-button--primary:not([disabled], .is-disabled):active:where(:is(a, button)) {
  background-color: var(--color-primary-brand-active);
}

.h-button--primary-outline {
  color: var(--color-primary-brand);
  border-color: var(--color-primary-brand);
  background-color: var(--color-light);
}

@media (hover: hover) and (pointer: fine) {
  .h-button--primary-outline:not([disabled], .is-disabled):hover:where(
      :is(a, button)
    ),
  [wrapper-as-link-built]:hover .h-button--primary-outline {
    color: var(--color-light);
    border-color: transparent;
    background-color: var(--color-primary-brand);
  }
}

.h-button--primary-outline:not([disabled], .is-disabled):active:where(
    :is(a, button)
  ) {
  color: var(--color-light);
  border-color: transparent;
  background-color: var(--color-primary-brand-active);
}

.h-button--secondary {
  color: var(--color-light);
  background-color: var(--color-secondary-brand);
}

@media (hover: hover) and (pointer: fine) {
  .h-button--secondary:not([disabled], .is-disabled):hover:where(
      :is(a, button)
    ),
  [wrapper-as-link-built]:hover .h-button--secondary {
    background-color: var(--color-secondary-brand-hover);
  }
}

.h-button--secondary:not([disabled], .is-disabled):active:where(
    :is(a, button)
  ) {
  background-color: var(--color-secondary-brand-active);
}

.h-button--secondary-outline {
  color: var(--color-secondary-brand);
  border-color: var(--color-secondary-brand);
  background-color: var(--color-light);
}

@media (hover: hover) and (pointer: fine) {
  .h-button--secondary-outline:not([disabled], .is-disabled):hover:where(
      :is(a, button)
    ),
  [wrapper-as-link-built]:hover .h-button--secondary-outline {
    color: var(--color-light);
    border-color: transparent;
    background-color: var(--color-secondary-brand);
  }
}

.h-button--secondary-outline:not([disabled], .is-disabled):active:where(
    :is(a, button)
  ) {
  color: var(--color-light);
  border-color: transparent;
  background-color: var(--color-secondary-brand-active);
}

.h-button--stripe {
  color: var(--color-light);
  border-color: var(--color-stripe);
  background-color: var(--color-stripe);
}

@media (hover: hover) and (pointer: fine) {
  .h-button--stripe:not([disabled], .is-disabled):hover:where(:is(a, button)),
  [wrapper-as-link-built]:hover .h-button--stripe {
    border-color: var(--color-stripe-hover);
    background-color: var(--color-stripe-hover);
  }
}

.h-button--stripe:not([disabled], .is-disabled):active:where(:is(a, button)) {
  border-color: var(--color-stripe-active);
  background-color: var(--color-stripe-active);
}

.h-button--stripe-outline {
  color: var(--color-stripe);
  border-color: var(--color-stripe);
  background-color: var(--color-light);
}

@media (hover: hover) and (pointer: fine) {
  .h-button--stripe-outline:not([disabled], .is-disabled):hover:where(
      :is(a, button)
    ),
  [wrapper-as-link-built]:hover .h-button--stripe-outline {
    color: var(--color-light);
    border-color: transparent;
    background-color: var(--color-stripe-hover);
  }
}

.h-button--stripe-outline:not([disabled], .is-disabled):active:where(
    :is(a, button)
  ) {
  color: var(--color-light);
  border-color: transparent;
  background-color: var(--color-stripe-active);
}

.h-button--success {
  color: var(--color-light);
  border-color: var(--color-success);
  background-color: var(--color-success);
}

@media (hover: hover) and (pointer: fine) {
  .h-button--success:not([disabled], .is-disabled):hover:where(:is(a, button)),
  [wrapper-as-link-built]:hover .h-button--success {
    color: var(--color-light);
    border-color: var(--color-success-hover);
    background-color: var(--color-success-hover);
  }
}

.h-button--success:not([disabled], .is-disabled):active:where(:is(a, button)) {
  color: var(--color-light);
  border-color: var(--color-success-active);
  background-color: var(--color-success-active);
}

.h-button[disabled],
.h-button.is-disabled {
  color: var(--color-disabled);
  border-color: var(--color-disabled);
  background-color: var(--color-light);
}

.h-button--size-s {
  padding: 0.5625rem 1.5rem;
}