// text color indicates state, background indicates interaction
// on how to transition background images:
// http://codersblock.com/blog/gradient-animation-trick/

.btn-mixin (@bg, @fg) {

  @bg-level1: @bg;
  @bg-level2: lighten(@bg, 12%);

  color: @fg;
  background-color: transparent;
  background-image: linear-gradient(
    mix(#00D4FF, @bg-level1 , 3%) 0%,
    darken(@bg-level1, 6%) 50%,
    darken(@bg-level1, 12%) 100%);
  background-size: auto 400%;
  background-position: 0 50%;

  border-radius: @component-border-radius;
  box-sizing: border-box;
  border: 1px solid @stroke;
  transition: all .2s .1s;
  height: ~"calc("@component-line-height ~"+ 4px)";
  line-height: ~"calc("@component-line-height ~"- 4px)";

  &.btn-xs {
    padding: 0 @space;
    line-height: @scale-b-l * 1rem;
  }
  &.btn-sm {
    padding: 0 @space;
    line-height: @scale-b-xl * 1rem;
  }
  &.btn-lg {
    padding: 0 @space;
    line-height: pow(@scale-b, 4) * 1rem;
  }

  &:focus,
  &:hover,
  &:active {
    color: @fg;
    border: 1px solid @stroke;
  }
  &:not([disabled]):focus,
  &:not([disabled]):hover {
    background-position: 0 0;
    transition: all .1s;
  }
  &:not([disabled]):active {
    color: @fg;
    background-image: linear-gradient(
      mix(#00D4FF, @bg-level1 , 3%) 0%,
      darken(@bg-level1, 6%) 50%,
      darken(@bg-level1, 12%) 100%);
    background-position: 0 100%;
  }
  &.selected {
    color: @fg-selected;
    background-image: linear-gradient(
      mix(#00D4FF, @bg-level2 , 3%) 0%,
      darken(@bg-level2, 6%) 50%,
      darken(@bg-level2 , 12%) 100%);
    background-size: auto 200%;
    background-position: 0 100%;
    &:hover {
      color: @fg-selected;
    }
    &:not([disabled]):hover {
      background-position: 0 50%;
    }
    &:not([disabled]):active {
      background-position: 0 0;
    }
  }
  &[disabled] {
    background: transparent;
  }
}

.btn,
.btn.icon {
  .btn-mixin(@button-background-color, @base-fg);
}
.btn-variant(@var) {}

.btn.btn-primary {
  .btn-mixin(@button-background-color, @fg-highlight);
}
.btn.btn-info {
  .btn-mixin(@bg-info, @fg-highlight);
}
.btn.btn-success {
  .btn-mixin(@bg-success, @fg-highlight);
}
.btn.btn-warning {
  .btn-mixin(@bg-warning, @fg-highlight);
}
.btn.btn-error {
  .btn-mixin(@bg-error, @fg-highlight);
}

.btn-group {
  >.btn {
    border-color: @stroke;
    margin: -1px 0 0 0;
  }
  > .btn:first-child {
    border-left: 1px solid @stroke;
  }
  > .btn:last-child {
    border-right: 1px solid @stroke;
  }
}
.find-and-replace,
.project-find {
  .btn-group > .btn {
    border-color: @stroke;
  }
  .find-meta-container {
    margin: 0;
    padding: 0;
    top: 0.5rem;
    right: @component-padding;
    line-height: @component-line-height;
    .result-counter {
      margin: 0;
    }
  }
}

.settings-view .package-card .meta-controls .status-indicator {
  box-sizing: content-box;
}

//no real sense in the default courier for these
.project-find .btn-group.btn-group-options .btn,
.find-and-replace .btn-group-options.btn-group .btn, {
  font-family: inherit;
}
