/**
 * Button styles.
 */
:root {
  --button-background-color: initial;
  --button-background-color--active: initial;
  --button-background-color--hover: initial;
  --button-background-color--focus: initial;
  --button-background-color--disabled: initial;
  --button-border--color: initial;
  --button-border--color-disabled: var(--button-border--color);
  --button-border--style: solid;
  --button-border--width: 0;
  --button-border-radius: var(--radius-xxs);
  --button-color: initial;
  --button-color--disabled: var(--color-disabled);
  --button-color--hover: initial;
  --button-font-size: var(--font-size-base);
  --button-font-weight: 500;
  --button-line-height: var(--form-control-line-height, 1.5);
  --button-padding--x: var(--spacing-lg);
  --button-padding--y: var(--spacing-sm);
  --button-box-shadow: var(--shadow-xs);
}

.button {
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  color: #413A36;
  border: var(--button-border);
  border-radius: none;
  background-color: #dcc5b7;
  box-shadow: var(--button-box-shadow);
  --button-border: var(--button-border--width) var(--button-border--style) var(--button-border--color);
  --button-padding: var(--button-padding--y) var(--button-padding--x);
}

.button:active {
  --button-background-color: var(--button-background-color--active);
}

.button:hover {
  background-color: #d1bbaf;
  --button-color: var(--button-color--hover);
}

.button:focus {
  --button-background-color: var(--button-background-color--focus);
  --button-box-shadow: var(--focus-box-shadow);
}

.button:disabled {
  cursor: not-allowed;
  --button-background-color: var(--button-background-color--disabled);
  --button-border--color: var(--button-border--color-disabled);
  --button-color: var(--button-color--disabled);
  --button-box-shadow: none;
}

/**
 * Button size variations.
 */
.button--small {
  --button-font-size: var(--font-size-sm);
  --button-padding--x: var(--spacing-sm);
  --button-padding--y: var(--spacing-xs);
}

.button--extra-small {
  --button-font-size: var(--font-size-sm);
  --button-padding--x: var(--spacing-xs);
  --button-padding--y: var(--spacing-xxs);
}

/**
 * Button coloration variations.
 */
.button--primary {
  --button-background-color: var(--color-primary);
  --button-background-color--active: var(--color-primary-dark);
  --button-background-color--hover: var(--color-primary-dark);
  --button-background-color--focus: var(--color-primary-dark);
  --button-color: var(--color-on-primary);
  --button-color--hover: var(--color-on-primary);
}

.button--secondary {
  --button-background-color: var(--color-secondary);
  --button-background-color--active: var(--color-secondary-dark);
  --button-background-color--hover: var(--color-secondary-dark);
  --button-background-color--focus: var(--color-secondary-dark);
  --button-color: var(--color-on-secondary);
  --button-color--hover: var(--color-on-secondary);
}

.button--danger {
  --button-background-color: var(--color-error);
  --button-background-color--active: var(--color-error-dark);
  --button-background-color--focus: var(--color-error-dark);
  --button-background-color--hover: var(--color-error-dark);
  --button-color: var(--color-on-error);
  --button-color--hover: var(--color-on-error);
}