// // Buttons // —————————————-

.btn {

display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: $button-border-radius;
font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes
line-height: $line-height-regular; // prevent line-height inherit in other modules / scopes
padding: $button-padding;
font-weight: normal;
white-space: nowrap;
background-image: none;
text-decoration: none;
@include transition(all $transition-time-out $transition-function);

> .icon {
  margin-top: -1px;
  padding-right: $button-icon-indent;
}

> .icon-right {
  padding-left: $button-icon-indent;
  padding-right: 0;
}

&.focus,
&:focus {
  color: $font-color-regular;
  text-decoration: none;
  @include tab-focus();
}

&.hover,
&:hover {
  text-decoration: none;
  @include transition($transition-time-in, '-duration');
}

&.disabled,
&[disabled] {
  cursor: not-allowed;
  background: hsv-lighten($color-element-background, 5%, true);
  border-color: hsv-lighten($color-element-border, 14%, true);
  color: hsv-lighten($font-color-regular, 50%, true);
}

}

%btn-default, .btn-default {

@include button-variant($font-color-regular, $color-element-background, $button-border-color-default);

}

.btn-brand {

@include button-variant($color-bright, $color-brand, $button-border-color-brand);

}

.btn-positive {

@include button-variant($font-color-regular, $color-positive, $button-border-color-positive);

}

.btn-negative {

@include button-variant($color-bright, $color-negative, $button-border-color-negative);

}

.btn-clean {

@extend %btn-default;
background-color: transparent;

&,
&.focus,
&:focus,
  &.hover,
  &:hover,
  &.active,
  &:active {
  border-color: transparent;
}

}

.btn-small {

font-size: $font-size-small;
padding: $button-padding-small;

}

.btn-large {

font-size: $font-size-large;
padding: $button-padding-large;

}

.btn-icon {

padding: $button-padding-minimal;

.icon {
  padding: 0;
}

}

.btn-minimal {

padding: $bu-padding-minimal;

}

.btn-block {

width: 100%;

}

.btn-sectioned {

display: block;
@include clearfix();

> .btn,
> .pager,
> .pager + .pager {
  margin-left: -1px;
  margin-right: 0;
  float: left;
  position: relative;

  &:hover {
    z-index: 2;
  }

  &:focus,
    &:active {
    z-index: 3;
  }

  &:first-child {
    margin-left: 0;
  }

  &:not(:last-child) {
    @include border-right-radius(0);
  }

  &:not(:first-child) {
    @include border-left-radius(0);
  }
}

}