/*------------------------------------------------------------------------------*/
/* Button
/*------------------------------------------------------------------------------*/
button,
[type=button],
.Button {
  --button-height: var(--input-height);
  --border-color: var(--input-border-color);
  align-items: center;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  box-shadow: var(--box-shadow);
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: var(--button-height);
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  transition-duration: var(--transition-fast);
}

button:hover,
[type=button]:hover,
.Button:hover {
  --background-color: var(--background-color-shade-1);
  color: var(--color-text);
}

button:active,
[type=button]:active,
.Button:active {
  --background-color: var(--background-color-shade-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

[class|=Button]:focus-visible {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

/*------------------------------------------------------------------------------*/
/* Button Flex
/*------------------------------------------------------------------------------*/
.Button-Flex {
  display: flex;
}

/*------------------------------------------------------------------------------*/
/* Button Primary
/*------------------------------------------------------------------------------*/
.Button-Primary,
.FormSubmit button,
button[type=submit] {
  --background-color: var(--color-accent);
  --border-color: var(--color-accent);
  border: 0;
  color: var(--color-text-on-accent);
  font-weight: var(--font-heading-weight);
  text-transform: var(--font-heading-transform);
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.Button-Primary:hover,
.FormSubmit button:hover,
button[type=submit]:hover {
  --background-color: var(--color-accent-darker);
  --border-color: var(--color-accent-darker);
  color: var(--color-text-on-accent);
}

/*------------------------------------------------------------------------------*/
/* Button Block
/*------------------------------------------------------------------------------*/
.Button-Block {
  width: min(100%, 500px);
}

/*------------------------------------------------------------------------------*/
/* Button Big
/*------------------------------------------------------------------------------*/
.Button-Big,
.BuyForm .AddToCart,
.ProductAddToCart .AddToCart {
  --button-height: 3rem;
  padding: 0.5rem 1.5rem;
}

/*------------------------------------------------------------------------------*/
/* Button Small
/*------------------------------------------------------------------------------*/
.Button-Small {
  --button-height: 2rem;
  padding: 0.2rem 1rem;
}

/*------------------------------------------------------------------------------*/
/* Button Light
/*------------------------------------------------------------------------------*/
.Button-Light {
  --background-color: var(--color-white);
  --border-color: var(--color-white);
  --color-text: var(--color-black);
}

.Button-Light:hover,
.Button-Light:active {
  --background-color: var(--color-white-darker);
  --color-text: var(--color-black);
}

/*------------------------------------------------------------------------------*/
/* Button Dark
/*------------------------------------------------------------------------------*/
.Button-Dark {
  --background-color: var(--color-black);
  --border-color: var(--color-black);
  --color-text: var(--color-white);
}

.Button-Dark:hover,
.Button-Dark:active {
  --background-color: var(--color-black-lighter);
  --color-text: var(--color-white);
}

.Accent {
  background-color: var(--cl-d) !important;
  color: var(--color-white);
  font-weight: 700;
}

.LoadMoreButton {
  width: 100%;
}

/*# sourceMappingURL=button.css.map */