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

.Button {
  @include button-base;
  @include button-sizes;
}

.Button,
.Button--default {
  @include button-style($color-white, $color-brand-primary);
  border: $button-border;
  box-shadow: $button-box-shadow; 
  &:hover {
    background-color: rgba(224,224,227,0.4);
    border-color: darken($button-border-color, 5%);
  }
  &:focus{
    box-shadow: $button-box-shadow; 
  }
  &:active{
    background-color: rgba(224,224,227,0.8);
  }
}

@each $style in map-keys($button-styles) {
  .Button--#{$style} {
    @include button-style(map-get($button-styles, $style));
    border-color: map-get($button-styles, $style);
    &:hover {
      border-color: darken(map-get($button-styles, $style), 2%);
    }
  }
}

.Button--outline {
  @include button-style-outline($button-outline-color);
}

.Button--outlineWhite {
  @include button-style-outline($color-white, $color-brand-primary);
}

@each $style in map-keys($button-styles) {
  .Button--outline#{capitalize($style)} {
    $current: map-get($button-styles, $style);
    @include button-style-outline($current);
  }
}

.Button--block {
  display: block;
  width: 100%;
}

.Button--disabled,
.Button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  border: $button-border;
  border-radius: 3px;
  background-color: transparent;
  box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.05), 0 2px 4px 0 rgba(0,0,0,0.05);
}

.Button--primary.Button--disabled, .Button--primary:disabled {
  background-color: $button-primary-disabled-background;
  color: $color-white;
  border-color: transparent;
}

.Button--primary:hover {
  background-color: $button-primary-hover-background;
}

.Button--secondary:hover {
  background-color: $button-secondary-hover-background;
}

.Button--withIcon {
  position: relative;
  padding: $button-padding-vertical $button-padding-horizontal;
  box-shadow: $button-box-shadow, inset 0px 0px 0px 2px transparentize($color-brand-primary, 1);
  &:focus {
    box-shadow: $button-box-shadow, inset 0px 0px 0px 2px $color-brand-primary;
  }
}

.Button-icon {
  position: absolute;
  left: $button-padding-horizontal;
  transform: translateY(-50%);
  top: 50%;
  display: inline-block;
  margin-right: $spacer;
  fill: currentColor;
  max-width: $button-icon-max-width;
  user-select: none;
}

.Button-text {
  display: block;
  padding-left: $button-icon-max-width;
}