﻿.staticiam-page .PButton {
  height: auto;
  min-height: var(--spacing-09);
  border: none;
  border-radius: var(--spacing-03);
  font-size: var(--font-size-300);
  line-height: var(--line-height-300);
  padding: var(--spacing-04) var(--spacing-07);
}

.staticiam-page .PButton__container {
  justify-content: center;
  display: flex;
  line-height: var(--line-height-400);
}

.staticiam-page .PButton i {
  font-size: var(--font-size-300);
}

.staticiam-page .PButton a {
  line-height: var(--line-height-300);
}

.staticiam-page .PButton--full {
  width: 100% !important;
}

.staticiam-page .PButton--full .PButton__container {
  justify-content: center;
}

.staticiam-page .PButton--primary {
  background-color: var(--color-primary-500);
  color: var(--color-neutral-0);
  padding: var(--spacing-03) var(--spacing-07);
}

.staticiam-page .PButton--primary:hover {
  background-color: var(--color-primary-700);
}

.staticiam-page .PButton--primary:active {
  background-color: var(--color-primary-800) !important;
}

.staticiam-page .PButton--primary:disabled, 
.staticiam-page .PButton--primary.disabled {
  opacity: 0.8;
  background-color: var(--color-neutral-400);
}

.staticiam-page .PButton--singpass {
  outline: 1px solid var(--color-neutral-400);
  background-color: var(--color-neutral-0);
  color: var(--color-neutral-900);
  padding: var(--spacing-05) var(--spacing-06);
}

.staticiam-page .PButton--singpass img {
  border-radius: 0 !important;
  padding: 0px;
}


.staticiam-page .PButton--secondary {
  outline: 1px solid var(--color-primary-600);
  background-color: var(--color-neutral-0);
  color: var(--color-primary-600);
}

.staticiam-page .PButton--secondary:focus-visible {
  background-color: var(--color-neutral-0);
  color: var(--color-primary-700);
}

.staticiam-page .PButton--secondary:focus {
  outline: 1px solid var(--color-primary-600) !important;
}

.staticiam-page .PButton--secondary:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

.staticiam-page .PButton--secondary:active {
  background-color: var(--color-primary-200) !important;
  color: var(--color-primary-700) !important;
}

.staticiam-page .PButton--secondary:disabled, 
.staticiam-page .PButton--secondary.disabled {
  background-color: var(--color-neutral-0);
  color: var(--color-neutral-500);
  outline: 1.5px solid var(--color-neutral-400);
  opacity: 0.8;
}

.staticiam-page .PButton--tertiary {
  background: none;
  border: none !important;
  color: var(--color-primary-600);
  line-height: var(--line-height-400);
  padding: var(--spacing-03) var(--spacing-0);
}

.staticiam-page .PButton--tertiary:focus-visible {
  background: none;
  color: var(--color-primary-700);
}

.staticiam-page .PButton--tertiary:hover {
  background: none;
  color: var(--color-primary-700);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 1px;
}

.staticiam-page .PButton--tertiary:active {
  background: none !important;
  color: var(--color-primary-700) !important;
}

.staticiam-page .PButton--tertiary:disabled, 
.staticiam-page .PButton--tertiary.disabled {
  background-color: var(--color-neutral-0);
  color: var(--color-neutral-500);
  opacity: 0.8;
}

.staticiam-page .PButton--accent {
  background-color: var(--color-accent-500);
  color: var(--color-neutral-0);
}

.staticiam-page .PButton--accent:focus-visible {
  background-color: var(--color-accent-500);
  color: var(--color-neutral-0);
}

.staticiam-page .PButton--accent:hover {
  background-color: var(--color-accent-600);
  color: var(--color-neutral-0);
}

.staticiam-page .PButton--accent:active {
  background-color: var(--color-accent-700) !important;
  color: var(--color-neutral-0) !important;
}

.staticiam-page .PButton--accent:disabled, 
.staticiam-page .PButton--accent.disabled {
  background-color: var(--color-neutral-400);
  color: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-400);
  opacity: 0.8;
}

/* Desktop view: Set PButton width to 250px */
@media (min-width: 992px) {
  .staticiam-page .PButton {
    width: 250px;
  }
}
