@layer clickui {.button__2ZuB7 {
  display: flex;
  position: relative;
  padding: var(--click-button-basic-space-y) var(--click-button-basic-space-x);
  overflow: hidden;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: var(--click-button-basic-space-gap);
  border: 1px solid transparent;
  border-radius: var(--click-button-radii-all);
  background: transparent;
  color: inherit;
  font: var(--click-button-basic-typography-label-default);
  white-space: nowrap;
  cursor: pointer;
}

.button_align-center__RdEYc {
  justify-content: center;
}

.button_align-left__AmFEH {
  justify-content: flex-start;
}

.button_fill_width__npU6- {
  width: 100%;
}

.button_primary__5V6PJ {
  border-color: var(--click-button-basic-color-primary-stroke-default);
  background-color: var(--click-button-basic-color-primary-background-default);
  color: var(--click-button-basic-color-primary-text-default);
}

.button_primary__5V6PJ:disabled:not(.button_loading__n2tCt) {
  border-color: var(--click-button-basic-color-primary-stroke-disabled);
  background-color: var(--click-button-basic-color-primary-background-disabled);
  color: var(--click-button-basic-color-primary-text-disabled);
  font: var(--click-button-basic-typography-label-disabled);
  cursor: not-allowed;
}

.button_primary__5V6PJ:hover:not(:disabled) {
  border-color: var(--click-button-basic-color-primary-stroke-hover);
  background-color: var(--click-button-basic-color-primary-background-hover);
  font: var(--click-button-basic-typography-label-hover);
  transition: var(--click-transition-default);
}

.button_primary__5V6PJ:focus-visible:not(:disabled) {
  border-color: var(--click-button-basic-color-primary-stroke-active);
  background-color: var(--click-button-basic-color-primary-background-active);
  font: var(--click-button-basic-typography-label-active);
  outline: 2px solid var(--click-button-basic-color-primary-stroke-active);
  outline-offset: 2px;
}

.button_primary__5V6PJ:active:not(:disabled),
.button_primary__5V6PJ:focus:not(:focus-visible, :disabled) {
  border-color: var(--click-button-basic-color-primary-stroke-active);
  background-color: var(--click-button-basic-color-primary-background-active);
  font: var(--click-button-basic-typography-label-active);
  outline: none;
}

.button_secondary__PXw0N {
  border-color: var(--click-button-basic-color-secondary-stroke-default);
  background-color: var(--click-button-basic-color-secondary-background-default);
  color: var(--click-button-basic-color-secondary-text-default);
}

.button_secondary__PXw0N:disabled:not(.button_loading__n2tCt) {
  border-color: var(--click-button-basic-color-secondary-stroke-disabled);
  background-color: var(--click-button-basic-color-secondary-background-disabled);
  color: var(--click-button-basic-color-secondary-text-disabled);
  font: var(--click-button-basic-typography-label-disabled);
  cursor: not-allowed;
}

.button_secondary__PXw0N:hover:not(:disabled) {
  border-color: var(--click-button-basic-color-secondary-stroke-hover);
  background-color: var(--click-button-basic-color-secondary-background-hover);
  font: var(--click-button-basic-typography-label-hover);
  transition: var(--click-transition-default);
}

.button_secondary__PXw0N:focus-visible:not(:disabled) {
  border-color: var(--click-button-basic-color-secondary-stroke-active);
  background-color: var(--click-button-basic-color-secondary-background-active);
  font: var(--click-button-basic-typography-label-active);
  outline: 2px solid var(--click-button-basic-color-secondary-stroke-active);
  outline-offset: 2px;
}

.button_secondary__PXw0N:active:not(:disabled),
.button_secondary__PXw0N:focus:not(:focus-visible, :disabled) {
  border-color: var(--click-button-basic-color-secondary-stroke-active);
  background-color: var(--click-button-basic-color-secondary-background-active);
  font: var(--click-button-basic-typography-label-active);
  outline: none;
}

.button_empty__GZ9s7 {
  border-color: var(--click-button-basic-color-empty-stroke-default);
  background-color: var(--click-button-basic-color-empty-background-default);
  color: var(--click-button-basic-color-empty-text-default);
}

.button_empty__GZ9s7:disabled:not(.button_loading__n2tCt) {
  border-color: var(--click-button-basic-color-empty-stroke-disabled);
  background-color: var(--click-button-basic-color-empty-background-disabled);
  color: var(--click-button-basic-color-empty-text-disabled);
  font: var(--click-button-basic-typography-label-disabled);
  cursor: not-allowed;
}

.button_empty__GZ9s7:hover:not(:disabled) {
  border-color: var(--click-button-basic-color-empty-stroke-hover);
  background-color: var(--click-button-basic-color-empty-background-hover);
  font: var(--click-button-basic-typography-label-hover);
  transition: var(--click-transition-default);
}

.button_empty__GZ9s7:focus-visible:not(:disabled) {
  border-color: var(--click-button-basic-color-empty-stroke-active);
  background-color: var(--click-button-basic-color-empty-background-active);
  font: var(--click-button-basic-typography-label-active);
  outline: 2px solid var(--click-button-basic-color-empty-stroke-active);
  outline-offset: 2px;
}

.button_empty__GZ9s7:active:not(:disabled),
.button_empty__GZ9s7:focus:not(:focus-visible, :disabled) {
  border-color: var(--click-button-basic-color-empty-stroke-active);
  background-color: var(--click-button-basic-color-empty-background-active);
  font: var(--click-button-basic-typography-label-active);
  outline: none;
}

.button_danger__0DN8k {
  border-color: var(--click-button-basic-color-danger-stroke-default);
  background-color: var(--click-button-basic-color-danger-background-default);
  color: var(--click-button-basic-color-danger-text-default);
}

.button_danger__0DN8k:disabled:not(.button_loading__n2tCt) {
  border-color: var(--click-button-basic-color-danger-stroke-disabled);
  background-color: var(--click-button-basic-color-danger-background-disabled);
  color: var(--click-button-basic-color-danger-text-disabled);
  font: var(--click-button-basic-typography-label-disabled);
  cursor: not-allowed;
}

.button_danger__0DN8k:hover:not(:disabled) {
  border-color: var(--click-button-basic-color-danger-stroke-hover);
  background-color: var(--click-button-basic-color-danger-background-hover);
  font: var(--click-button-basic-typography-label-hover);
  transition: var(--click-transition-default);
}

.button_danger__0DN8k:focus-visible:not(:disabled) {
  border-color: var(--click-button-basic-color-danger-stroke-active);
  background-color: var(--click-button-basic-color-danger-background-active);
  font: var(--click-button-basic-typography-label-active);
  outline: 2px solid var(--click-button-basic-color-danger-stroke-active);
  outline-offset: 2px;
}

.button_danger__0DN8k:active:not(:disabled),
.button_danger__0DN8k:focus:not(:focus-visible, :disabled) {
  border-color: var(--click-button-basic-color-danger-stroke-active);
  background-color: var(--click-button-basic-color-danger-background-active);
  font: var(--click-button-basic-typography-label-active);
  outline: none;
}

.button_loading__n2tCt {
  cursor: not-allowed;
}

.button_loading__n2tCt::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: shimmer-fixed-width__lwKzt 1.5s ease-in-out infinite;
}

