:root {
  --button-small-padding-vertical: .75em;
  --button-small-padding-horizontal: 1.25em;
  --button-small-font-size: 0.875em;

  --button-medium-padding-vertical: clamp(.75em, 1.5vw, 1em);
  --button-medium-padding-horizontal: clamp(1.25em, 1.5vw, 1.5rem);
  --button-medium-font-size: clamp(1em, 1.5vw, 1.125em);

  --button-large-padding-vertical: 1.5rem;
  --button-large-padding-horizontal: 2rem;
  --button-large-font-size: 1.375em;
  --button-large-font-weight: 600;
}

.flex-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--menuGap, 1em);
}

.flex-links > * {
  flex: 1;
}
.flex-links > * > * {
  height: 100%;
}

/* Overcome some other styles - @todo: better fix? */
.flex-links:is(ul, ol, .block ul, .block ol) {
  margin: 0;
}

.btn,
a.btn,
.form-submit,
.button-link,
.button-links {
  --_btn-color: var(--btn-color, currentColor);
  --_btn-border-color: var(--btn-border-color, currentColor);
  --_btn-border-width: var(--btn-border-width, 1px);
  /*--_btn-color-bg: var(--btn-color-bg, transparent);*/
  --_btn-color-bg: var(--btn-color-bg, var(--color-light));
  --_btn-radius: var(--btn-radius, 0);

  --_btn-hover-color: var(--btn-hover-color, var(--color-light));
  --_btn-hover-color-bg: var(--btn-hover-color-bg, var(--color-dark));

  --_btn-padding-vertical: var(--btn-padding-vertical, 0.75em);
  --_btn-padding-horizontal: var(--btn-padding-horizontal, 1.5em);
  --_btn-padding: var(--_btn-padding-vertical) var(--_btn-padding-horizontal);

  --icon-size: var(--btn-icon-size, 1.2em);

  --_btn-font-size: var(--btn-font-size, 1em);
  --_btn-font-weight: var(--btn-font-weight, normal);

  --_btn-box-shadow: var(--btn-box-shadow, none);
  --_btn-text-shadow: var(--btn-text-shadow, none);
}

.btn,
a.btn,
.form-submit,
.button-link,
.button-links > a,
.button-links > li > a {
  cursor: pointer;
  background: var(--_btn-color-bg);
  text-decoration: none;
  border: var(--_btn-border-width) solid var(--_btn-border-color);
  border-radius: var(--_btn-radius);
  padding: var(--_btn-padding);
  font-size: var(--_btn-font-size);
  font-weight: var(--_btn-font-weight);

  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--btn-gap, 1em);
  color: var(--_btn-color);

  box-shadow: var(--_btn-box-shadow);
  text-shadow: var(--_btn-text-shadow);

  /* Allow input buttons to word wrap */
  white-space: unset;
  font-family: inherit;

  text-transform: capitalize;
}

.btn.btn-inline-block,
.form-submit,
.button-link {
  display: inline-flex;
}

.btn.blue-border {
  --btn-border-color: var(--color-accent);
  --btn-hover-color-bg: var(--color-accent);
}
.btn.blue-border:hover {
  --btn-box-shadow: inset 0 0 8px -1px rgba(0, 0, 0, .3);
}


.form-submit.cta,
.button-link.cta {
  --btn-color-bg: var(--brandGradientColorful);
  --btn-hover-color-bg: var(--brandGradientColorful);
  background-size: 200%;
  transition: background-position .25s ease-in-out;

  --btn-font-size: var(--button-large-font-size);
  --btn-padding-horizontal: var(--button-large-padding-horizontal);
  --btn-padding-vertical: var(--button-large-padding-vertical);
  --btn-font-weight: var(--button-large-font-weight);

  --btn-color: var(--color-light);
  --btn-hover-color: var(--color-light);

  min-width: var(--btn-min-width, min(15em, 100%));
}
.form-submit.cta.submitting,
.form-submit.cta:not(:disabled):hover,
.button-link.cta:not(:disabled):hover {
  --btn-box-shadow: inset 0 0 8px -1px rgba(0,0,0,.3);
  background-size: 200% !important;
  background-position: 100% !important;
}

