button,
.paper-btn,
[type='button'] {
  @include border-style();
  @include shadow();
  @include transition();
  @include color('color', 'primary');
  @include color('border-color', 'primary');
  @include color('background-color', 'main-background');
  align-self: center;
  background-image: none;
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  outline: none;
  padding: 0.75rem;

  @include resp(520px) {
    display: inline-block;
    margin: 0 auto;
    margin-bottom: 1rem;
    text-align: center;
  }

  &.btn-large {
    @include shadow(large);
    font-size: 2rem;
    padding: 1rem;
  }

  &.btn-small {
    @include shadow(small);
    font-size: 0.75rem;
    padding: 0.5rem;
  }

  &.btn-block {
    display: block;
    width: 100%;
  }

  &:hover {
    @include shadow(hover);
  }

  &:focus {
    @include color('border-color', 'secondary');
    border-style: solid;
    border-width: 2px;
    box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
  }

  &:active {
    border-color: hsla(0, 0%, 0%, 0.2);
    transition: none;
  }

  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

a {
  @include color('color', 'secondary');
  background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
  background-position: 0 90%;
  background-repeat: repeat-x;
  background-size: 4px 3px;
  text-decoration: none;

  &:visited {
    @include color('color', 'primary');
    text-decoration: none;
  }
}

@each $colorName, $color, $color-light, $color-text in $colors {
  button.btn-#{$colorName},
  .paper-btn.btn-#{$colorName},
  [type='button'].btn-#{$colorName} {
    @include color('color', #{$colorName}-text);
    @include color('background-color', #{$colorName}-light);
    @include color('border-color', #{$colorName});

    &:hover {
      &:active {
        background-color: darken($color-light, 10%);
      }
    }
  }
}

@each $colorName, $color, $color-light, $color-text in $colors {
  button.btn-#{$colorName}-outline,
  .paper-btn.btn-#{$colorName}-outline,
  [type='button'].btn-#{$colorName}-outline {
    @include color('background-color', main-background);
    @include color('color', #{$colorName});
    @include color('border-color', #{$colorName});

    &:hover {
      background-color: $color-light;
    }

    &:hover {
      &:active {
        background-color: darken($color-light, 10%);
      }
    }
  }
}