@import url("styles.css");

:root {
  --secondary-20: #130026;
  --secondary-25: #1b0038;
  --secondary-30: #25004d;
  --secondary-35: #2d0459;
  --secondary-40: #680acf;
  --secondary-60: #9044e3;
  --secondary-80: #a96ceb;
  --secondary-90: #c59df3;
  --light-grey: #e0e0e0;
}

:root:not(.pf-v5-theme-dark) {
  --button-primary-default: var(--secondary-35);
  --button-primary-hover: var(--secondary-40);
  --button-primary-active: var(--secondary-35);

  --button-solid-primary-default: var(--button-primary-default);
  --button-solid-primary-hover: var(--button-primary-hover);
  --button-solid-primary-active: var(--button-primary-active);

  --pf-v5-global--primary-color--100: var(--secondary-35);
  --pf-v5-global--primary-color--dark-100: var(--secondary-35);

  --pf-v5-global--BackgroundColor--dark-100: var(--secondary-20);
  --pf-v5-global--BackgroundColor--dark-300: var(--secondary-20);

  --pf-v5-global--link--Color--dark: var(--button-primary-default);
  --pf-v5-global--link--Color--dark--hover: var(--button-primary-hover);

  --pf-v5-global--link--Color: var(--button-primary-default);
  --pf-v5-global--link--Color--hover: var(--button-primary-hover);

  --pf-v5-global--active-color--100: var(--secondary-35);
}

:root.pf-v5-theme-dark {
  --button-primary-default: var(--secondary-80);
  --button-primary-hover: var(--secondary-90);
  --button-primary-active: var(--secondary-80);

  --button-solid-primary-default: var(--secondary-60);
  --button-solid-primary-hover: var(--secondary-80);
  --button-solid-primary-active: var(--secondary-60);

  --button-secondary-default: var(--button-primary-default);
  --button-secondary-hover: var(--button-primary-hover);
  --button-secondary-active: var(--button-primary-active);

  --pf-v5-global--primary-color--100: var(--button-primary-default);
  --pf-v5-global--primary-color--dark-100: var(--secondary-60);

  --pf-v5-global--BackgroundColor--dark-100: var(--secondary-20);
  --pf-v5-global--BackgroundColor--dark-300: var(--secondary-20);

  --pf-v5-global--link--Color--dark: var(--button-primary-default);
  --pf-v5-global--link--Color--dark--hover: var(--button-primary-hover);

  --pf-v5-global--link--Color: var(--button-primary-default);
  --pf-v5-global--link--Color--hover: var(--button-primary-hover);

  --pf-v5-global--active-color--100: var(--secondary-60);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--button-primary-default);
}

/* start buttons */

:root.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
  color: var(--light-grey);
}

.pf-v5-c-button {
  border-color: var(--button-secondary-active);
}

.pf-v5-c-button.pf-m-primary {
  background-color: var(--button-solid-primary-default);
}

.pf-v5-c-button.pf-m-primary:focus {
  background-color: var(--button-solid-primary-default);
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--button-solid-primary-hover);
}

.pf-v5-c-button.pf-m-primary:active,
.pf-v5-c-button.pf-m-primary.pf-m-active {
  background-color: var(--button-solid-primary-default);
}

:root.pf-v5-theme-dark .pf-v5-c-button.pf-m-secondary {
  color: var(--button-secondary-default);
}

:root.pf-v5-theme-dark .pf-v5-c-button.pf-m-secondary:focus {
  color: var(--button-secondary-default);
}

:root.pf-v5-theme-dark .pf-v5-c-button.pf-m-secondary:hover {
  color: var(--button-secondary-hover);
}

:root.pf-v5-theme-dark .pf-v5-c-button.pf-m-secondary:active {
  color: var(--button-secondary-active);
}

/* end buttons */

.pf-v5-c-button.pf-m-link:active {
  color: var(--button-primary-default);
}