:root {
  --polly-button-base-bg-colour: var(--polly-font-colour--accent);
  --polly-button-base-decoration: none;
  /* button basics */
  --polly-button-display: inline-flex;
  --polly-button-border-width: var(--polly-border-width--sm);
  --polly-button-border-radius: var(--polly-border-radius--sm);
  --polly-button-font-size: var(--polly-font-size--sm);
  --polly-button-font-size--sm: var(--polly-font-size--sm);
  --polly-button-font-weight: var(--polly-font-weight--regular);
  --polly-button-padding--sm: 8px 12px;

  /* primary button */
  --polly-button-primary-colour: var(--polly-success--500);
  --polly-button-primary-colour--hover: var(--polly-font-colour--accent);
  --polly-button-primary-bg-colour: var(--polly-button-base-bg-colour);
  --polly-button-primary-bg-colour--hover: var(--polly-success--500);
  --polly-button-primary-border-width: 1px;
  --polly-button-primary-border-radius: var(--polly-border-radius--sm);
  --polly-button-primary-border-colour: var(--polly-success--500);
  --polly-button-primary-border-colour--hover: var(--polly-success--600);

  /* default (secondary) button */
  --polly-button-default-colour: var(--polly-brand--200);
  --polly-button-default-colour--hover: var(--polly-font-colour--white);
  --polly-button-default-bg-colour: var(--polly-button-base-bg-colour);
  --polly-button-default-bg-colour--hover: var(--polly-brand--300);
  --polly-button-default-border-width: 1px;
  --polly-button-default-border-radius: var(--polly-border-radius--sm);
  --polly-button-default-border-colour: var(--polly-brand--200);
  --polly-button-default-border-colour--hover: var(--polly-brand--300);

  /* button colours */
  --polly-button-colour: var(--polly-font-colour--white);
  --polly-button-colour--dark: var(--polly-font-colour--dark);

  --polly-button-line-colour: var(--polly-font-colour--dark);
  --polly-button-line-colour--hover: var(--polly-font-colour--dark);
  --polly-button-line-bg-colour: var(--polly-button-base-bg-colour);
  --polly-button-line-bg-colour--hover: var(--polly-grey--200);
  --polly-button-line-border-colour: var(--polly-grey--200);
  --polly-button-line-border-colour--hover: var(--polly-grey--300);

 /* modal buttons */
 --polly-button-modal-primary-colour: var(--polly-success--500);
 --polly-button-modal-primary-colour--hover: var(--polly-success--600);

 --polly-button-modal-secondary-colour: var(--polly-button-base-bg-colour);
 --polly-button-modal-secondary-colour--hover: var(--polly-grey--300);

 /* button icon */
 --polly-button-icon-display: inline-flex;

 /* button line heights */
 --polly-button-line-height: var(--polly-line-height--md);
 --polly-button-line-height--lg: var(--polly-line-height--lg);
 --polly-button-line-height--xl: 2;

}

/* #region Buttons */
.btn {
  display: var(--polly-button-display);
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px; 

  border-radius: var(--polly-button-border-radius);
  border: var(--polly-button-border-width) solid var(--polly-button-line-colour--hover);
  background: var(--polly-button-background-colour);

  color: var(--polly-button-colour--dark);
  font-family: var(--polly-font-family);
  font-size: var(--polly-button-font-size);
  font-style: normal;
  font-weight: var(--polly-button-font-weight);
  line-height: var(--polly-button-line-height);
  cursor: pointer;
  text-decoration: var(--polly-button-base-decoration);

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  text-shadow: none;
  box-shadow: none;
}

.btn:hover {
  border-radius: var(--polly-button-border-radius);
  background: var(--polly-button-line-colour--hover);
  text-decoration: var(--polly-button-base-decoration);
}
/* #endregion */

/* #region Button Styles*/
.btn-success {
  color: var(--polly-button-primary-colour);
  background: var(--polly-button-primary-bg-colour);
  border: var(--polly-button-primary-border-width) solid var(--polly-button-primary-border-colour);
  border-radius: var(--polly-button-border-radius);
}

.btn-success:hover {
  color: var(--polly-button-primary-colour--hover);
  background: var(--polly-button-primary-bg-colour--hover);
  border: var(--polly-button-primary-border-width) solid var(--polly-button-primary-border-colour--hover);
  border-radius: var(--polly-button-border-radius);
}

.btn-default {
  color: var(--polly-button-default-colour);
  background-color: var(--polly-button-default-bg-colour);

  border-width: var(--polly-button-default-border-width);
  border-radius: var(--polly-button-default-border-radius);
  border-color: var(--polly-button-default-border-colour);

  color: var(--polly-button-default-colour);
  font-family: var(--polly-font-family);
  font-size: var(--polly-button-font-size);
  font-style: normal;
  font-weight: var(--polly-button-font-weight);
  text-decoration: var(--polly-button-base-decoration);
}

.btn-default:hover {
  color: var(--polly-button-default-colour--hover);
  border-color: var(--polly-button-default-border-colour--hover);
  background: var(--polly-button-default-bg-colour--hover);
  text-decoration: var(--polly-button-base-decoration);
}

.btn-sm {
  padding: var(--polly-button-padding--sm);
  font-size: var(--polly-button-font-size--sm);
}

.btn--md {
  padding: 10px 14px;
}

.btn--lg {
  padding: 10px 16px;
  font-family: var(--polly-font-family);
  font-size: var(--polly-font-size--md);
  font-style: normal;
  font-weight: var(--polly-button-font-weight);
  line-height: var(--polly-button-line-height--lg);
}

.btn--xl {
  padding: 12px 18px;
  font-family: var(--polly-font-family);
  font-size: var(--polly-font-size--md);
  font-style: normal;
  font-weight: var(--polly-button-font-weight);
  line-height: var(--polly-button-line-height--lg);
}

.btn--2xl {
  padding: 16px 22px;
  font-family: var(--polly-font-family);
  font-size: var(--polly-font-size--lg);
  font-style: normal;
  font-weight: var(--polly-button-font-weight);
  line-height: var(--polly-button-line-height--xl);
}


.polly-modal-content .btn-sm.btn-success--primary {
  color: var(--polly-button-colour);
  background-color: var(--polly-button-modal-primary-colour);
}

.polly-modal-content .btn-sm.btn-success {
  color: var(--polly-button-colour);
  background-color: var(--polly-button-modal-primary-colour);
}

.polly-modal-content .btn-sm.btn-success:hover {
  background-color: var(--polly-button-modal-primary-colour--hover);
}

.polly-modal-content .btn-sm {
  color: var(--polly-button-colour--dark);
  background-color: var(--polly-button-modal-secondary-colour);
  border: 0px;
}
.polly-modal-content .btn-sm:hover {
  background-color: var(--polly-button-modal-secondary-colour--hover);
  border: 0px;
}

.polly-modal-content .btn-success--primary:hover {
  background-color: var(--polly-button-modal-primary-colour--hover);
}

i.btn-icon {
  display: var(--polly-button-icon-display);
}

.btn[disabled],
.btn[disabled]:hover,
.btn-success[disabled],
.btn-success.disabled,
.btn-success[disabled]:hover {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
  box-shadow: none;
}

/* #endregion */