.btn {
  @include shape-style($button_large);
  text-decoration: none;
  padding: $button_large/3 $button_large;
  margin: $button_large/3 $button_large/2 $lineheight;
  line-height: $lineheight;
  height: auto;

  transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
  outline-color: var(--accent-color);
  color: var(--text-color-contrast);
  background-color: var(--accent-color);

  &:visited {
    color: var(--text-color-contrast);
  }

  &:hover,
  &:active {
    background-color: var(--accent-color-hover);
    outline-color: var(--accent-color-hover);
    box-shadow: none;
  }

  font-weight: $fontweight_base;

  p &:last-child {
    margin-bottom: 0;
  }

  .fake {
    background-color: transparent !important;
    color:var(--text-color);
  }
}

.btn.disabled,
.btn:disabled {
  opacity: 0.8;
  background-color: var(--accent-color) !important;
  outline-color: var(--accent-color) !important;
  color: var(--text-color-contrast) !important;
}

.btn-small {
  padding: $button_small/3 $button_small/2;
  margin: $button_small/3 $button_small/2 $lineheight;

  &:before {
    left: -$button_small/2;
    right: -$button_small/2;
  }
}


.btn-readmore,
.btn-link {
  color: var(--link-color);

  &:visited {
    color: var(--link-color);
  }
  background-color: transparent;

  &:hover,
  &:active {
    &::before {
      background-color: var(--link-color-hover);
    }
  }

}