span.svelte-j5oyoi {
    overflow: visible;
  }

  button.svelte-j5oyoi {
    height: max-content;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    position: relative;
    transform: scale(var(--button-scale, 1));
    transform-origin: center;
    transition:
      transform 140ms ease,
      box-shadow 140ms ease,
      background-color 140ms ease,
      border-color 140ms ease,
      color 140ms ease;
  }

  button.svelte-j5oyoi:focus {
    outline: none;
  }

  button.svelte-j5oyoi:hover:not(.disabled) {
    transform: scale(calc(var(--button-scale, 1) * 1.2));
    z-index: 1;
  }

  .large.text-button {
    padding: 0.4rem 1rem 0.4rem 1rem;
  }

  .icon {
    padding: 0;
  }

  .icon.xlarge {
    width: 3.5rem;
    height: 3.5rem;
    margin-top: 0.25rem;
  }

  .icon.large {
    width: 3.25rem;
    height: 3.25rem;
  }

  .icon.normal {
    height: 2.75rem;
    width: 2.75rem;
  }

  .icon.small {
    height: 2.5rem;
    width: 2.5rem;
  }

  .icon.tiny {
    height: 2rem;
    width: 2rem;
  }

  .icon.transparent {
    border: 0;
    background-color: transparent;
    color: var(--vats-coloredtext);
  }

  .icon.transparent:hover, .icon.transparent-red:hover {
    border: 0;
    background-color: transparent;
    color: var(--vats-coloredtext);
  }

  .transparent-red:hover {
    color: var(--vats-coloredtext);
  }

  .tiny,
  .small,
  .normal {
    height: 2.5rem;
    font-size: var(--vats-text-s);
    width: 100%;
  }

  .large {
    height: 3rem;
    font-size: var(--vats-text-m);
    padding: 0 0.35rem 0 0.35rem;
    width: 100%;
  }

  .transparent {
    color: transparent;
    background-color: transparent;
    border: 0;
  }

  .disabled {
    color: hsl(from var(--vats-text2) h s l / 50%);
    opacity: 0.5;
    cursor: not-allowed;
  }

  .transparent:hover {
    color: hsl(from var(--vats-text2) h s l / 90%);
  }

  .colored {
    background-color: hsl(from var(--vats-coloredtext) h s l / 20%);
    border: var(--button-border-width) solid hsl(from var(--vats-coloredtext) h s l / 50%);
    color: var(--vats-text);
  }

  .colored:hover {
    background-color: hsl(from var(--vats-coloredtext) h s l / 30%);
    border: var(--button-border-width) solid hsl(from var(--vats-coloredtext) h s l / 70%);
  }

  .blue {
    background-color: hsl(from var(--vats-blue) h s l / 0%);
    border: var(--button-border-width) solid var(--vats-blue);
    color: var(--vats-blue);
  }

  .blue:hover {
    background-color: hsl(from var(--vats-blue) h s l / 20%);
    border: var(--button-border-width) solid hsl(from var(--vats-blue) h s l / 70%);
  }

  .darkblue {
    background-color: var(--vats-thx-th);
    border: var(--button-border-width) solid var(--vats-thx-th);
    color: var(--vats-text-inverse);
  }

  .darkblue:hover {
    background-color: hsl(from var(--vats-thx-th) h s l / 80%);
    border: var(--button-border-width) solid var(--vats-thx-th);
  }

  .black {
    background-color: transparent;
    border: var(--button-border-width) solid var(--vats-thx-th);
    color: var(--vats-thx-th);
  }

  .black:hover {
    background-color: hsl(from var(--vats-coloredtext) h s l / 20%);
  }

  .red {
    background-color: var(--vats-coloredtext);
    border: var(--button-border-width) solid var(--vats-coloredtext);
    color: var(--vats-text-inverse);
  }

  .red:hover {
    background-color: hsl(from var(--vats-coloredtext) h s l / 80%);
  }

  .light {
    background-color: transparent;
    border: var(--button-border-width) solid hsl(from var(--vats-text2) h s l / 30%);
    color: var(--vats-text3);
  }

  .light:hover {
    background-color: hsl(from var(--vats-text3) h s l / 10%);
    border: var(--button-border-width) solid var(--vats-coloredtext);
    color: var(--vats-coloredtext);
  }

  .light.borderless:hover {
    background-color: transparent;
  }

  .text-button, .icon.text-button {
    padding: 0.4rem 1rem 0.4rem 1rem;
    height: max-content;
  }