a.btn.btn-small-padding,
.form-submit.btns-small-padding,
.button-link.btn-small-padding,
.button-links.btns-small-padding {
  --btn-padding-vertical: var(--button-small-padding-vertical);
  --btn-padding-horizontal: var(--button-small-padding-horizontal);
}


a.btn.btn-small,
.form-submit.btns-small,
.button-link.btn-small,
.button-links.btns-small {
  --btn-font-size: var(--button-small-font-size);
  --btn-padding-vertical: var(--button-small-padding-vertical);
  --btn-padding-horizontal: var(--button-small-padding-horizontal);
}

a.btn.btn-medium,
.form-submit.btn-medium,
.button-link.btn-medium,
.button-links.btn-medium {
  --btn-font-size: var(--button-medium-font-size);
  --btn-padding-vertical: var(--button-medium-padding-vertical);
  --btn-padding-horizontal: var(--button-medium-padding-horizontal);
}

.form-submit.btn-large,
.button-link.btn-large,
.button-links.btn-large {
  --btn-font-size: var(--button-large-font-size);
  --btn-padding-vertical: var(--button-large-padding-vertical);
  --btn-padding-horizontal: var(--button-large-padding-horizontal);
  --btn-font-weight: var(--button-large-font-weight);
}


.btn:not(:disabled):hover,
a.btn:not(:disabled):hover,
.form-submit:not(:disabled):hover,
.button-link:not(:disabled):hover,
.button-links > a:not(:disabled):hover,
.button-links > a:not(:disabled):active,
.button-links > li > a:not(:disabled):hover,
.button-links > li > a:not(:disabled):active {

  color: var(--_btn-hover-color, currentColor);
  border-color: var(--btn-hover-color-border, currentColor);
  background: var(--_btn-hover-color-bg, inherit);

  cursor: pointer;
}

.button-link.gradiant-border:not(:disabled):hover,
.button-links .gradiant-border:not(:disabled):hover,
input.gradiant-border:not(:disabled):hover,
button.gradiant-border:not(:disabled):hover,
a.btn.gradiant-border:not(:disabled):hover,
.form-submit.gradiant-border:not(:disabled):hover {
  --color-bg: transparent;
  --btn-color: var(--color-light);
  --btn-text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
  --btn-box-shadow: inset 0 0 8px -1px rgba(0, 0, 0, .3);
}

.btn:not(:disabled):active,
a.btn:not(:disabled):active,
.form-submit:not(:disabled):active,
.button-link:not(:disabled):active,
.button-links > a:not(:disabled):active,
.button-links > li > a:not(:disabled):active {
  outline: 5px solid rgb(203 203 203 / 60%);
  outline-offset: -4px;

  top: 1px;
  position: relative;
}


.btn:disabled,
a.btn:disabled,
.form-submit:disabled:not(.submitting),
.button-link:disabled,
.button-links > a:disabled,
.button-links > li > a:disabled {
  opacity: .5;
  cursor: not-allowed;
}


.button-link .link-title,
.button-links > a .link-title,
.button-links > li > a .link-title {
  flex-grow: 1;
}

.button-link .sub-title,
.button-links .sub-title {
  display: block;
}

.button-links i,
.button-links > a i,
.button-links > li > a i {
  order: var(--icon-order, 0);
}




/* Styles for Ubercart throbbers inside buttons - Only used on cart page atm. See forall_cart_submit_once.js */
button.form-submit {
  justify-content: center;
  position: relative;
}
button.submitting:disabled:before {
  content: '';
  position: absolute;
  background-color: #fff;
  opacity: .5;
  cursor: not-allowed;
  inset: 0;
}
button .ubercart-throbber {
  --throbber-size: 1.45rem;
  --throbber-border-width: 2px;
  transform: scale(2);
  flex-shrink: 0;
}
button.submitting .ubercart-throbber {
  cursor: not-allowed;
}
button.submitting .button-title {
  flex-grow: 1;
}