$base-size: 16;
@function size($target, $context: $base-size) {
  @return ($target / $context) * 1rem;
}

@mixin transition {
  transition: all 0.3s ease-out;
}

@mixin button {
  display: inline-block;
  padding: 8px 28px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: size(16);
  line-height: size(20);
  text-decoration: none;
  color: $font;
  border: none;
  background: $tertiary;
  border-radius: 20px;
  cursor: pointer;
  @include transition();
  &:hover {
    color: #fff;
  }
}

//@mixin btn-primary {
//  display: inline-block;
//  min-width: 250px;
//  text-align: center;
//  height: 48px;
//  font-size: size(23);
//  line-height: size(36);
//  font-weight: 500;
//  letter-spacing: 2px;
//  background: $primary;
//  border: none;
//  color: #fff;
//  text-decoration: none;
//  transition: 0.2s;
//  &:hover {
//    background: lighten($primary, 15%);
//  }
//}
//
//@mixin btn-secondary {
//  display: inline-block;
//  height: 48px;
//  padding: 0 25px;
//  font-size: size(23);
//  line-height: size(36);
//  font-weight: 500;
//  letter-spacing: 2px;
//  background: $secondary;
//  border: none;
//  color: #fff;
//  text-decoration: none;
//  transition: 0.2s;
//  &:hover {
//    background: lighten($secondary, 15%);
//  }
//}
//
//@mixin btn-light {
//  display: inline-block;
//  font-size: size(23);
//  line-height: size(36);
//  font-weight: 500;
//  letter-spacing: 2px;
//  background: #fff;
//  border: none;
//  color: $primary;
//  height: 48px;
//  transition: 0.2s;
//  &:hover {
//    background: rgba(#fff, 0.75);
//  }
//}