.button {
  background-color: var(--color-white);
  border-radius: 0.25em;
  box-shadow: var(--box-shadow);
  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;
  -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;
}

.button--github {
  background-image: url('/assets/images/general/icon-github.svg');
  padding-left: 2.6em;
}



@media(hover: hover) {

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

  .button:focus,
  .button:hover {
    box-shadow: var(--box-shadow-strong);
  }

  .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);
  }

}