a.button {
  --button--background-color: black;
  --button--text-color: white;
  --button--background-color--hover: white;
  --button--text-color--hover: black;

  /* By default the border color is the same as the background color,
     and opposite on hover */
  --button--border-color: var(--button--background-color);
  --button--border-color--hover: var(--button--text-color--hover);

  --color--link: var(--button--text-color);

  display: inline-flex;
  font-weight: 700;
  font-family: var(--font-family--roboto-flex);
  border-radius: calc(360/10 * 1rem);
  line-height: 1.1;
  text-transform: none;
  position: relative;
  top: 0;

  font-size: calc(18/10 * 1rem);
  padding: calc(10/10 * 1rem) calc(20/10 * 1rem);
  box-shadow: 0 calc(3/10 * 1rem) 1px black;

  @container (width > calc(992/10 * 1rem)) {
    font-size: calc(21/10 * 1rem);
    padding: calc(14/10 * 1rem) calc(30/10 * 1rem);
    box-shadow: 0 calc(5/10 * 1rem) 1px black;
  }

  @container (width > calc(1200/10 * 1rem)) {
    font-size: calc(24/10 * 1rem);
    padding: calc(18.062/10 * 1rem) calc(43.85/10 * 1rem);
    box-shadow: 0 calc(8.6/10 * 1rem) 1px black;
  }

  background: var(--button--background-color);
  color: var(--button--text-color) !important;
  text-decoration: none;
  border: 1px solid var(--button--border-color);

  transition: top 150ms ease, box-shadow 150ms ease;

  &:focus, &:hover {
    background: var(--button--background-color--hover);
    color: var(--button--text-color--hover) !important;
    --color--link: var(--button--text-color--hover);
    border-color: var(--button--border-color--hover);

    top: calc(3/10 * 1rem);
    box-shadow: none;

    @container (width > calc(992/10 * 1rem)) {
      top: calc(5/10 * 1rem);
    }

    @container (width > calc(1200/10 * 1rem)) {
      top: calc(8.6/10 * 1rem);
    }

    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: -10px;
      height: 10px;
      width: 100%;
      box-sizing: border-box;
    }
  }
}

a.button.button--has-arrow {
  min-width: calc(226/10 * 1rem);
  text-align: left;

  &:after {
    position: relative;
    top: calc(-1/10 * 1rem);
    content: "\E805";
    margin-left: auto;
    font-family: "fontello";
    speak: none;
    width: 1em;
    text-align: center;
  }
}

a.button--black, a.button--dark {
  --button--background-color: black;
  --button--text-color: white;
  --button--background-color--hover: white;
  --button--text-color--hover: black;
}

a.button--white {
  --button--border-color: black;
  --button--background-color: white;
  --button--text-color: black;
  --button--background-color--hover: #EAFFFB;
  --button--text-color--hover: rgba(0, 0, 0, 0.5);
  --button--border-color--hover: black;
}

a.button--gray, a.button--light {
  --button--background-color: #e0e0e0;
  --button--text-color: black;
  --button--background-color--hover: black;
  --button--text-color--hover: white;
}


a.button--aqua {
  --button--border-color: black;
  --button--background-color: var(--color--aqua);
  --button--text-color: black;
  --button--background-color--hover: #BCF3E9;
  --button--text-color--hover: rgba(0, 0, 0, 0.5);
  --button--border-color--hover: black;
}

a.button--yellow {
  --button--border-color: black;
  --button--background-color: var(--color--yellow);
  --button--text-color: black;
  --button--background-color--hover: #F5D891;
  --button--text-color--hover: rgba(0, 0, 0, 0.5);
  --button--border-color--hover: black;
}