/* ========================================================= */
/* Buttons
/* ========================================================= */

.button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans-serif);
  font-size: var(--fs3);
  font-weight: 400;
  line-height: var(--lh-single);
  padding: var(--s2) var(--s3);
  transition: all 0.3s ease-out;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  display: inline-block;
  text-decoration: none;
}
.button.small {
  font-size: var(--fs1);
}
.button.tiny {
  font-size: var(--fs0);
  padding: var(--s1) var(--s2);
}

.button.buttonRed {
  background-color: var(--red1);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.button.buttonRed:hover { background-color: var(--red2); }

.button.buttonGreige {
  background-color: var(--greige5);
  color: var(--black);
}
.button.buttonGreige:hover {
  background-color: var(--greige6);
}

.button.buttonWhite {
  background-color: var(--white);
  color: var(--black);
}
.button.buttonWhite:hover {
  background-color: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.button.buttonRound {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--gray5);
  padding: 0;
}
.button.buttonRound:hover { background-color: var(--greige2); color: var(--black); }

.button.invisibleButton {
  background-color: transparent;
  color: var(--black);
}
.button.invisibleButton:hover {
  background-color: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.button.buttonSidebar {
  width: 100%;
  height: 3.25rem;
}
@media (min-width: 48em) {
  .button.buttonSidebar {
    width: auto;
    height: auto;
  }
}

button[disabled], .button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}