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;
  }

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

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

  .icon.large {
    padding: 0 0 0 0;
    width: 3.5rem;
    height: 3.5rem;
  }

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

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

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

  .icon.transparent {
    border: 0;
    padding: 0;
    background-color: transparent;
    color: hsl(from var(--vats-text2) h s l / 50%);
  }

  .icon.transparent:hover {
    border: 0;
    background-color: transparent;
    color: red;
  }

  .transparent:hover {
    color: red;
  }

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

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

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

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

  .transparent,
  .disabled {
    color: hsl(from var(--vats-text2) h s l / 50%);
    border: 0;
    background-color: transparent;
  }

  .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: 1px 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: 1px solid hsl(from var(--vats-coloredtext) h s l / 70%);
  }

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

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

  .darkblue {
    background-color: var(--vats-thx-th);
    border: 1px 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: 1px solid var(--vats-thx-th);
  }

  .black {
    background-color: transparent;
    border: 1px 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: 1px 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: 1px 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 / 30%);
    border: 1px solid hsl(from var(--vats-text2) h s l / 50%);
  }

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