//
// BUTTONS
//

// GUIDELINES
// In order to make the styles more readable nesting should be used only for pseudo classes
// e.g. :active, :disabled, :hover, :visited

//
// MIXINS
//

@mixin primary-active {
  &.primary-active {
    &.active {
      background: $blue;
      border-color: $blue;
      color: white;
    }
  }
}

@mixin focus($color) {
  box-shadow: 0 0 0 1px white, 0 0 0 3px $color;
}

@mixin colorButton($color) {
  background: $color;
  border: 1px solid $color;
  &.on-solid {
    border: 1px solid white;
    &:hover {
      border: 1px solid white;
      color: white;
    }
  }
}

#{$all-buttons}, .button, a.button {
  background: $gray--light;
  border-color: $gray--light;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  color: white;
  display: inline-block;
  line-height: 1em;
  font-family: $body-font-family;
  font-size: $body-font-size-normal;
  font-weight: 500;
  padding: 11px 14px;
  text-decoration: none;
  user-select: none;

  &:focus {
    outline: none;
  }

  &:disabled, &.disabled {
    background: $gray--light;
    border-color: $gray--light;
  }

  &.large {
    font-size: $body-font-size-normal;
    padding: 15px 40px;

    &.skill {
      padding: 8px 14px;
    }
  }

  &.normal {
    &.skill {
      font-size: $body-font-size-normal;
      padding: 8px 11px;
    }
  }

  &.on-solid {
    background: transparent;
    border-color: white;
    &:hover {
      background: white;
    }
  }

  &.default {
    background: $default-color;
    border: 1px solid $default-color;
    &.on-solid {
      background: transparent;
      &:hover {
        color: $blue;
      }
    }

    &.skill {
      padding: 11px 14px;
    }
  }

  &.small {
    font-size: $body-font-size-small;
    padding: 6px 14px;

    &.skill {
      padding: 4px 6px;
      font-size: $body-font-size-small;
    }
  }

  &.clear {
    background: white;
    border: 1px solid $gray;
    color: $text--dark;
    font-weight: 400;

    .fa {
      color: $text--lighter;
    }

    &:disabled, &.disabled {
      background: $background-gray;
    }

    &:focus {
      background: $clear-focus;
      border-color: darken($gray, 2%);
    }

    @include primary-active;
  }

  &.default {
    @include colorButton($default-color);
    &:disabled, &.disabled {
      opacity: 0.5;
    }
  }

  &.success {
    @include colorButton($success-color);
  }

  &.danger {
    @include colorButton($danger-color);
    &:disabled, &.disabled {
      @include colorButton($clear-hover);
      color: $red;
    }
  }

  &.warning {
    @include colorButton($warning-color);
  }

  &.has-error {
    @include shake;
  }

  .fa {
    &:last-child {
      padding-right: 5px;
    }
  }

  span {
    &.check-area, &.check-mark, &.x-mark {
      display: inline-block;
      height: 16px;
      margin: -3px 5px 0 0;
      vertical-align: middle;
      width: 18px;

      &.normal, &.small {
        height: 10px;
        width: 12px;

        &.after {
          margin: -3px 0 0 6px;
        }
      }
    }

    &.check-area {
      @include sprite($check-area);
    }

    &.check-mark {
      @include sprite($check-mark);
    }

    &.x-mark {
      @include sprite($x-mark);
      &.normal, &.small {
        @include sprite($x-mark-small);
      }
    }

    &.button-spinner {
      display: inline-block;
      height: 22px;
      margin: -4px 8px -2px -2px;
      vertical-align: middle;
      width: 22px;

      @include fadeIn(0.6s);
    }
  }

  &.clear {
    span {
      &.button-spinner {
        $file: "/assets/images/icons/button-spinner-on-clear";
        @include background-image-retina($file, "gif", 22px, 22px);
      }
    }
  }

  &.default {
    span {
      &.check-area {
        @include sprite($check-area-white);
      }

      &.button-spinner {
        $file: "/assets/images/icons/button-spinner-on-default";
        @include background-image-retina($file, "gif", 22px, 22px);
      }
    }
  }
}

@mixin hoverButton($color) {
  $darker-color: darken($color, 5%);
  background: $darker-color;
  background-image: linear-gradient($color, $darker-color);
  border-color: $darker-color;
  color: white;
}

#{$all-buttons-hover}, .button:hover {
  cursor: pointer;

  &.default, &.clear, &.success, &.danger {
    transition: background 0.2s ease-in;
  }

  &.default {
    @include hoverButton($default-color);
  }

  &.clear {
    background: $clear-hover;
    background-image: linear-gradient(white, $clear-hover);
    border-color: $gray;

    &:disabled, &.disabled {
      background: $background-gray;
    }
  }

  &.danger {
    @include hoverButton($danger-color);
    &:disabled, &.disabled {
      @include colorButton($clear-hover);
      color: $red;
    }
  }

  &.success {
    @include hoverButton($success-color);
  }

  &.warning {
    @include hoverButton($warning-color);
  }

  &.can-delete {
    background: $red;
    border: 1px solid $red;
    color: white;
    transition: background 0s ease-in;
  }

  &:disabled, &.disabled {
    cursor: default;
  }
}

#{$all-buttons}, .button {
  &:not(.has-spinner) {
    &.active, &:active {
      &.clear {
        background: $clear-active;
        @include primary-active;
      }

      &.default {
        background: $primary-active;
      }
    }
  }
}

.button-group {
  @include clearfix;

  display: inline-block;
  font-size: 0;
  position: relative;
  vertical-align: middle;

  #{$all-buttons}, .button {
    border-radius: 4px;
    margin: 0 0 0 -1px;
    position: relative;

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

    &:not(:first-child) {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    }

    &:not(:last-child) {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }

    &.active {
      z-index: 3;
    }
  }

  &.dropdown {
    #{$all-buttons}, .button {
      &::after {
        @include arrow-down;
        height: 8px;
        margin-left: 10px;
      }
    }
  }
}

p {
  #{$all-buttons}, .button {
    &.small {
      margin-right: 5px;
      padding-left: 8px;
      padding-right: 8px;
    }
  }

  &.clear {
    &:disabled, &.disabled {
      background: white;
    }
  }
}

.button__github {
  span {
    display: inline-block;
    height: 16px;
    margin: -3px 7px 0 0;
    vertical-align: middle;
    width: 16px;
  }

  &--light {
    span {
      @include sprite($github-light);
    }
  }

  &--dark {
    span {
      @include sprite($github-dark);
    }
  }
}
