/* Removes inner padding and border in FF3+  - Knacss */

button::-moz-focus-inner,
input[type='button']::-moz-focus-inner,
input[type='reset']::-moz-focus-inner,
input[type='submit']::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* tous les boutons */

button,
a.button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  border: 1px solid var(--button-border);
  font-family: var(--sans-serif-input);
  padding: 3px 10px;
  line-height: normal !important;
  display: inline-block;
  font-size: 100%;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  box-shadow: 0 1px 3px var(--button-shadow);
  border-style: solid;
  border-width: 1px;
}

a.button {
  vertical-align: middle;
}

/* validation */

input[type='submit'],
button[type='submit'],
a.button.submit,
button.submit,
input.button.start {
  color: var(--submit-color);
  background-color: var(--submit-background);
  background-image: #{'linear-gradient(to bottom, var(--submit-background), var(--submit-background-alt))'};
  border-color: var(--submit-background);

  &:hover,
  &:focus {
    background-color: var(--submit-background-alt);
    background-image: #{'linear-gradient(to bottom, var(--submit-background-alt), var(--submit-background))'};
    border-color: var(--submit-background-alt);
  }
}

/* suppression, reset, "neutres" fond gris */

button,
input[type='button'],
input.button,
input[type='reset'],
input[type='submit'].reset,
input.reset,
input[type='submit'].delete,
input.delete,
a.button,
a.button.delete,
a.button.reset {
  color: var(--reset-color);
  background-color: var(--reset-background);
  background-image: #{'linear-gradient(to bottom, var(--reset-background-alt), var(--reset-background))'};
  background-repeat: repeat-x;
  border-color: var(--reset-border);

  &:hover,
  &:focus {
    background-color: var(--reset-background-ter);
    background-image: #{'linear-gradient(to bottom, var(--reset-background), var(--reset-background-ter))'};
    background-repeat: repeat-x;
    border-color: var(--reset-border);
  }
}

/* suppression */

input[type='submit'].delete,
input.delete,
button[type='submit'].delete,
button.delete,
a.button.delete {
  color: var(--delete-color);

  &:hover,
  &:focus {
    color: var(--delete-hover-color);
    background-color: var(--delete-hover-background);
    background-image: #{'linear-gradient(to bottom, var(--delete-hover-background-alt), var(--delete-hover-background))'};
    background-repeat: repeat-x;
    border-color: var(--delete-hover-border);
  }
}

#info-box a.button,
#info-box button {
  padding: 0 0.5em;
  margin-left: 2em;
}

.button.add,
button.add {
  color: var(--add-color);
  background-color: var(--add-background);
  background-image: #{'linear-gradient(to bottom, var(--add-background), var(--add-background-alt))'};
  border-color: var(--add-border);
  padding: 0.33em 1.33em 0.5em;

  &:hover,
  &:active,
  &:focus {
    background-color: var(--add-background-alt);
    background-image: #{'linear-gradient(to bottom, var(--add-background-alt), var(--add-background))'};
    border-color: var(--add-border-alt);
  }
}

.button-add:focus {
  outline: dotted 1px;
}

input[type='submit'].clone,
input.clone,
button.clone,
button[type='submit'].clone,
a.button.clone {
  color: var(--clone-color);
  background-color: var(--clone-background);
  background-image: #{'linear-gradient(to bottom, var(--clone-background-alt), var(--clone-background))'};
  border-color: var(--clone-border);

  &:hover,
  &:active,
  &:focus {
    color: var(--clone-hover-color);
    background-color: var(--clone-hover-background);
    background-image: #{'linear-gradient(to bottom, var(--clone-hover-background-alt), var(--clone-hover-background))'};
  }
}

/* paragraphe pour bouton Nouveau bidule */

p.top-add {
  text-align: right;
  margin: 0;
}

/* disabled */

input.disabled,
input[type='submit'].disabled,
button.disabled,
button[type='submit'].disabled {
  color: var(--button-disabled-color);
  background: var(--button-disabled-background);
  border: 1px solid var(--button-disabled-border);

  &:hover {
    color: var(--button-disabled-color);
    background: var(--button-disabled-background-alt);
    border: 1px solid var(--button-disabled-border);
  }
}

/* Boutons javascript (dépliage/repliage, …) */

.void-btn {
  border: none;
  border-radius: 0;
  padding: 0;
}

button.details-cmd {
  font-size: 0.9em;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 5px 0 0;
  color: currentColor;
  background: transparent;
  box-shadow: none;

  &:hover,
  &:focus {
    background: transparent;
    color: var(--input-focus);
  }
}

/* specific buttons */

// Ajax or js buttons (action do not reload current page)
.checkbox-helper,
#gototop,
.metaGetList,
.metaGetMore,
a.checkbox-helper,
a#gototop,
a.metaGetList,
a.metaGetMore {
  font-size: 0.825em;
  color: var(--ajax-color);
  background: var(--ajax-background);
  box-shadow: none;
  border: 1px solid var(--ajax-border);
  margin-bottom: 0.25em;
  text-align: center;

  &:hover {
    background: var(--ajax-background-alt);
    box-shadow: none;
    border: 1px solid var(--ajax-border);
  }
}

#gototop {
  display: none;
  z-index: 1000;
  position: fixed;
  bottom: 0;
  right: 0.5em;
  width: 10em;
  padding: 0.25em;
  border-radius: 0.25em;

  a {
    &,
    &:link,
    &:hover,
    &:active {
      color: var(--gotop-color);
      background: var(--gotop-background);
      border: var(--gotop-border);
    }
  }
}

.metaRemove,
.addMeta button:not(.metaGetMore),
.addMeta a:not(.metaGetMore) {
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--addmeta-color);
  background: var(--addmeta-background);
}

.addMeta button:not(.metaGetMore),
.addMeta a:not(.metaGetMore) {
  box-shadow: initial;
  margin-bottom: 2px;

  &:hover,
  &:focus {
    color: var(--addmeta-focus-color);
    background: var(--addmeta-focus-background);
  }
}
