@mixin button($size) {
  @include button-layout($size);
  @include shape-style($size);
  @include button-hover();
  font-weight: $fontweight_base;
}

@mixin button-layout($size) {
  padding: $size;
  padding-top: $size/3;
  padding-bottom: $size/3;
  margin: $size/2;
  margin-top: $size/3;
  margin-bottom: $lineheight;
  //font-size: 4.75mm;
  line-height: $lineheight;
  height: auto;
}

@mixin button-hover() {
  transition: background-color .2s, border .2s, box-shadow .2s, color .2s;

  &:hover,
  &:active {
    background-color: transparent;
  }
}

@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
  @include colorize-shape($background-color);
  outline-color: $background-color;
  color: $text-color;

  &:visited {
    @include colorize-shape($background-color);
    color: $text-color;
  }

  &,
  &:visited,
  &:not(.disabled):not(:disabled) {

    &:hover,
    &:active {
      @include colorize-shape($hover-color);
      color: lighten($text-color, 5%);
      outline-color: $hover-color;
      box-shadow: none;
    }
  }
}

@mixin button-color($background-color) {
  @include button-fullcontrol($background-color, mix($background-color, getTextColorFromBackground($background-color), 85%), getTextColorFromBackground($background-color));
  box-shadow: $narrow-shadow;
}


.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: none!important;

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

  &:hover,
  &:active {
    &::before {
      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;

    &::before {
      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!important;
  &::before {
    background-color: transparent;
  }

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

}