#html-body {
  .button,
  button.primary,
  button.theme_btn,
  button.action-primary,
  button.action-dismiss,
  button.action-update,
  button.action-apply,
  button.action-cancel,
  .pagebuilder-button-primary {
    display: flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--green-light);
    color: var(--white);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease, color 0.2s ease;
    height: fit-content;
    width: fit-content;
    text-transform: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  #maincontent,
  &.catalog-product-view {
    button.primary span,
    button.theme_btn span,
    button.action-primary span,
    button.action-apply span,
    .pagebuilder-button-primary span,
    button.pagebuilder-button-primary span
    a.pagebuilder-button-primary span,
    .button-small span {
      color: var(--white);
    }
  }

  .button span,
  button.primary span,
  button.theme_btn span,
  button.action-primary span,
  button.primary span {
    color: var(--white);
  }

  .button:visited,
  button.primary:visited,
  button.theme_btn:visited,
  button.action-primary:visited,
  button.primary:visited {
    background: var(--green-light);
    color: var(--white);
  }

  .button:hover,
  button.primary:hover,
  button.theme_btn:hover,
  button.action-primary:hover,
  button.primary:hover,
  .pagebuilder-button-primary:hover {
    background: var(--green);
    color: var(--white);
  }

  .button:focus,
  button.primary:focus,
  button.theme_btn:focus,
  button.action-primary:focus,
  button.primary:focus,
  .pagebuilder-button-primary:focus {
    background: var(--green-dark);
    color: var(--white);
  }

  .button:active,
  button.primary:active,
  button.theme_btn:active,
  button.action-primary:active,
  button.primary:active,
  .pagebuilder-button-primary:active {
    background: var(--green-dark);
    color: var(--white);
  }

  .button:disabled,
  button.primary:disabled,
  button.theme_btn:disabled,
  button.action-primary:disabled,
  button.primary:disabled,
  .pagebuilder-button-primary:disabled {
    background: var(--gray);
    color: var(--white);
    cursor: not-allowed;
  }

  button.theme_btn.gray,
  button.theme_btn.gray span,
  button.action-dismiss,
  button.action-dismiss span {
    background: var(--gray);
    color: var(--white);
  }

  button.theme_btn.alert,
  button.theme_btn.alert span {
    background: var(--alert);
    color: var(--white);
  }

  /* ---------------------------- */

  .button-outline,
  .pagebuilder-button-secondary {
    display: flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: transparent;
    color: var(--green-light);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid var(--green-light);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    height: fit-content;
    width: fit-content;
    text-transform: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .pagebuilder-button-secondary span {
    color: var(--green-light);
  }

  .button-outline:visited,
  .pagebuilder-button-secondary:visited {
    color: var(--green-light);
    border-color: var(--green-light);
  }

  .button-outline:hover,
  .pagebuilder-button-secondary:hover,
  .pagebuilder-button-secondary:hover > span {
    color: var(--green);
    border-color: var(--green);
  }

  .button-outline:focus,
  .pagebuilder-button-secondary:focus {
    color: var(--green-dark);
    border-color: var(--green-dark);
  }

  .button-outline:active,
  .pagebuilder-button-secondary:active {
    color: var(--green-dark);
    border-color: var(--green-dark);
  }

  .button-outline:disabled,
  .pagebuilder-button-secondary:disabled {
    background: var(--white);
    border-color: var(--gray);
    color: var(--gray);
    cursor: not-allowed;
  }

  /* ---------------------------- */

  .button-small {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--green-light);
    color: var(--white);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease, color 0.2s ease;
    height: fit-content;
    width: fit-content;
    text-transform: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .button-small:visited {
    background: var(--green);
    color: var(--white);
  }

  .button-small:hover {
    background: var(--green);
    color: var(--white);
  }

  .button-small:focus {
    background: var(--green-dark);
    color: var(--white);
  }

  .button-small:active {
    background: var(--green-dark);
    color: var(--white);
  }

  .button-small:disabled {
    background: var(--gray);
    color: var(--white);
    cursor: not-allowed;
  }

  /* ---------------------------- */

  .button-small-outline {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: transparent;
    color: var(--green-light);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid var(--green-light);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    height: fit-content;
    width: fit-content;
    text-transform: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .button-small-outline:visited {
    color: var(--green-light);
    background: var(--green-light);
  }

  .button-small-outline:hover {
    color: var(--green);
    border-color: var(--green);
  }

  .button-small-outline:focus {
    background: var(--green-dark);
    border-color: var(--green-dark);
  }

  .button-small-outline:active {
    background: var(--green-dark);
    border-color: var(--green-dark);
  }

  .button-small-outline:disabled {
    background: transparent;
    color: var(--gray);
    border-color: var(--gray);
    cursor: not-allowed;
  }

  /* ---------------------------- */
  .pagebuilder-button-link span,
  .pagebuilder-button-link a {
    color: var(--green-light);
  }

  .theme_btn.red span,
  .theme_btn.green span {
    color: #fff;
  }
  .theme_btn.red,
   button.gs-btn.action.primary.red,
   a.gs-btn.action.primary.red {
    background-color: #C3453A;
  }
  .theme_btn.red:hover,
  button.gs-btn.action.primary.red:hover,
  a.gs-btn.action.primary.red:hover {
    background-color: #ac3d33;
  }
}