.button {
  background-color: var(--color-white);
  border-radius: 0.25em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05)
  ;
  color: var(--color-black);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  line-height: 1.4em;
  padding: 0.5625em 0.95em 0.65em 0.95em;
  text-decoration: none;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}



.button--icon {
  background-position: 0.75em center;
  background-repeat: no-repeat;
  background-size: 1.4em auto;
  padding-left: 2.4em;
}

.button--basecamp {
  background-image: url('/assets/images/general/icon-basecamp.svg');
}

.button--ios {
  background-image: url('/assets/images/general/icon-apple.svg');
}

.button--android {
  background-image: url('/assets/images/general/icon-android.svg');
}

.button--pwa {
  padding-left: 4em;
  background-image: url('/assets/images/general/icon-apple.svg'), url('/assets/images/general/icon-windows.svg');
  background-position: 0.75em center, 2.25em center;
}

.button--green {
  background: var(--color-green);
  box-shadow: none;
  color: var(--color-white);
  font-weight: 500;
}



@media(hover: hover) {

  .button {
    transition: box-shadow var(--transition);
  }

  .button:focus,
  .button:hover {
    box-shadow:
      0 0 0 1px rgba(var(--rgb-black), 0.85),
      0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05)
    ;
  }

  .button--green {
    transition:
      background var(--transition),
      box-shadow var(--transition)
    ;
  }

  .button--green:focus,
  .button--green:hover {
    background: var(--color-green-dark);
    box-shadow: none;
    color: var(--color-white);
  }

}