/* stylelint-disable no-descending-specificity */
/* Custom */
/* Custom */
.btn[data-v-4861ead4] {
  --button-shadow-size: 0 0 0 0.2rem;
  display: inline-flex;
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0.375rem 0.625rem;
  line-height: 1;
  color: var(--theme-color-text-primary);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  transition: 0.3s opacity linear, 0.3s background-color linear, 0.15s border-color linear;
}
.btn[data-v-4861ead4]:focus {
  box-shadow: none;
}
.btn[data-v-4861ead4]:focus-visible {
  box-shadow: var(--shadow-3);
}
.btn--block[data-v-4861ead4] {
  display: flex;
}
.btn--shadowed[data-v-4861ead4] {
  box-shadow: var(--shadow-3);
}
.btn--progress[data-v-4861ead4] {
  --button-progress: calc(var(--f41d9068) * 1%);
  --button-progress-color: var(--theme-color-surface-accent-primary);
  background: conic-gradient(var(--button-progress-color) 0% var(--button-progress), transparent var(--button-progress) 100%);
}
.btn--lg[data-v-4861ead4] {
  padding: 0.75rem 1rem;
}
.btn--sm[data-v-4861ead4] {
  height: 2rem;
  padding: 0.375rem 1.125rem;
  font-size: 0.875rem;
}
.btn--xs[data-v-4861ead4] {
  height: 1.75rem;
  padding: 0.25rem 0.0625rem;
  border-radius: 4px;
}
.btn--xxs[data-v-4861ead4] {
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.btn--xxxs[data-v-4861ead4] {
  --button-shadow-size: 0 0 0 2px;
  height: 1.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.btn--xxxxs[data-v-4861ead4] {
  --button-shadow-size: 0 0 0 2px;
  height: 1rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.btn--circle[data-v-4861ead4] {
  border-radius: 50%;
}
.btn--no-horizontal-padding[data-v-4861ead4] {
  padding: 0.375rem 0;
}
.btn--full[data-v-4861ead4] {
  width: 100%;
}
.btn.disabled[data-v-4861ead4], .btn[data-v-4861ead4]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.btn[data-v-4861ead4] svg {
  fill: currentColor;
  transition: 0.3s fill linear;
}
.btn[data-v-4861ead4]:not(.btn--no-resize-icon) svg {
  height: 100%;
}
.btn--has-only-icon[data-v-4861ead4] {
  width: 4rem;
  height: 4rem;
  padding: 0.75rem;
}
@media (min-width: 991px) {
.btn--has-only-icon[data-v-4861ead4] {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
}
}
.btn--has-only-icon[data-v-4861ead4]:not(.btn--no-resize-icon) svg, .btn--has-only-icon[data-v-4861ead4]:not(.btn--no-resize-icon) img {
  width: 100%;
}
.btn--has-only-icon.btn--sm[data-v-4861ead4] {
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
}
.btn--has-only-icon.btn--md[data-v-4861ead4] {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.25rem;
}
.btn--has-only-icon.btn--lg[data-v-4861ead4] {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
}
.btn--has-only-icon.btn--lg[data-v-4861ead4]:not(.btn--circle) {
  border-radius: 8px;
}
.btn--has-only-icon.btn--xs[data-v-4861ead4] {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.125rem;
}
.btn--has-only-icon.btn--xxs[data-v-4861ead4] {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.125rem;
}
.btn--has-only-icon.btn--xxs[data-v-4861ead4]:not(.btn--circle) {
  border-radius: 6px;
}
.btn--has-only-icon.btn--xxxs[data-v-4861ead4] {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.125rem;
}
.btn--has-only-icon.btn--xxxxs[data-v-4861ead4] {
  width: 1rem;
  height: 1rem;
  padding: 0.125rem;
}
.btn--has-only-icon.btn--full[data-v-4861ead4] {
  width: 100%;
  height: 1.25rem;
  padding: 0.125rem;
}
.btn--mixed-content.btn--sm[data-v-4861ead4] {
  padding: 0.25rem 0.5rem 0.25rem 0.125rem;
}
.btn--mixed-content.btn--md[data-v-4861ead4] {
  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
}
.btn--primary[data-v-4861ead4] {
  color: var(--theme-color-surface-primary-default);
  background-color: var(--theme-color-button-primary);
}
@media (hover: hover) and (pointer: fine) {
.btn--primary[data-v-4861ead4]:not(:disabled):not(.disabled):hover {
    color: var(--theme-color-text-inversed);
    background-color: var(--theme-color-button-primary-hover);
}
}
.btn--primary[data-v-4861ead4]:not(:disabled):not(.disabled):active, .btn--primary:not(:disabled):not(.disabled).active[data-v-4861ead4] {
  color: var(--theme-color-text-inversed);
  background-color: var(--theme-color-button-primary-hover);
}
.btn--primary[data-v-4861ead4]:not(:disabled):not(.disabled):focus {
  box-shadow: none;
}
.btn--primary[data-v-4861ead4]:not(:disabled):not(.disabled):focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-primary-shadow);
}
.btn--secondary[data-v-4861ead4] {
  color: var(--theme-color-button-accent-text);
  background-color: var(--theme-color-button-accent);
}
.btn--secondary[data-v-4861ead4]:disabled, .btn--secondary.disabled[data-v-4861ead4] {
  color: var(--theme-color-button-accent-text);
  background-color: var(--theme-color-button-accent-disabled);
}
@media (hover: hover) and (pointer: fine) {
.btn--secondary[data-v-4861ead4]:not(:disabled):not(.disabled):hover {
    color: var(--theme-color-button-accent-text);
    background-color: var(--theme-color-button-accent-hover);
}
}
.btn--secondary[data-v-4861ead4]:not(:disabled):not(.disabled):active, .btn--secondary:not(:disabled):not(.disabled).active[data-v-4861ead4] {
  color: var(--theme-color-button-accent-text);
  background-color: var(--theme-color-button-accent-hover);
}
.btn--secondary[data-v-4861ead4]:not(:disabled):not(.disabled):focus {
  box-shadow: none;
}
.btn--secondary[data-v-4861ead4]:not(:disabled):not(.disabled):focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-accent-shadow);
}
.btn--secondary-text[data-v-4861ead4] {
  gap: 0.5rem;
  height: 1.25rem;
  padding: 0;
  background-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
.btn--secondary-text[data-v-4861ead4]:hover {
    color: var(--theme-color-text-primary);
    background-color: transparent;
    box-shadow: none;
}
}
.btn--secondary-text[data-v-4861ead4]:focus {
  color: var(--theme-color-text-primary);
  background-color: transparent;
  box-shadow: none;
}
.btn--secondary-text[data-v-4861ead4]:focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-light-shadow);
}
.btn--secondary-text[data-v-4861ead4] svg {
  background-color: var(--theme-color-button-accent);
  border-radius: 4px;
}
.btn--secondary-text[data-v-4861ead4]:disabled svg, .btn--secondary-text.disabled[data-v-4861ead4] svg {
  background-color: var(--theme-color-button-accent-disabled);
}
@media (hover: hover) and (pointer: fine) {
.btn--secondary-text[data-v-4861ead4]:not(:disabled):not(.disabled):hover svg {
    background-color: var(--theme-color-button-accent-hover);
}
}
.btn--secondary-text[data-v-4861ead4]:not(:disabled):not(.disabled):active svg, .btn--secondary-text:not(:disabled):not(.disabled).active[data-v-4861ead4] svg {
  background-color: var(--theme-color-button-accent-hover);
}
.btn--secondary-text[data-v-4861ead4]:not(:disabled):not(.disabled):focus svg {
  box-shadow: none;
}
.btn--secondary-text[data-v-4861ead4]:not(:disabled):not(.disabled):focus-visible svg {
  box-shadow: var(--button-shadow-size) var(--theme-color-accent-shadow);
}
.btn--dark-gray[data-v-4861ead4] {
  background-color: var(--theme-color-surface-secondary-default);
}
@media (hover: hover) and (pointer: fine) {
.btn--dark-gray[data-v-4861ead4]:hover {
    color: var(--theme-color-text-primary);
    background-color: var(--theme-color-button-secondary-hover);
}
}
.btn--light[data-v-4861ead4] {
  color: var(--theme-color-text-primary);
  background-color: var(--theme-color-surface-secondary-default);
  border: 1px solid var(--theme-color-border-icon-button);
}
.btn--light[data-v-4861ead4]:disabled, .btn--light.disabled[data-v-4861ead4] {
  color: var(--theme-color-text-tetriary);
  background-color: var(--theme-color-button-secondary);
}
@media (hover: hover) and (pointer: fine) {
.btn--light[data-v-4861ead4]:not(:disabled):not(.disabled):hover {
    color: var(--theme-color-text-primary);
    background-color: var(--theme-color-surface-secondary-hover);
}
}
.btn--light[data-v-4861ead4]:not(:disabled):not(.disabled):active, .btn--light:not(:disabled):not(.disabled).active[data-v-4861ead4] {
  color: var(--theme-color-text-primary);
  background-color: var(--theme-color-surface-secondary-hover);
}
.btn--light[data-v-4861ead4]:not(:disabled):not(.disabled):focus {
  box-shadow: none;
}
.btn--light[data-v-4861ead4]:not(:disabled):not(.disabled):focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-light-shadow);
}
.btn--light-on-primary[data-v-4861ead4] {
  color: var(--theme-color-text-primary);
  background-color: var(--theme-color-button-icon-secondary);
  border: 1px solid var(--theme-color-border-icon-button);
}
.btn--light-on-primary[data-v-4861ead4]:disabled, .btn--light-on-primary.disabled[data-v-4861ead4] {
  color: var(--theme-color-text-tetriary);
  background-color: var(--theme-color-button-secondary);
}
@media (hover: hover) and (pointer: fine) {
.btn--light-on-primary[data-v-4861ead4]:not(:disabled):not(.disabled):hover {
    background-color: var(--theme-color-button-icon-secondary-hover);
}
}
.btn--light-on-primary[data-v-4861ead4]:not(:disabled):not(.disabled):active, .btn--light-on-primary:not(:disabled):not(.disabled).active[data-v-4861ead4] {
  background-color: var(--theme-color-button-icon-secondary-hover);
}
.btn--light-on-primary[data-v-4861ead4]:not(:disabled):not(.disabled):focus {
  box-shadow: none;
}
.btn--light-on-primary[data-v-4861ead4]:not(:disabled):not(.disabled):focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-primary-shadow);
}
.btn--white[data-v-4861ead4] {
  color: var(--theme-color-text-primary);
  background-color: var(--theme-color-surface-primary-default);
  border: 1px solid var(--theme-color-border-icon-button);
}
@media (hover: hover) and (pointer: fine) {
.btn--white[data-v-4861ead4]:hover {
    color: var(--theme-color-text-primary);
}
}
.btn--white[data-v-4861ead4]:disabled, .btn--white.disabled[data-v-4861ead4] {
  color: var(--theme-color-text-tetriary);
  background-color: var(--theme-color-surface-secondary-default);
  border-color: var(--theme-color-border-icon-button);
}
@media (hover: hover) and (pointer: fine) {
.btn--white[data-v-4861ead4]:not(:disabled):not(.disabled):hover {
    background-color: var(--theme-color-surface-inversed-secondary-hover);
    border-color: var(--theme-color-border-icon-button);
}
.btn--white[data-v-4861ead4]:not(:disabled):not(.disabled):hover svg {
    fill: var(--theme-color-text-primary);
}
}
.btn--white[data-v-4861ead4]:not(:disabled):not(.disabled):active, .btn--white:not(:disabled):not(.disabled).active[data-v-4861ead4] {
  background-color: var(--theme-color-surface-inversed-secondary-hover);
  border-color: var(--theme-color-border-icon-button);
}
.btn--white[data-v-4861ead4]:not(:disabled):not(.disabled):focus {
  box-shadow: none;
}
.btn--white[data-v-4861ead4]:not(:disabled):not(.disabled):focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-light-shadow);
}
.btn--white-primary-hover[data-v-4861ead4] {
  color: var(--theme-color-text-primary);
  background-color: var(--theme-color-surface-primary-default);
  border: 1px solid var(--theme-color-border-icon-button);
}
.btn--white-primary-hover[data-v-4861ead4]:disabled, .btn--white-primary-hover.disabled[data-v-4861ead4] {
  color: var(--theme-color-text-tetriary);
  background-color: var(--theme-color-surface-secondary-default);
  border-color: var(--theme-color-border-icon-button);
}
@media (hover: hover) and (pointer: fine) {
.btn--white-primary-hover[data-v-4861ead4]:not(:disabled):not(.disabled):hover {
    color: var(--theme-color-text-primary);
    background-color: var(--theme-color-button-secondary-hover);
}
}
.btn--white-primary-hover[data-v-4861ead4]:not(:disabled):not(.disabled):active, .btn--white-primary-hover:not(:disabled):not(.disabled).active[data-v-4861ead4] {
  color: var(--theme-color-text-primary);
  background-color: var(--theme-color-button-secondary-hover);
}
.btn--white-primary-hover[data-v-4861ead4]:not(:disabled):not(.disabled):focus {
  box-shadow: none;
}
.btn--white-primary-hover[data-v-4861ead4]:not(:disabled):not(.disabled):focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-primary-shadow);
}
.btn--white-on-surface[data-v-4861ead4] {
  color: var(--theme-color-text-primary);
  background-color: var(--theme-color-surface-primary-default);
  border: 1px solid var(--theme-color-border-icon-button);
}
@media (hover: hover) and (pointer: fine) {
.btn--white-on-surface[data-v-4861ead4]:hover {
    color: var(--theme-color-text-primary);
}
}
.btn--white-on-surface[data-v-4861ead4]:disabled, .btn--white-on-surface.disabled[data-v-4861ead4] {
  color: var(--theme-color-text-tetriary);
  background-color: var(--theme-color-surface-secondary-default);
  border-color: var(--theme-color-border-icon-button);
}
@media (hover: hover) and (pointer: fine) {
.btn--white-on-surface[data-v-4861ead4]:not(:disabled):not(.disabled):hover {
    border-color: var(--theme-color-border-icon-button);
}
}
.btn--white-on-surface[data-v-4861ead4]:not(:disabled):not(.disabled):active, .btn--white-on-surface:not(:disabled):not(.disabled).active[data-v-4861ead4] {
  border-color: var(--theme-color-border-icon-button);
}
.btn--white-on-surface[data-v-4861ead4]:not(:disabled):not(.disabled):focus {
  box-shadow: none;
}
.btn--white-on-surface[data-v-4861ead4]:not(:disabled):not(.disabled):focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-light-shadow);
}
.btn--light-contrast[data-v-4861ead4] {
  color: var(--theme-color-icon-primary);
  background-color: var(--theme-color-surface-secondary-default);
  border: 1px solid var(--theme-color-border-icon-button);
}
.btn--light-contrast[data-v-4861ead4]:disabled, .btn--light-contrast.disabled[data-v-4861ead4] {
  color: var(--theme-color-text-tetriary);
  background-color: var(--theme-color-text-tetriary);
}
@media (hover: hover) and (pointer: fine) {
.btn--light-contrast[data-v-4861ead4]:not(:disabled):not(.disabled):hover {
    color: var(--theme-color-text-inversed);
    background-color: var(--theme-color-button-primary);
}
}
.btn--light-contrast[data-v-4861ead4]:not(:disabled):not(.disabled):active, .btn--light-contrast:not(:disabled):not(.disabled).active[data-v-4861ead4] {
  color: var(--theme-color-text-inversed);
  background-color: var(--theme-color-button-primary);
}
.btn--light-contrast[data-v-4861ead4]:not(:disabled):not(.disabled):focus {
  box-shadow: none;
}
.btn--light-contrast[data-v-4861ead4]:not(:disabled):not(.disabled):focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-light-shadow);
}
.btn--dark[data-v-4861ead4] {
  color: var(--theme-color-text-inversed);
  background-color: var(--theme-color-button-primary);
}
.btn--dark[data-v-4861ead4]:disabled, .btn--dark.disabled[data-v-4861ead4] {
  background-color: var(--theme-color-text-tetriary);
}
@media (hover: hover) and (pointer: fine) {
.btn--dark[data-v-4861ead4]:not(:disabled):not(.disabled):hover {
    background-color: var(--theme-color-surface-inversed-primary-hover);
}
}
.btn--dark[data-v-4861ead4]:not(:disabled):not(.disabled):focus {
  box-shadow: none;
}
.btn--dark[data-v-4861ead4]:not(:disabled):not(.disabled):focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-primary-shadow);
}
.btn--red[data-v-4861ead4] {
  color: var(--theme-color-text-always-white);
  background-color: var(--theme-color-button-critical);
}
.btn--red[data-v-4861ead4]:disabled, .btn--red.disabled[data-v-4861ead4] {
  color: var(--theme-color-text-always-white);
  background-color: var(--theme-color-button-critical-disabled);
}
@media (hover: hover) and (pointer: fine) {
.btn--red[data-v-4861ead4]:not(:disabled):not(.disabled):hover {
    color: var(--theme-color-text-always-white);
    background-color: var(--theme-color-button-critical-hover);
}
}
.btn--red[data-v-4861ead4]:not(:disabled):not(.disabled):active, .btn--red:not(:disabled):not(.disabled).active[data-v-4861ead4] {
  color: var(--theme-color-text-always-white);
  background-color: var(--theme-color-button-critical-hover);
}
.btn--red[data-v-4861ead4]:not(:disabled):not(.disabled):focus {
  box-shadow: none;
}
.btn--red[data-v-4861ead4]:not(:disabled):not(.disabled):focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-light-shadow);
}
.btn--red:not(:disabled):not(.disabled).btn--xxxs[data-v-4861ead4]:focus-visible {
  box-shadow: 0 0 0 0.1rem var(--theme-color-light-shadow);
}
.btn--gray[data-v-4861ead4] {
  color: var(--theme-color-text-primary);
  background-color: var(--theme-color-button-secondary);
  border: 1px solid var(--theme-color-border-icon-button);
}
@media (hover: hover) and (pointer: fine) {
.btn--gray[data-v-4861ead4]:hover {
    color: var(--theme-color-text-primary);
    background-color: var(--theme-color-button-secondary-hover);
}
}
.btn--gray[data-v-4861ead4]:focus {
  box-shadow: none;
}
.btn--gray[data-v-4861ead4]:focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-secondary-shadow);
}
.btn--blue[data-v-4861ead4] {
  color: var(--theme-color-text-link);
  background-color: var(--theme-color-surface-blue-light);
  transition: background-color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.btn--blue[data-v-4861ead4]:hover {
    background-color: var(--theme-color-surface-blue-light-on-hover);
    box-shadow: none;
}
}
.btn--blue[data-v-4861ead4]:focus {
  box-shadow: none;
}
.btn--blue[data-v-4861ead4]:focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-light-shadow);
}
.btn--transparent[data-v-4861ead4] {
  background-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
.btn--transparent[data-v-4861ead4]:hover {
    color: var(--theme-color-text-primary);
    background-color: transparent;
    box-shadow: none;
}
}
.btn--transparent[data-v-4861ead4]:focus {
  color: var(--theme-color-text-primary);
  background-color: transparent;
  box-shadow: none;
}
.btn--transparent[data-v-4861ead4]:focus-visible {
  box-shadow: var(--button-shadow-size) var(--theme-color-light-shadow);
}
.btn--bordered[data-v-4861ead4] {
  color: var(--theme-color-text-primary);
  background-color: var(--theme-color-surface-tetriary);
  border: 1px solid var(--theme-color-border-icon-button);
}
.btn--bordered[data-v-4861ead4]:disabled, .btn--bordered.disabled[data-v-4861ead4] {
  color: var(--theme-color-text-tetriary);
  border: 1px solid var(--theme-color-border-icon-button);
}
@media (hover: hover) and (pointer: fine) {
.btn--bordered[data-v-4861ead4]:not(:disabled):not(.disabled):hover {
    color: var(--theme-color-text-primary);
    border: 1px solid var(--theme-color-border-accent);
}
}
.btn--bordered[data-v-4861ead4]:not(:disabled):not(.disabled):active, .btn--bordered:not(:disabled):not(.disabled).active[data-v-4861ead4] {
  color: var(--theme-color-text-primary);
  border: 1px solid var(--theme-color-border-accent);
}
.btn--bordered[data-v-4861ead4]:not(:disabled):not(.disabled):focus {
  border: 0;
  box-shadow: none;
}
.btn--bordered[data-v-4861ead4]:not(:disabled):not(.disabled):focus-visible {
  border: 1px solid var(--theme-color-border-accent);
}
.btn--block + .btn--block[data-v-4861ead4] {
  margin-top: 0;
}
.btn--link[data-v-4861ead4] {
  height: auto;
  padding: 0;
  color: var(--theme-color-text-link);
  background-color: transparent;
}