@import '../../mixins';

@mixin button-base {
  display: inline-block;
  min-width: $button-min-width;
  padding: $button-padding;
  font-size: $button-font-size;
  line-height: $button-line-height;
  font-family: $button-font-family;
  font-weight: $button-font-weight;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 0;
  border-radius: $button-border-radius;
  outline: 0;
  transition: all 200ms ease-out;
  overflow: hidden;
  text-decoration: none;
  box-shadow: $button-box-shadow, inset 0px 0px 0px 2px transparent;
  &:focus {
    outline: 0;
  }
}

@mixin button-style($bg, $color: #fff) {
  $dark-color: darken($bg, 8%);
  $light-color: lighten($bg, 6%);
  background: $bg;
  color: $color;
  &:hover {
    color: $color;
    text-decoration: none;
    background-color: $light-color;
    text-decoration: none;
  }
  &:active,
  &.Button--active,
  &.is-active {
    background-color: $dark-color;
  }
  &:focus {
    box-shadow: $button-box-shadow, inset 0px 0px 0px 2px $dark-color;
  }
}

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

@mixin button-sizes(){
  $sizes: $button-sizes;
   @each $i, $attribute in $sizes {
    &--#{$i} {
      font-size: #{map-deep-get($sizes,$i,font-size)};
      padding: #{map-deep-get($sizes,$i,padding)};
      min-width: #{map-deep-get($sizes,$i,min-width)};
    }
  }

}

@mixin button-style-outline($outline-color, $color-hover: #fff) {
  $dark-color: darken($outline-color, 8%);
  $light-color: lighten($outline-color, 6%);
  background: transparent;
  color: $outline-color;
  box-shadow: inset 0px 0px 0px 1px $outline-color;
  &:hover {
    color: $color-hover;
    background-color: $light-color;
    box-shadow: none;
    text-decoration: none;
  }
  &:active,
  &:visited {
    background-color: $dark-color;
  }
  &:focus {
    box-shadow: inset 0px 0px 0px 2px $dark-color;
  }
}