:root {
  --padding: 12px 20px;
  --padding-border: 9px 17px;
  --border-width: 3px;
}

button,
  /* Class button for a-tag components */
  .button {
  all: unset;
  padding: var(--padding);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  cursor: pointer;
}

/* Primary */
button.primary,
.button.primary {
  background: var(--gradient-1-background);
  background: var(--gradient-1-background-moz);
  background: var(--gradient-1-background-webkit);
  background: var(--gradient-1-background-gradient);
  filter: var(--gradient-1-background-filter);
  color: var(--foreground);
}

/* Primary states */
button.primary:not(.disabled):focus,
button.primary:not(.disabled):hover,
.button.primary:not(.disabled):focus,
.button.primary:not(.disabled):hover {
  background: var(--primary-complementary-light);
}

/* Secondary */
button.secondary,
.button.secondary {
  border: var(--border-width) solid var(--primary-complementary-light);
  color: var(--foreground);
  padding: var(--padding-border);
}

/* Secondary states */
button.secondary:not(.disabled):focus,
button.secondary:not(.disabled):hover,
.button.secondary:not(.disabled):focus,
.button.secondary:not(.disabled):hover {
  background: var(--primary-complementary-light);
}

/* neutral (black) */
button.neutral,
.button.neutral {
  background-color: var(--foreground);
  color: var(--background);
  border-bottom: 1px solid var(--foreground);
}

/* neutral inverted (white) */
button.neutral-inverted,
.button.neutral-inverted {
  background-color: var(--background);
  color: var(--foreground);
  border-bottom: 1px solid var(--background);
}

/* neutral states */
button.neutral:not(.disabled):hover,
button.neutral:not(.disabled):focus,
.button.neutral:not(.disabled):hover,
.button.neutral:not(.disabled):focus {
  background-color: var(--background);
  color: var(--foreground);
  border-bottom: 1px solid var(--foreground);
}

button.neutral-inverted:not(.disabled):hover,
button.neutral-inverted:not(.disabled):focus,
.button.neutral-inverted:not(.disabled):hover,
.button.neutral-inverted:not(.disabled):focus {
  border-bottom: 1px solid var(--foreground);
}

/* Active or visited state for all button except disabled */
button.primary:not(.disabled):active,
button.secondary:not(.disabled):active,
.button.primary:not(.disabled):active,
.button.secondary:not(.disabled):active {
  background-color: var(--foreground);
  color: var(--background);
  padding: var(--padding);
  border: none;
}

button.neutral:not(.disabled):active,
.button.neutral:not(.disabled):active,
button.neutral-inverted:not(.disabled):active,
.button.neutral-inverted:not(.disabled):active {
  background-color: var(--foreground);
  color: var(--background);
}

/* Disabled button */
button.primary.disabled,
button.neutral.disabled,
button.neutral-inverted.disabled,
.button.primary.disabled,
.button.neutral.disabled,
.button.neutral-inverted.disabled {
  color: var(--disabled);
  background: var(--gray-10);
}

button.secondary.disabled,
.button.secondary.disabled {
  color: var(--disabled);
  border: var(--border-width) solid var(--gray-10);
  padding: var(--padding-border);
}

/* Hover for disabled button */
button.primary.disabled:focus,
button.primary.disabled:hover,
button.neutral.disabled:focus,
button.neutral.disabled:hover,
button.neutral-inverted.disabled:focus,
button.neutral-inverted.disabled:hover,
.button.primary.disabled:focus,
.button.primary.disabled:hover,
.button.neutral.disabled:focus,
.button.neutral.disabled:hover,
.button.neutral-inverted.disabled:focus,
.button.neutral-inverted.disabled:hover {
  color: var(--disabled);
  background: var(--gray-10);
}

button.secondary.disabled:focus,
button.secondary.disabled:hover,
.button.secondary.disabled:focus,
.button.secondary.disabled:hover {
  color: var(--disabled);
  border: var(--border-width) solid var(--gray-10);
  padding: var(--padding-border);
}

.button-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* Same as the button component */
.searchform input[type="submit"] {
  all: unset;
  cursor: pointer;
  padding: var(--padding);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin-right: 12px;
  margin-bottom: 12px;

  background: var(--gradient-1-background);
  background: var(--gradient-1-background-moz);
  background: var(--gradient-1-background-webkit);
  background: var(--gradient-1-background-gradient);
  filter: var(--gradient-1-background-filter);
  color: var(--foreground);
}
.searchform input[type="submit"]:hover,
.searchform input[type="submit"]:focus {
  background: var(--primary-complementary-light);
  text-decoration: underline;
}
.searchform input[type="submit"]:active {
  background-color: var(--foreground);
  color: var(--background);
  text-decoration: underline;
  padding: var(--padding);
  border: none;
}