onedevstudio/starter-kit

@import '../../styles/vars';

.button {
  border: 0.125rem solid transparent;
  border-radius: 0.1875rem /* 3/16 */;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem /* 16/16 */;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.375rem;
  margin: 0.625rem /* 10/16 */;
  padding: 0 0.75rem /* 12/16 */;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.1s ease-in-out,
    border-color 0.1s ease-in-out,
    color 0.1s ease-in-out,
    box-shadow 0.1s ease-in-out,
    transform 0.1s ease-in-out;
  white-space: nowrap;

  span,
  svg {
    display: inline-block;
    margin: 0 0.3125rem /* 5/16 */;
    vertical-align: middle;
  }

  &:focus,
  &:active,
  &:hover {
    background-color: darken($primaryColor, 20%);
    border-color: darken($primaryColor, 20%);
    color: #fff;
  }
}

.primary {
  background-color: darken($primaryColor, 10%);
  border-color: darken($primaryColor, 10%);
}

.secondary {
  background-color: transparent;
  border-color: darken($primaryColor, 15%);
}