:root {
  /* Button sizing */
  --ButtonSmall-height: 30px;
  --ButtonSmall-border-radius: var(--radius-form);
  --ButtonSmall-padding: 5px 9px;
  --ButtonMedium-height: 36px;
  --ButtonMedium-border-radius: var(--radius-form);
  --ButtonMedium-padding: 8px 12px;
  --ButtonLarge-height: 44px;
  --ButtonLarge-border-radius: var(--radius-form);
  --ButtonLarge-padding: 12px 16px;
  --ButtonX-Large-height: 56px;
  --ButtonX-Large-border-radius: 6px;
  --ButtonX-Large-padding: 18px 24px;
}

/* Light theme button styles */
:root,
:root[data-theme=light] {
  --ButtonPrimary-background-color: var(--color-orange-500);
  --ButtonPrimary-color: var(--color-white);
  --ButtonPrimary-border-color: var(--color-orange-600);
  --ButtonPrimary-hover-background-color: #ff751a;
  --ButtonPrimary-hover-border-color: #f50;
  --ButtonPrimary-active-background-color: #e55c00;
  --ButtonPrimary-active-border-color: #c40;

  --ButtonHighlight-background-color: var(--color-petrol-800);
  --ButtonHighlight-color: var(--color-white);
  --ButtonHighlight-border-color: var(--color-petrol-900);
  --ButtonHighlight-hover-background-color: #125e77;
  --ButtonHighlight-hover-border-color: #153e51;
  --ButtonHighlight-active-background-color: #0c3b4b;
  --ButtonHighlight-active-border-color: #0b1f28;

  --ButtonSecondary-background-color: hsla(0, 0%, 100%, .33);
  --ButtonSecondary-color: var(--color-petrol-800);
  --ButtonSecondary-border-color: var(--color-neutral-300);
  --ButtonSecondary-hover-border-color: #c3c6cb;
  --ButtonSecondary-active-border-color: #a8acb3;

  --ButtonSuccess-background-color: var(--color-green-500);
  --ButtonSuccess-color: var(--color-white);
  --ButtonSuccess-border-color: var(--color-green-600);
  --ButtonSuccess-hover-background-color: #66c828;
  --ButtonSuccess-hover-border-color: #5aad31;
  --ButtonSuccess-active-background-color: #509e20;
  --ButtonSuccess-active-border-color: #468525;

  --ButtonAlert-background-color: var(--color-red-500);
  --ButtonAlert-color: var(--color-white);
  --ButtonAlert-border-color: var(--color-red-600);
  --ButtonAlert-hover-background-color: #f33151;
  --ButtonAlert-hover-border-color: #ca1836;
  --ButtonAlert-active-background-color: #e50d31;
  --ButtonAlert-active-border-color: #9c122a;

  --ButtonDisabled-border-color: var(--color-neutral-300);
  --ButtonDisabled-background-color: var(--color-neutral-100);
  --ButtonDisabled-color: var(--color-petrol-800);
}

/* Dark theme button styles */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --ButtonPrimary-background-color: var(--color-orange-600);
    --ButtonPrimary-color: var(--color-white);
    --ButtonPrimary-border-color: var(--color-orange-700);
    --ButtonPrimary-hover-background-color: #ed580d;
    --ButtonPrimary-hover-border-color: #b53f0d;
    --ButtonPrimary-active-background-color: #c73200;
    --ButtonPrimary-active-border-color: #8f1900;

    --ButtonHighlight-background-color: var(--color-petrol-600);
    --ButtonHighlight-color: var(--color-white);
    --ButtonHighlight-border-color: var(--color-petrol-700);
    --ButtonHighlight-hover-background-color: #158fa7;
    --ButtonHighlight-hover-border-color: #137285;
    --ButtonHighlight-active-background-color: #006981;
    --ButtonHighlight-active-border-color: #004c5f;

    --ButtonSecondary-background-color: rgba(30, 31, 36, .33);
    --ButtonSecondary-color: var(--color-petrol-300);
    --ButtonSecondary-border-color: var(--color-neutral-500);
    --ButtonSecondary-hover-border-color: #676b73;
    --ButtonSecondary-active-border-color: #41454d;

    --ButtonSuccess-background-color: var(--color-green-700);
    --ButtonSuccess-color: var(--color-white);
    --ButtonSuccess-border-color: var(--color-green-800);
    --ButtonSuccess-hover-background-color: #4c8734;
    --ButtonSuccess-hover-border-color: #3c692e;
    --ButtonSuccess-active-background-color: #26610e;
    --ButtonSuccess-active-border-color: #164308;

    --ButtonAlert-background-color: var(--color-red-600);
    --ButtonAlert-color: var(--color-white);
    --ButtonAlert-border-color: var(--color-red-700);
    --ButtonAlert-hover-background-color: #c0223d;
    --ButtonAlert-hover-border-color: #922235;
    --ButtonAlert-active-background-color: #9a0017;
    --ButtonAlert-active-border-color: #6c000f;

    --ButtonDisabled-border-color: var(--color-neutral-500);
    --ButtonDisabled-background-color: var(--color-neutral-600);
    --ButtonDisabled-color: var(--color-petrol-300);
  }
}

:root[data-theme=dark] {
  --ButtonPrimary-background-color: var(--color-orange-600);
  --ButtonPrimary-color: var(--color-white);
  --ButtonPrimary-border-color: var(--color-orange-700);
  --ButtonPrimary-hover-background-color: #ed580d;
  --ButtonPrimary-hover-border-color: #b53f0d;
  --ButtonPrimary-active-background-color: #c73200;
  --ButtonPrimary-active-border-color: #8f1900;

  --ButtonHighlight-background-color: var(--color-petrol-600);
  --ButtonHighlight-color: var(--color-white);
  --ButtonHighlight-border-color: var(--color-petrol-700);
  --ButtonHighlight-hover-background-color: #158fa7;
  --ButtonHighlight-hover-border-color: #137285;
  --ButtonHighlight-active-background-color: #006981;
  --ButtonHighlight-active-border-color: #004c5f;

  --ButtonSecondary-background-color: rgba(30, 31, 36, .33);
  --ButtonSecondary-color: var(--color-petrol-300);
  --ButtonSecondary-border-color: var(--color-neutral-500);
  --ButtonSecondary-hover-border-color: #676b73;
  --ButtonSecondary-active-border-color: #41454d;

  --ButtonSuccess-background-color: var(--color-green-700);
  --ButtonSuccess-color: var(--color-white);
  --ButtonSuccess-border-color: var(--color-green-800);
  --ButtonSuccess-hover-background-color: #4c8734;
  --ButtonSuccess-hover-border-color: #3c692e;
  --ButtonSuccess-active-background-color: #26610e;
  --ButtonSuccess-active-border-color: #164308;

  --ButtonAlert-background-color: var(--color-red-600);
  --ButtonAlert-color: var(--color-white);
  --ButtonAlert-border-color: var(--color-red-700);
  --ButtonAlert-hover-background-color: #c0223d;
  --ButtonAlert-hover-border-color: #922235;
  --ButtonAlert-active-background-color: #9a0017;
  --ButtonAlert-active-border-color: #6c000f;

  --ButtonDisabled-border-color: var(--color-neutral-500);
  --ButtonDisabled-background-color: var(--color-neutral-600);
  --ButtonDisabled-color: var(--color-petrol-300);
}
