//
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
.btn {
  display: inline-block;
  margin-bottom: 0; // For input.btn
  font-weight: @btn-font-weight;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid transparent; /*no*/
  white-space: nowrap;
  .button-size(@padding-base-vertical;
  @padding-base-horizontal;
  @font-size-base;/*px*/
  @line-height-base;/*px*/
  @btn-border-radius-base);
  .user-select(none);
  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      .tab-focus();
    }
  }
  &:hover,
  &:focus,
  &.focus {
    color: @btn-default-color;
    text-decoration: none;
  }
  &:active,
  &.active {
    outline: 0;
    background-image: none;
    .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));/*px*/
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: @cursor-disabled;
    .opacity(.65);
    .box-shadow(none);
  }
  a& {
    &.disabled,
    fieldset[disabled] & {
      pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
    }
  }
}


.btn {
  position: relative;
  border-radius: @border-radius-small;
  // Remove outline
  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      outline: 0;
    }
  }
  // Firefox fix
  &::-moz-focus-inner {
    border: 0;
  }
  // Hover state
  &:hover,
  &:focus,
  &.focus {
    .box-shadow(0 0 0 100px fade(#000, 5%) inset);/*px*/ // Use box shadow instead of color for all buttons - contextual and custom
  }
  // Active state
  &:active,
  &.active {
    .box-shadow(0 0 0 100px fade(#000, 10%) inset);/*px*/ // The same as above - no color changes, only box shadow
  }
  // Custom color buttons
  &[class*=bg-] {
    &:hover,
    &:focus,
    &.focus {
      color: #fff;
    }
  }
  // Correct line heights in smaller text sizes
  &.text-size-small {
    line-height: @line-height-small;
  }
  &.text-size-mini {
    line-height: @line-height-mini;
  }
}

// Alternate buttons
// --------------------------------------------------
.btn-default {
  .button-variant(@btn-default-color;
  @btn-default-bg;
  @btn-default-border);
}

.btn-primary {
  .button-variant(@btn-primary-color;
  @btn-primary-bg;
  @btn-primary-border);
}

// Success appears as green
.btn-success {
  .button-variant(@btn-success-color;
  @btn-success-bg;
  @btn-success-border);
}

// Info appears as blue-green
.btn-info {
  .button-variant(@btn-info-color;
  @btn-info-bg;
  @btn-info-border);
}

// Warning appears as orange
.btn-warning {
  .button-variant(@btn-warning-color;
  @btn-warning-bg;
  @btn-warning-border);
}

// Danger and error appear as red
.btn-danger {
  .button-variant(@btn-danger-color;
  @btn-danger-bg;
  @btn-danger-border);
}

// 家长端按钮颜色
.btn-parent {
  .button-variant(@btn-parent-color;
  @btn-parent-bg;
  @btn-parent-border);
}

// 校长端按钮颜色
.btn-headmaster {
  .button-variant(@btn-headmaster-color;
  @btn-headmaster-bg;
  @btn-headmaster-border);
}

// 资深老师端按钮颜色
.btn-teacher {
  .button-variant(@btn-teacher-color;
  @btn-teacher-bg;
  @btn-teacher-border);
}

// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link {
  color: @link-color;
  font-weight: normal;
  border-radius: 0;
  text-decoration-line: inherit !important;
  &,
  &:active,
  &.active,
  &[disabled],
  fieldset[disabled] & {
    background-color: transparent;
    .box-shadow(none);
  }
  &,
  &:hover,
  &:focus,
  &:active {
    border-color: transparent;
  }
  &:hover,
  &:focus {
    color: @link-hover-color;
    text-decoration: @link-hover-decoration;
    background-color: transparent;
  }
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus {
      color: @btn-link-disabled-color;
      text-decoration: none;
    }
  }
}

// Icon button
.btn-icon {
  padding-left: @padding-base-vertical + 2;
  padding-right: @padding-base-vertical + 2;
  &.icon-2x {
    padding-left: @padding-base-vertical; /*px*/
    padding-right: @padding-base-vertical; /*px*/
    > i {
      font-size: (@icon-font-size * 2); /*px*/
      top: 0;
    }
    // Sizing
    &.btn-xlg {
      padding-left: @padding-xlarge-vertical;
      padding-right: @padding-xlarge-vertical;
    }
    &.btn-lg {
      padding-left: @padding-large-vertical;
      padding-right: @padding-large-vertical;
    }
    &.btn-sm {
      padding-left: @padding-small-vertical;
      padding-right: @padding-small-vertical;
    }
    &.btn-xs {
      padding-left: @padding-xs-vertical;
      padding-right: @padding-xs-vertical;
    }
  }
  // Sizing
  &.btn-xlg,
  .input-group-xlg > .input-group-btn > & {
    padding-left: @padding-xlarge-vertical + 2;
    padding-right: @padding-xlarge-vertical + 2;
  }
  &.btn-lg,
  .input-group-lg > .input-group-btn > & {
    padding-left: @padding-large-vertical + 2;
    padding-right: @padding-large-vertical + 2;
  }
  &.btn-sm,
  .input-group-sm > .input-group-btn > & {
    padding-left: @padding-small-vertical + 2;
    padding-right: @padding-small-vertical + 2;
  }
  &.btn-xs,
  .input-group-xs > .input-group-btn > .btn& {
    padding-left: @padding-xs-vertical + 2;
    padding-right: @padding-xs-vertical + 2;
  }
}

// Button Sizes
// --------------------------------------------------
.btn-lg {
  // line-height: ensure even-numbered height of button next to large input
  .button-size(@padding-large-vertical;
  @padding-large-horizontal;
  @font-size-large;
  @line-height-large;
  @btn-border-radius-large);
}

.btn-sm {
  // line-height: ensure proper height of button next to small input
  .button-size(@padding-small-vertical;
  @padding-small-horizontal;
  @font-size-small;
  @line-height-small;
  @btn-border-radius-small);
}

.btn-xs {
  .button-size(@padding-xs-vertical;
  @padding-xs-horizontal;
  @font-size-small;
  @line-height-small;
  @btn-border-radius-small);
}

// Link button
.btn-link {
  color: @text-color;
  // Remove shadows
  &,
  &:hover,
  &:focus,
  &:active {
    .box-shadow(none);
  }
}

// Rounded button
.btn-rounded {
  &,
  &.btn-labeled > b {
    border-radius: 100px;
  }
}

// Block button
// --------------------------------------------------
.btn-block {
  display: block;
  width: 100%;
}

// Vertically space out multiple block buttons
.btn-block + .btn-block {
  margin-top: 5px;
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn-block {
    width: 100%;
  }
}

// Button styling
// -------------------------
// Default button
.btn-default {
  // Hover/focus states
  &:hover,
  &:focus,
  &.focus {
    .box-shadow(0 0 0 100px fade(#000, 1%) inset); // Use box shadow instead of color for all buttons - contextual and custom
  }
  // Active state
  &:active,
  &.active {
    .box-shadow(0 0 0 100px fade(#000, 2%) inset); // The same as above - no color changes, only box shadow
  }
}

// Contextual classes.
// Override all styles
// to avoid BS mixin changes
// -------------------------
// Default appears as lighter grey
.btn-default {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-default-bg;
    border-color: @btn-default-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-default-bg;
    border-color: @btn-default-border;
    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-default-bg;
      border-color: @btn-default-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// Primary appears as blue
.btn-primary {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-primary-bg;
    border-color: @btn-primary-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-primary-bg;
    border-color: @btn-primary-border;
    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-primary-bg;
      border-color: @btn-primary-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// Success appears as green
.btn-success {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-success-bg;
    border-color: @btn-success-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-success-bg;
    border-color: @btn-success-border;
    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-success-bg;
      border-color: @btn-success-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// Info appears as light blue
.btn-info {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-info-bg;
    border-color: @btn-info-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-info-bg;
    border-color: @btn-info-border;
    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-info-bg;
      border-color: @btn-info-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// Warning appears as orange
.btn-warning {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-warning-bg;
    border-color: @btn-warning-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-warning-bg;
    border-color: @btn-warning-border;
    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-warning-bg;
      border-color: @btn-warning-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// Danger and error appear as red
.btn-danger {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-danger-bg;
    border-color: @btn-danger-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-danger-bg;
    border-color: @btn-danger-border;
    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-danger-bg;
      border-color: @btn-danger-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// 家长端按钮
.btn-parent {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-parent-bg;
    border-color: @btn-parent-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-parent-bg;
    border-color: @btn-parent-border;
    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-parent-bg;
      border-color: @btn-parent-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// 校长端按钮
.btn-headmaster {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-headmaster-bg;
    border-color: @btn-headmaster-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-headmaster-bg;
    border-color: @btn-headmaster-border;
    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-headmaster-bg;
      border-color: @btn-headmaster-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// 资深老师端按钮
.btn-teacher {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-teacher-bg;
    border-color: @btn-teacher-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-teacher-bg;
    border-color: @btn-teacher-border;
    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-teacher-bg;
      border-color: @btn-teacher-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}