.button {
  &.button--medium {
    --codex-button-padding: 9px 10px;
  }

  &.button--small {
    --codex-button-padding: 6px 10px;
    height: 40px;
  }

  border-radius: 8px;
  outline: none;
  padding: var(--codex-button-padding);
  display: flex;
  place-items: center;
  gap: 2px;
  font-weight: 500;
  position: relative;
  border: none;
  transition:
    box-shadow 0.35s,
    opacity 0.35s;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
  border: 1px solid transparent;
  place-content: center;

  &[aria-busy] {
    cursor: wait;
  }

  &[aria-busy]::after {
    content: " ";
    display: block;
    background-image: var(
      --codex-button-loader,
      url('data:image/svg+xml,<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background: new 0 0 50 50" xml:space="preserve"><path fill="%23FFF" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg>')
    );
    position: absolute;
    background-color: var(
      --codex-button-background-busy,
      var(--codex-background-backdrop)
    );

    /**
     * Set full size and add border.
     */
    width: calc(100% + 2px);
    height: calc(100% + 2px);

    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
    left: -1px;
    right: 0;
    border-radius: var(--codex-border-radius);
  }

  &.button--primary:not(:disabled):hover {
    cursor: pointer;
    box-shadow: 0 0 0 3px var(--codex-button-color-box-shadow, #6fcb94cc);
  }

  &.button--outline:not(:disabled):hover {
    cursor: pointer;
    box-shadow: 0 0 0 2px var(--codex-border-color);
  }

  &.button--primary {
    background-color: #6fcb94;
    color: var(--codex-color-on-primary);
  }

  &:disabled {
    cursor: not-allowed;
  }

  &.button--primary:disabled {
    background-color: var(--codex-color-disabled);
  }

  &.button--outline:disabled {
    color: var(--codex-color-disabled);
  }

  &.button--outline {
    color: var(--codex-color-outline, var(--codex-color-contrast));
    border-color: var(--codex-border-color);
    background-color: #2f2f2f;
    color: #969696;
  }

  span {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  div {
    width: 20px;
    height: 20px;
    display: flex;
    place-items: center;
  }
}