/* custom colors */
.button[data-v-3e5afb61] {
  --focus-opacity: 0.15;
  --focus-color: var(--color);
  --font-size: 14px;
  --icon-size: 18px;
  --bg: transparent;
  --line-height: 1.35;
  --font-weight: 400;
  --radius: var(--sm);
  --ps: var(--px);
  --pe: var(--px);
  --align: center;
  --muted-opacity: 0.5;
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  min-height: var(--size);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  text-align: var(--align);
  padding: var(--py) var(--pe) var(--py) var(--ps);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--trs-1), color var(--trs-1), border-color var(--trs-1), opacity var(--trs-1);
  /* color */
  /* color */
}
.button[data-v-3e5afb61]::after, .button[data-v-3e5afb61]::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.button[data-v-3e5afb61]::before {
  background-color: var(--focus-color);
  transition: background-color var(--trs-1);
}
.button[data-v-3e5afb61]::after {
  background-color: var(--color-text);
  opacity: 0;
  transition: opacity var(--trs-1);
  will-change: opacity;
}
.button__inner[data-v-3e5afb61] {
  display: flex;
  position: relative;
  z-index: 1;
  gap: var(--gap);
  align-items: center;
  text-align: var(--align);
  justify-content: var(--align);
  width: 100%;
  transition: opacity var(--trs-1);
}
.button__icon[data-v-3e5afb61] {
  font-size: var(--icon-size);
}
.button__spinner[data-v-3e5afb61] {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.button__spinner-element[data-v-3e5afb61] {
  display: block;
  width: var(--spinner-size);
  height: var(--spinner-size);
}
body.desktop .button[data-v-3e5afb61]:hover:not(.button--no-hover):not(.button--inactive):not(.button--disabled)::after {
  opacity: var(--focus-opacity);
}
.button--color-primary[data-v-3e5afb61] {
  --color: var(--theme-color-primary);
  --color-text: var(--theme-dark-color);
}
.button--color-accent[data-v-3e5afb61] {
  --color: var(--theme-color-accent);
  --color-text: var(--color-light);
}
.button--color-primary-muted[data-v-3e5afb61] {
  --color: var(--theme-color-primary-muted);
  --color-text: var(--theme-color-primary);
}
.button--color-muted[data-v-3e5afb61] {
  --color: var(--theme-color-muted-light);
  --color-text: var(--theme-color);
}
.button--color-muted.button--outline[data-v-3e5afb61] {
  --color: var(--theme-color-muted-light);
  --color-text: var(--theme-color-muted);
}
.button--color-light[data-v-3e5afb61] {
  --color: var(--theme-color-light);
  --color-text: var(--theme-color);
  --focus-opacity: 0.05;
}
.button--color-light.button--outline[data-v-3e5afb61] {
  --color: var(--theme-color-separator);
  --color-text: var(--theme-color);
}
.button--color-light-muted[data-v-3e5afb61] {
  --color: var(--theme-color-bg);
  --color-text: var(--theme-color);
  --focus-opacity: 0.05;
  --color-border: var(--theme-color-separator);
}
.button--color-light-muted.button--disabled[data-v-3e5afb61] {
  --color: var(--theme-color-muted);
}
.button--color-transparent[data-v-3e5afb61] {
  --color: transparent;
  --color-text: var(--theme-color);
}
.button--color-dark[data-v-3e5afb61] {
  --color: var(--color-dark);
  --color-text: var(--color-light);
}
body.body--dark .button--color-dark[data-v-3e5afb61] {
  --color: var(--color-light);
  --color-text: var(--color-dark);
}
.button--color-translucent[data-v-3e5afb61] {
  --color: var(--theme-color-bg-translucent);
  --color-text: var(--theme-color-muted);
}
.button--size-xs[data-v-3e5afb61] {
  --size: 28px;
  --gap: 6px;
  --px: 10px;
  --py: 6px;
  --spinner-size: 12px;
}
.button--size-sm[data-v-3e5afb61] {
  --size: 36px;
  --gap: 8px;
  --px: 14px;
  --py: 6px;
  --spinner-size: 18px;
}
.button--size-md[data-v-3e5afb61] {
  --size: 40px;
  --gap: 8px;
  --px: 16px;
  --py: 8px;
  --spinner-size: 20px;
}
.button--size-lg[data-v-3e5afb61] {
  --size: 48px;
  --font-size: 16px;
  --icon-size: 22px;
  --gap: 12px;
  --px: 24px;
  --py: 8px;
  --spinner-size: 22px;
}
.button--muted[data-v-3e5afb61]::before {
  opacity: var(--muted-opacity);
}
.button--align-center[data-v-3e5afb61] {
  --align: center;
}
.button--align-left[data-v-3e5afb61] {
  --align: left;
}
.button--no-radius[data-v-3e5afb61] {
  --radius: 0px;
}
.button--rounded[data-v-3e5afb61] {
  --radius: calc(var(--size) / 2);
}
.button--square[data-v-3e5afb61], .button--round[data-v-3e5afb61] {
  --px: 0px;
  --py: 0px;
  min-width: var(--size);
}
.button--round[data-v-3e5afb61] {
  --radius: 50%;
}
.button--outline[data-v-3e5afb61] {
  --color-text: var(--color);
  border: 1px solid var(--color);
}
.button--outline[data-v-3e5afb61]::before {
  background-color: var(--theme-color-bg);
}
.button--full-width[data-v-3e5afb61] {
  width: 100%;
}
.button--caps[data-v-3e5afb61] {
  text-transform: uppercase;
}
.button--disabled[data-v-3e5afb61] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}
.button--inactive[data-v-3e5afb61] {
  cursor: default;
  pointer-events: none;
}
.button--loading[data-v-3e5afb61] {
  cursor: progress;
}
.button--loading .button__inner[data-v-3e5afb61] {
  opacity: 0;
}
.button--shadow[data-v-3e5afb61] {
  box-shadow: var(--shadow);
}