/* 
vies si prepisat hociaku farbicku ale na zmenu farebnej schemy staci 
prepisat tieto 4 navrchu. ostatne sa preberaju z nich
*/
$btn-prm: $col-prm !default;
$btn-prm-c: $col-prm-c !default;
$btn-dark: $gray800 !default;
$btn-light: $white !default;

// button
$btn-bg: $btn-prm !default;
$btn-col: $btn-prm-c !default;
$btn-border-col: $btn-prm !default;
$btn-lh: normal !default;
$btn-fw: $fw-bold !default;

$btn-tt: uppercase !default;

$btn-hover-bg: transparent !default;
$btn-hover-col: $btn-prm !default;
$btn-hover-border-col: $btn-prm !default;
// button-outline
$btn-o-bg: transparent !default;
$btn-o-col: $btn-dark !default;
$btn-o-border-col: $btn-dark !default;

$btn-o-hover-bg: $btn-prm !default;
$btn-o-hover-col: $btn-prm-c !default;
$btn-o-hover-border-col: $btn-prm !default;

// light
$btn-l-bg: $btn-prm !default;
$btn-l-col: $btn-prm-c !default;
$btn-l-border-col: $btn-prm !default;

$btn-l-hover-bg: transparent !default;
$btn-l-hover-col: $btn-light !default;
$btn-l-hover-border-col: $btn-light !default;
// light outline
$btn-l-o-bg: transparent !default;
$btn-l-o-col: $btn-light !default;
$btn-l-o-border-col: $btn-light !default;

$btn-l-o-hover-bg: $btn-prm !default;
$btn-l-o-hover-col: $btn-prm-c !default;
$btn-l-o-hover-border-col: $btn-prm !default;

// link
$link-col: $col-prm !default;
$link-hover-col: $col-prm-d !default;
$link-fw: $fw-bold !default;

// sizes

@mixin button {
  background: $btn-bg;
  color: $btn-col;
  border-color: $btn-border-col;
  padding: $btn-pd;
  border-radius: $btn-br;
  border-width: $btn-bw;
  font-weight: $btn-fw;
  transition: $trans;
  font-size: $btn-fs;
  line-height: $btn-lh;
  border-style: solid;
  display: inline-block;
  text-decoration: none;
  text-transform: $btn-tt;
  cursor: pointer;
  @include bp("md") {
    padding: $btn-pd-mobile;
  }
  &.light {
    background: $btn-l-bg;
    color: $btn-l-col;
    border-color: $btn-l-border-col;
  }
  &:hover,
  &:focus {
    background: $btn-hover-bg;
    color: $btn-hover-col;
    border-color: $btn-hover-border-col;
    transition: $trans-h;
    text-decoration: none;
    &.light {
      background: $btn-l-hover-bg;
      color: $btn-l-hover-col;
      border-color: $btn-l-hover-border-col;
    }
  }
}

@mixin button-outline-light {
  background: $btn-l-o-bg;
  color: $btn-l-o-col;
  border-color: $btn-l-o-border-col;

  &:hover,
  &:focus {
    background: $btn-l-o-hover-bg;
    color: $btn-l-o-hover-col;
    border-color: $btn-l-o-hover-border-col;
  }
}
@mixin button-outline {
  @include button;
  background: $btn-o-bg;
  color: $btn-o-col;
  border-color: $btn-o-border-col;
  &.light {
    @include button-outline-light;
  }
  &:hover,
  &:focus {
    background: $btn-o-hover-bg;
    color: $btn-o-hover-col;
    border-color: $btn-o-hover-border-col;
  }
}

@mixin button-sm {
  padding: 0.5em 1.5em;
  font-weight: $fw-semi;
  border-color: $gray200;
}

@mixin link-light {
  color: $col-prm-c;
  &:hover,
  &:focus {
    color: $col-prm-l-c;
  }
}

@mixin link-hover {
  transition: $trans-h;
  color: $link-hover-col;
  text-decoration: underline;
  background-color: transparent;
}

@mixin link {
  color: $link-col;
  text-transform: $btn-tt;
  font-size: $btn-fs;
  font-weight: $link-fw;
  transition: $trans;
  text-decoration: none;
  background-color: transparent;
  &:hover,
  &:focus {
    @include link-hover;
  }
  &.inverse-link {
    @include link-light;
  }
}