.button_fill_width__npU6-.button_loading__n2tCt::before {
  background-size: 200% 100%;
  background-repeat: repeat;
  animation: shimmer-fill-width__jTIzk 1.5s ease-in-out infinite;
}

.button_primary__5V6PJ.button_loading__n2tCt,
.button_secondary__PXw0N.button_loading__n2tCt,
.button_danger__0DN8k.button_loading__n2tCt {
  opacity: 0.7;
}

.button_empty__GZ9s7.button_loading__n2tCt {
  opacity: 0.9;
}

.button_loading__n2tCt > * {
  opacity: 0.7;
}

@keyframes shimmer-fixed-width__lwKzt {
  0% {
    background-position: -200px 0;
  }

  100% {
    background-position: 200px 0;
  }
}

@keyframes shimmer-fill-width__jTIzk {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.button_primary__5V6PJ.button_loading__n2tCt::before {
  background-image: var(--click-button-basic-color-primary-background-loading);
}

.button_secondary__PXw0N.button_loading__n2tCt::before {
  background-image: var(--click-button-basic-color-secondary-background-loading);
}

.button_empty__GZ9s7.button_loading__n2tCt::before {
  background-image: var(--click-button-basic-color-empty-background-loading);
}

.button_danger__0DN8k.button_loading__n2tCt::before {
  background-image: var(--click-button-basic-color-danger-background-loading);
}

.button__icon__e6c-f {
  display: flex;
  width: var(--click-button-basic-size-icon-all);
  height: var(--click-button-basic-size-icon-all);
  justify-content: center;
  align-items: center;
}

.button__icon__e6c-f svg {
  width: var(--click-button-basic-size-icon-all);
  height: var(--click-button-basic-size-icon-all);
}

.button__label__tlatE {
  display: inline-flex;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .button_loading__n2tCt::before,
  .button_fill_width__npU6-.button_loading__n2tCt::before {
    animation: none;
  }
}
}