@charset "UTF-8";
.button {
  display: inline-grid;
  grid-auto-flow: column;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  margin: 0;
  justify-content: center;
  overflow: hidden;
  border: none;
  color: var(--color-button-outline-base-content-default);
  cursor: pointer;
  transition: var(--transition);
  /* Размеры кнопок */
}
.button_md {
  height: var(--size-button-height-md);
  padding: var(--size-base-0x-0) var(--size-button-padding-md);
  gap: var(--size-button-space-md);
  border-radius: var(--radius-button-xl);
  /* ButtonLg */
  font-family: var(--font-family-ButtonLg);
  font-size: var(--font-size-ButtonLg);
  font-style: var(--font-style-ButtonLg);
  font-weight: var(--font-weight-ButtonLg);
  line-height: var(--font-line-height-ButtonLg);
  letter-spacing: var(--font-letter-spacing-ButtonLg);
}
.button_md.button_circle {
  width: var(--size-button-height-md);
}
.button_lg {
  height: var(--size-button-height-lg);
  padding: var(--size-base-0x-0) var(--size-button-padding-lg);
  gap: var(--size-button-space-md);
  border-radius: var(--radius-button-xl);
  /* ButtonLg */
  font-family: var(--font-family-ButtonLg);
  font-size: var(--font-size-ButtonLg);
  font-style: var(--font-style-ButtonLg);
  font-weight: var(--font-weight-ButtonLg);
  line-height: var(--font-line-height-ButtonLg);
  letter-spacing: var(--font-letter-spacing-ButtonLg);
}
.button_lg.button_circle {
  width: var(--size-button-height-lg);
}
.button_xl {
  height: var(--size-button-height-xl);
  padding: var(--size-base-0x-0) var(--size-button-padding-lg);
  gap: var(--size-button-space-lg);
  border-radius: var(--radius-button-xl);
  /* HeadingxlMd */
  font-variant-numeric: var(--font-variant-numeric-HeadingxlMd);
  font-family: var(--font-family-HeadingxlMd);
  font-size: var(--font-size-HeadingxlMd);
  font-style: var(--font-style-HeadingxlMd);
  font-weight: var(--font-weight-HeadingxlMd);
  line-height: var(--font-line-height-HeadingxlMd);
  letter-spacing: var(--font-letter-spacing-HeadingxlMd);
}
.button_xl.button_circle {
  width: var(--size-button-height-xl);
}
.button_2xl {
  height: var(--size-button-height-2xl);
  padding: var(--size-base-0x-0) var(--size-button-padding-lg);
  gap: var(--size-button-space-lg);
  border-radius: var(--radius-button-xl);
  /* Heading2xlMd */
  font-family: var(--font-family-Heading2xlMd);
  font-size: var(--font-size-Heading2xlMd);
  font-style: var(--font-style-Heading2xlMd);
  font-weight: var(--font-weight-Heading2xlMd);
  line-height: var(--font-line-height-Heading2xlMd);
}
.button_2xl.button_circle {
  width: var(--size-button-height-2xl);
}
.button_3xl {
  gap: var(--size-button-space-lg);
  /* Heading3xlSemiBold */
  font-variant-numeric: var(--font-varian-Heading3xlSemiBold);
  font-family: var(--font-family-Heading3xlSemiBold);
  font-size: var(--font-size-Heading3xlSemiBold);
  font-style: var(--font-style-Heading3xlSemiBold);
  font-weight: var(--font-weight-Heading3xlSemiBold);
  line-height: var(--font-line-height-Heading3xlSemiBold);
  letter-spacing: var(--font-letter-spacing-Heading3xlSemiBold);
}
.button {
  /* Стили кнопок и состояния */
}
.button_outline {
  border: 2px solid var(--color-button-outline-base-border-default);
  background: var(--color-button-outline-base-bg-default);
}
@media (hover: hover) {
  .button_outline {
    /* Навели курсор на кнопку */
  }
  .button_outline:hover, .button_outline.hover {
    border-color: var(--color-button-outline-base-border-hover);
    box-shadow: inset 0px 0px 0px 1px var(--color-button-outline-base-border-hover);
    background: var(--color-button-outline-base-bg-hover);
  }
}
.button_outline {
  /* Состояние кнопки в момент нажатия и удерживания. */
}
.button_outline:active, .button_outline.active {
  border-color: var(--color-button-outline-base-border-active);
  box-shadow: inset 0px 0px 0px 1px var(--color-button-outline-base-border-active);
  background: var(--color-button-outline-base-bg-active);
}
.button_outline {
  /* Состояние кнопки после того, как на неё нажали и отпустили. */
}
.button_outline:focus-visible, .button_outline.focus-visible, .button_outline.focus {
  box-shadow: 0px 0px 0px 3px var(--color-button-outline-base-focus);
}
.button_outline {
  /* Состояние в отключенном состоянии, недоступном для использования */
}
.button_outline:disabled, .button_outline.disabled {
  border-color: var(--color-button-outline-base-border-disabled);
  background: var(--color-button-outline-base-bg-disabled);
  color: var(--color-button-outline-base-content-disabled);
  box-shadow: none;
  pointer-events: none;
}
.button_circle {
  padding: 0;
  min-width: unset;
  gap: 0;
  text-indent: -999px;
}
@media (hover: hover) {
  .button_circle:hover, .button_circle.hover {
    background: var(--color-button-text-neutral-bg-hover);
  }
}
.button_circle:active, .button_circle.active {
  background: var(--color-button-text-neutral-bg-active);
}
.button_circle {
  /* Состояние кнопки после того, как на неё нажали и отпустили. */
}
.button_circle:focus-visible, .button_circle.focus-visible, .button_circle.focus {
  box-shadow: 0px 0px 0px 3px var(--color-button-text-base-focus);
}
.button_circle {
  /* Состояние в отключенном состоянии, недоступном для использования */
}
.button_circle:disabled, .button_circle.disabled {
  background: var(--color-button-text-base-bg-disabled);
  color: var(--color-button-text-base-content-disabled);
  pointer-events: none;
}
.button_text {
  padding: 0;
  height: unset;
  min-width: unset;
  border-radius: unset;
}
@media (hover: hover) {
  .button_text:hover, .button_text.hover {
    color: var(--color-button-text-base-content-hover);
  }
}
.button_text:active, .button_text.active {
  color: var(--color-button-text-base-content-active);
}
.button_text:focus-visible, .button_text.focus-visible, .button_text.focus {
  color: var(--color-content-neutral-secondary);
  box-shadow: 0px 0px 0px 3px var(--color-button-text-base-focus);
}
.button_text:disabled, .button_text.disabled {
  color: var(--color-button-text-base-content-disabled);
}
.button_full {
  width: 100%;
}
.button:focus-visible, .button.focus-visible, .button:focus, .button.focus {
  outline: none;
}
.button {
  /* Состояния иконок в кнопке */
}
.button .icon svg path[fill] {
  fill: var(--color-button-outline-base-content-default);
}
.button .icon svg path[stroke] {
  stroke: var(--color-button-outline-base-content-default);
}
.button ~ label .icon svg path[fill] {
  fill: var(--color-button-outline-base-content-default);
}
.button ~ label .icon svg path[stroke] {
  stroke: var(--color-button-outline-base-content-default);
}
@media (hover: hover) {
  .button_outline:hover .icon svg path[fill], .button_outline.hover .icon svg path[fill] {
    fill: var(--color-button-outline-base-content-default);
  }
  .button_outline:hover .icon svg path[stroke], .button_outline.hover .icon svg path[stroke] {
    stroke: var(--color-button-outline-base-content-default);
  }
  .button_outline:hover ~ label .icon svg path[fill],
  .button_outline:hover label .icon svg path[fill], .button_outline.hover ~ label .icon svg path[fill],
  .button_outline.hover label .icon svg path[fill] {
    fill: var(--color-button-outline-base-content-default);
  }
  .button_outline:hover ~ label .icon svg path[stroke],
  .button_outline:hover label .icon svg path[stroke], .button_outline.hover ~ label .icon svg path[stroke],
  .button_outline.hover label .icon svg path[stroke] {
    stroke: var(--color-button-outline-base-content-default);
  }
}
.button_outline:active .icon svg path[fill], .button_outline.active .icon svg path[fill] {
  fill: var(--color-button-outline-base-content-default);
}
.button_outline:active .icon svg path[stroke], .button_outline.active .icon svg path[stroke] {
  stroke: var(--color-button-outline-base-content-default);
}
.button_outline:active ~ label .icon svg path[fill], .button_outline.active ~ label .icon svg path[fill] {
  fill: var(--color-button-outline-base-content-default);
}
.button_outline:active ~ label .icon svg path[stroke], .button_outline.active ~ label .icon svg path[stroke] {
  stroke: var(--color-button-outline-base-content-default);
}
.button_outline:focus .icon svg path[fill], .button_outline.focus .icon svg path[fill] {
  fill: var(--color-button-outline-base-content-default);
}
.button_outline:focus .icon svg path[stroke], .button_outline.focus .icon svg path[stroke] {
  stroke: var(--color-button-outline-base-content-default);
}
.button_outline:focus ~ label .icon svg path[fill], .button_outline.focus ~ label .icon svg path[fill] {
  fill: var(--color-button-outline-base-content-default);
}
.button_outline:focus ~ label .icon svg path[stroke], .button_outline.focus ~ label .icon svg path[stroke] {
  stroke: var(--color-button-outline-base-content-default);
}
.button_outline:disabled .icon svg path[fill], .button_outline.disabled .icon svg path[fill] {
  fill: var(--color-button-outline-base-content-disabled);
}
.button_outline:disabled .icon svg path[stroke], .button_outline.disabled .icon svg path[stroke] {
  stroke: var(--color-button-outline-base-content-disabled);
}
.button_outline:disabled ~ label .icon svg path[fill], .button_outline.disabled ~ label .icon svg path[fill] {
  fill: var(--color-button-outline-base-content-disabled);
}
.button_outline:disabled ~ label .icon svg path[stroke], .button_outline.disabled ~ label .icon svg path[stroke] {
  stroke: var(--color-button-outline-base-content-disabled);
}
@media (hover: hover) {
  .button_circle:hover .icon svg path[fill], .button_circle.hover .icon svg path[fill] {
    fill: var(--color-button-text-neutral-content-default);
  }
  .button_circle:hover .icon svg path[stroke], .button_circle.hover .icon svg path[stroke] {
    stroke: var(--color-button-text-neutral-content-default);
  }
  .button_circle:hover ~ label .icon svg path[fill], .button_circle.hover ~ label .icon svg path[fill] {
    fill: var(--color-button-text-neutral-content-default);
  }
  .button_circle:hover ~ label .icon svg path[stroke], .button_circle.hover ~ label .icon svg path[stroke] {
    stroke: var(--color-button-text-neutral-content-default);
  }
}
.button_circle:active .icon svg path[fill], .button_circle.active .icon svg path[fill] {
  fill: var(--color-button-text-neutral-content-default);
}
.button_circle:active .icon svg path[stroke], .button_circle.active .icon svg path[stroke] {
  stroke: var(--color-button-text-neutral-content-default);
}
.button_circle:active ~ label .icon svg path[fill], .button_circle.active ~ label .icon svg path[fill] {
  fill: var(--color-button-text-neutral-content-default);
}
.button_circle:active ~ label .icon svg path[stroke], .button_circle.active ~ label .icon svg path[stroke] {
  stroke: var(--color-button-text-neutral-content-default);
}
.button_circle:focus .icon svg path[fill], .button_circle.focus .icon svg path[fill] {
  fill: var(--color-button-text-neutral-content-default);
}
.button_circle:focus .icon svg path[stroke], .button_circle.focus .icon svg path[stroke] {
  stroke: var(--color-button-text-neutral-content-default);
}
.button_circle:focus ~ label .icon svg path[fill], .button_circle.focus ~ label .icon svg path[fill] {
  fill: var(--color-button-text-neutral-content-default);
}
.button_circle:focus ~ label .icon svg path[stroke], .button_circle.focus ~ label .icon svg path[stroke] {
  stroke: var(--color-button-text-neutral-content-default);
}
.button_circle:disabled .icon svg path[fill], .button_circle.disabled .icon svg path[fill] {
  fill: var(--color-button-text-neutral-content-disabled);
}
.button_circle:disabled .icon svg path[stroke], .button_circle.disabled .icon svg path[stroke] {
  stroke: var(--color-button-text-neutral-content-disabled);
}
.button_circle:disabled ~ label .icon svg path[fill], .button_circle.disabled ~ label .icon svg path[fill] {
  fill: var(--color-button-text-neutral-content-disabled);
}
.button_circle:disabled ~ label .icon svg path[stroke], .button_circle.disabled ~ label .icon svg path[stroke] {
  stroke: var(--color-button-text-neutral-content-disabled);
}
@media (hover: hover) {
  .button_text:hover .icon svg path[fill], .button_text.hover .icon svg path[fill] {
    fill: var(--color-button-text-base-content-hover);
  }
  .button_text:hover .icon svg path[stroke], .button_text.hover .icon svg path[stroke] {
    stroke: var(--color-button-text-base-content-hover);
  }
  .button_text:hover ~ label .icon svg path[fill], .button_text.hover ~ label .icon svg path[fill] {
    fill: var(--color-button-text-base-content-hover);
  }
  .button_text:hover ~ label .icon svg path[stroke], .button_text.hover ~ label .icon svg path[stroke] {
    stroke: var(--color-button-text-base-content-hover);
  }
}
.button_text:active .icon svg path[fill], .button_text.active .icon svg path[fill] {
  fill: var(--color-button-text-base-content-active);
}
.button_text:active .icon svg path[stroke], .button_text.active .icon svg path[stroke] {
  stroke: var(--color-button-text-base-content-active);
}
.button_text:active ~ label .icon svg path[fill], .button_text.active ~ label .icon svg path[fill] {
  fill: var(--color-button-text-base-content-active);
}
.button_text:active ~ label .icon svg path[stroke], .button_text.active ~ label .icon svg path[stroke] {
  stroke: var(--color-button-text-base-content-active);
}
.button_text:focus-visible .icon svg path[fill], .button_text.focus-visible .icon svg path[fill], .button_text.focus .icon svg path[fill] {
  fill: var(--color-content-neutral-secondary);
}
.button_text:focus-visible .icon svg path[stroke], .button_text.focus-visible .icon svg path[stroke], .button_text.focus .icon svg path[stroke] {
  stroke: var(--color-content-neutral-secondary);
}
.button_text:focus-visible ~ label .icon svg path[fill], .button_text.focus-visible ~ label .icon svg path[fill], .button_text.focus ~ label .icon svg path[fill] {
  fill: var(--color-content-neutral-secondary);
}
.button_text:focus-visible ~ label .icon svg path[stroke], .button_text.focus-visible ~ label .icon svg path[stroke], .button_text.focus ~ label .icon svg path[stroke] {
  stroke: var(--color-content-neutral-secondary);
}
.button_text:disabled .icon svg path[fill], .button_text.disabled .icon svg path[fill] {
  fill: var(--color-button-text-base-content-disabled);
}
.button_text:disabled .icon svg path[stroke], .button_text.disabled .icon svg path[stroke] {
  stroke: var(--color-button-text-base-content-disabled);
}
.button_text:disabled ~ label .icon svg path[fill], .button_text.disabled ~ label .icon svg path[fill] {
  fill: var(--color-button-text-base-content-disabled);
}
.button_text:disabled ~ label .icon svg path[stroke], .button_text.disabled ~ label .icon svg path[stroke] {
  stroke: var(--color-button-text-base-content-disabled);
}/*# sourceMappingURL=button.css.map */