/* stylelint-disable no-eol-whitespace */
/* stylelint-disable color-hex-case */
/* stylelint-disable color-hex-length */
.q-button {
  font-size: 17px;
  color: var(--button_text_secondary_default, #000000);
  border-radius: 12px;
  border: 1px solid var(--button_border_secondary_default, #CCCCCC);
  line-height: 24px;
  font-weight: 500;
  padding: 0;
  margin: 0;
  -webkit-user-select: none;
          user-select: none;
  position: relative;
  overflow: hidden;
}
.q-button__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  white-space: nowrap;
}
.q-button_large {
  width: 100%;
  max-width: 475px;
  height: 48px;
}
.q-button_medium {
  min-width: 168px;
  height: 40px;
}
.q-button_small {
  font-size: 14px;
  padding: 0 14px;
  height: 32px;
  font-weight: 400;
  border-radius: 16px;
}
.q-button_mini {
  font-size: 10px;
  min-width: 42px;
  line-height: 20px;
  padding: 0 11px;
  height: 24px;
  font-weight: 400;
}
.q-button__progress {
  position: relative;
  width: 100%;
  height: 100%;
}
.q-button__progress--finish {
  position: absolute;
  left: 0;
  background-color: var(--button_bg_primary_pressed, #008AE5);
  height: 100%;
  width: 0%;
  transition: width 0.2s;
}
.q-button__progress--unfinish {
  position: absolute;
  background-color: var(--button_bg_primary_disable, rgba(0, 153, 255, 0.5));
  height: 100%;
}
.q-button__progress--text {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.q-button_default {
  border: 1px solid var(--button_border_secondary_default, #CCCCCC);
  background-color: var(--button_bg_secondary_default, rgba(0, 0, 0, 0));
  color: var(--button_text_secondary_default, #000000);
}
.q-button_default:disabled:not(.q-button_loading) {
  border: 1px solid var(--button_border_secondary_disable, rgba(204, 204, 204, 0.5));
  background-color: var(--button_bg_secondary_disable);
  color: var(--button_text_secondary_disable, rgba(0, 0, 0, 0.3));
}
.q-button_default:active:not(:disabled) {
  border: 1px solid var(--button_border_secondary_pressed, #CCCCCC);
  background-color: var(--button_bg_secondary_pressed, rgba(204, 204, 204, 0.3));
  color: var(--button_text_secondary_pressed, #000000);
}
.q-button_default.q-button_progress {
  background-color: var(--button_bg_secondary_disable);
}
.q-button_default.q-button_progress:active:not(:disabled) {
  background-color: var(--button_bg_secondary_disable);
}
.q-button_default .q-button__progress--finish {
  background-color: var(--button_bg_secondary_pressed, rgba(204, 204, 204, 0.3));
}
.q-button_primary {
  color: var(--button_text_primary_default, #FFFFFF);
  background-color: var(--button_bg_primary_default, #0099FF);
  border-color: transparent;
}
.q-button_primary:disabled:not(.q-button_loading) {
  color: var(--button_text_primary_disable, rgba(255, 255, 255, 0.5));
  background-color: var(--button_bg_primary_disable, rgba(0, 153, 255, 0.5));
}
.q-button_primary:active:not(:disabled) {
  background-color: var(--button_bg_primary_pressed, #008AE5);
  border-color: var(--button_border_primary_pressed, rgba(0, 0, 0, 0));
}
.q-button_primary.q-button_progress {
  border: none;
  background-color: var(--button_bg_primary_disable, rgba(0, 153, 255, 0.5));
}
.q-button_primary.q-button_progress:active:not(:disabled) {
  background-color: var(--button_bg_primary_disable, rgba(0, 153, 255, 0.5));
}
.q-button_primary .q-button__progress--finish {
  background-color: var(--button_bg_primary_pressed, #008AE5);
}
.q-button_warning {
  border: 1px solid var(--button_border_error_default, #CCCCCC);
  background-color: var(--button_bg_error_default, rgba(0, 0, 0, 0));
  color: var(--button_text_error_default, #F74C30);
}
.q-button_warning:disabled:not(.q-button_loading) {
  border: 1px solid var(--button_border_error_disable, rgba(204, 204, 204, 0.5));
  background-color: var(--button_bg_error_disable, rgba(0, 0, 0, 0));
  color: var(--button_text_error_disable, rgba(247, 76, 48, 0.3));
}
.q-button_warning:active:not(:disabled) {
  border: 1px solid var(--button_border_error_pressed, #CCCCCC);
  background-color: var(--button_bg_error_pressed, rgba(204, 204, 204, 0.3));
  color: var(--button_text_error_pressed, #F74C30);
}
.q-button_warning.q-button_progress {
  background-color: var(--button_bg_error_disable, rgba(0, 0, 0, 0));
}
.q-button_warning.q-button_progress:active:not(:disabled) {
  background-color: var(--button_bg_error_disable, rgba(0, 0, 0, 0));
}
.q-button_warning .q-button__progress--finish {
  background-color: var(--button_bg_error_pressed, rgba(204, 204, 204, 0.3));
}
.q-button_ghost {
  color: var(--button_text_ghost_default, #FFFFFF);
  background-color: var(--button_bg_ghost_default, rgba(255, 255, 255, 0));
  border-color: var(--button_border_ghost_default, rgba(255, 255, 255, 0.5));
}
.q-button_ghost:disabled:not(.q-button_loading) {
  color: var(--button_text_ghost_disable, rgba(255, 255, 255, 0.3));
  background-color: var(--button_bg_ghost_disable, rgba(255, 255, 255, 0));
  border-color: var(--button_border_ghost_disable, rgba(255, 255, 255, 0.2));
}
.q-button_ghost:active:not(:disabled) {
  color: var(--button_text_ghost_pressed, #FFFFFF);
  background-color: var(--button_bg_ghost_pressed, rgba(255, 255, 255, 0.2));
  border-color: var(--button_border_ghost_pressed, rgba(255, 255, 255, 0.5));
}
.q-button_ghost.q-button_progress {
  background-color: var(--button_bg_ghost_disable, rgba(255, 255, 255, 0));
}
.q-button_ghost.q-button_progress:active:not(:disabled) {
  background-color: var(--button_bg_ghost_disable, rgba(255, 255, 255, 0));
}
.q-button_ghost .q-button__progress--finish {
  background-color: var(--button_bg_ghost_pressed, rgba(255, 255, 255, 0.2));
}
.q-button_link {
  color: var(--brand_standard, #0099FF);
  background-color: transparent;
  border: 0;
  width: auto;
}
.q-button_link:active,
.q-button_link:disabled {
  opacity: 0.5;
}
.q-button_link.q-button_link_small {
  font-size: 14px;
}
.q-button:focus-visible {
  outline: 2px solid var(--brand_standard, #0099FF);
  outline-offset: 2px;
}
.q-button:focus:not(:focus-visible) {
  outline: none;
}
.q-button:disabled:focus-visible {
  outline: none;
}