button, a.button, span.button, input[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  outline: none;
  cursor: pointer;
  height: 40px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 17px;
  font-weight: var(--weight-medium);
  padding: 9px 17px;
  gap: 8px;
  width: fit-content; /* Needed for anchor tags, otherwise they take the full width because of display: flex */

  /* Kinds */

  &.primary {
    background-color: var(--color-bg-brand-solid);
    border: solid 1px var(--color-bg-brand-solid);
    color: #ffffff;

    img {
      filter: invert(100%);
    }

    &:active:not(:disabled) {
      background-color: var(--color-bg-brand-solid_hover);
    }

    i {
      opacity: 0.5;
    }
  }

  &.secondary {
    background-color: transparent;
    color: var(--color-bg-brand-solid);
    border: 1px solid var(--color-bg-brand-solid);
    border-radius: 4px;

    &:active:not(:disabled), &:hover:not(:disabled) {
      color: #ffffff;
      background-color: var(--color-bg-brand-solid);
    }
  }

  &.normal {
    background-color: var(--color-bg-primary);
    border: solid 1px var(--color-border-primary);
    color: var(--color-text-secondary);

    &:active, &:hover {
      &:not(:disabled):not(.disabled) {
        background-color: var(--color-bg-quaternary);
      }
    }

    &.disabled {
      background-color: var(--color-bg-disabled);
      border: solid 1px var(--color-border-disabled);
      color: var(--color-text-disabled);
      cursor: not-allowed;
    }

    i {
      color: var(--color-fg-quaternary);
    }
  }

  &.danger {
    background-color: #ffffff;
    border: solid 1px var(--color-fg-error-secondary);
    color: var(--color-fg-error-secondary);

    img {
      filter: invert(100%);
    }

    &:active, &:hover {
      &:enabled {
        background-color: var(--color-text-error-primary);
        color: #ffffff;
      }
    }
  }

  &.link {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: var(--color-text-link-primary);
    height: initial !important;
    cursor: pointer;
    font-weight: var(--weight-medium);

    /* Kinds */

    &.plain {
      color: initial;
    }

    &.normal {
      color: var(--color-text-secondary);

      &:hover {
        color: var(--color-text-primary);
      }
    }

    /* Kinds */
  }

  &.icon-normal {
    border: none;
    background: none;
    padding: 0;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    display: flex;

    i {
      font-size: var(--font-size-icon);
      color: var(--color-fg-quaternary);

      &:hover {
        color: var(--color-fg-tertiary);
      }
    }
  }

  /* Kinds */

  /* Accent */

  &.bold {
    font-weight: var(--weight-bold);
  }

  /* Accent */

  /* Size */

  &.tighter {
    height: 35px;
    font-size: 15px;
  }

  /* Space */

  &.expand {
    height: 100%;
    width: 100%;
  }

  &:disabled {
    background-color: var(--color-bg-disabled);
    border: solid 1px #d3d3d3;
    color: var(--color-text-tertiary);
    cursor: not-allowed;
  }

  /* Space */
}