// // Buttons // —————————————- .dark {

.btn {

  &.hover,
  &:hover {
    text-decoration: none;
  }

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

%btn-default,
.btn-default {
  @include button-variant($font-color-regular, $color-element-background, $color-element-border);
}

.btn-brand {
  @include button-variant($color-bright, $color-brand, $button-border-color-brand, #f4067d, #f4c8df, #ff0683, #ffd0e8);

  &.disabled,
  &[disabled] {
    &,
    &.focus,
    &:focus,
      &.hover,
      &:hover {
      color: $color-bright;
      background: $color-brand;
      border-color: $button-border-color-brand;
      opacity: .3;
    }
  }
}

.btn-positive {
  @include button-variant($color-bright, $color-positive, $button-border-color-positive);
}

.btn-negative {
  @include button-variant($color-bright, $color-negative, $button-border-color-negative);
}

.btn-clean {
  @extend %btn-default;
  color: $color-bright;
  background-color: transparent;

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

  &.hover,
  &:hover {
    background: hsv-lighten($color-element-background, 0%, true);
  }

  &.active,
  &:active {
    background: hsv-lighten($color-element-background, 15%, true);
  }

  &.focus,
  &:focus {
    background: hsv-lighten($color-element-background, 21%, true);
  }

}

}