/*
 * 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.5625rem 1rem;
  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;
  color: var(--color-primary-white);
  border: 0.0625rem solid var(--color-extended-neutrals-n-800);
  border-radius: 1.375rem;
  background-color: var(--color-primary-black);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  gap: 0.625rem;
}

.h-button:not([disabled], .is-disabled) {
  cursor: pointer;
}

@media (hover: hover) {
  .h-button:not([disabled], .is-disabled):hover,
  [wrapper-as-link-built]:hover .h-button {
    background-color: var(--color-extended-neutrals-n-900);
  }
}

.h-button:not([disabled], .is-disabled):active,
[wrapper-as-link-built]:active .h-button {
  background-color: var(--color-extended-neutrals-n-800);
}

.h-button--size-large {
  padding: 0.8125rem 1.4375rem;
  border-radius: 1.75rem;
  gap: 0.25rem;
}

.h-button--color-inverse,
.h-button--color-dynamic-white {
  color: var(--color-primary-black);
  border-color: var(--color-extended-neutrals-n-200);
  background-color: var(--color-primary-white);
}

@media (hover: hover) {
  .h-button--color-inverse:not([disabled], .is-disabled):hover,
  [wrapper-as-link-built]:hover .h-button--color-inverse,
  .h-button--color-dynamic-white:not([disabled], .is-disabled):hover,
  [wrapper-as-link-built]:hover .h-button--color-dynamic-white {
    background-color: var(--color-extended-neutrals-n-100);
  }
}

.h-button--color-inverse:not([disabled], .is-disabled):active,
[wrapper-as-link-built]:active .h-button--color-inverse,
.h-button--color-dynamic-white:not([disabled], .is-disabled):active,
[wrapper-as-link-built]:active .h-button--color-dynamic-white {
  background-color: var(--color-extended-neutrals-n-200);
}

/* Button with such classname should change its colors depending on the page background color */

.p-page--in-white .h-button--color-dynamic-white {
  color: var(--color-primary-white);
  border-color: var(--color-extended-neutrals-n-800);
  background-color: var(--color-primary-black);
}

@media (hover: hover) {
  .p-page--in-white
    .h-button--color-dynamic-white:not([disabled], .is-disabled):hover {
    background-color: var(--color-extended-neutrals-n-900);
  }
}

.p-page--in-white
  .h-button--color-dynamic-white:not([disabled], .is-disabled):active {
  background-color: var(--color-extended-neutrals-n-800);
}

@media (hover: hover) {
  .p-page--in-white
    [wrapper-as-link-built]:hover
    .h-button--color-dynamic-white {
    background-color: var(--color-extended-neutrals-n-900);
  }
}

.p-page--in-white
  [wrapper-as-link-built]:active
  .h-button--color-dynamic-white {
  background-color: var(--color-extended-neutrals-n-800);
}

/* Button with such classname should change its colors depending on the page background color */

.p-page--in-white .h-button--color-dynamic-black {
  color: var(--color-primary-black);
  border-color: var(--color-extended-neutrals-n-200);
  background-color: var(--color-primary-white);
}

@media (hover: hover) {
  .p-page--in-white
    .h-button--color-dynamic-black:not([disabled], .is-disabled):hover {
    background-color: var(--color-extended-neutrals-n-100);
  }
}

.p-page--in-white
  .h-button--color-dynamic-black:not([disabled], .is-disabled):active {
  background-color: var(--color-extended-neutrals-n-200);
}

@media (hover: hover) {
  .p-page--in-white
    [wrapper-as-link-built]:hover
    .h-button--color-dynamic-black {
    background-color: var(--color-extended-neutrals-n-100);
  }
}

.p-page--in-white
  [wrapper-as-link-built]:active
  .h-button--color-dynamic-black {
  background-color: var(--color-extended-neutrals-n-200);
}

.h-button[disabled],
.h-button.is-disabled {
  color: var(--color-extended-neutrals-n-600);
  border-color: var(--color-extended-neutrals-n-300);
  background-color: var(--color-extended-neutrals-n-300);
}

.h-button__text {
  padding-inline: 0.25rem;
}

.h-button--size-large .h-button__text {
  padding-inline: 0.5rem;
}

.h-button__icon-container {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

.h-button__icon-container--throbber-full {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: h-button-ajax-circle-full-animation var(--transition-duration-0-25)
    linear infinite;
}

.h-button__icon-container--throbber-full ~ * {
  opacity: 0;
}

.h-button__icon {
  width: inherit;
  height: inherit;
  fill: currentColor;
}

.h-button__icon--throbber + * {
  display: none;
}

@keyframes h-button-ajax-circle-full-animation {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}