@import "variables";

.btn {
  padding: 4px 3px 6px;
  border: 1px solid #aaaaaa;
  background: #dddddd url('[{$dir_images}]gradient.png') repeat-x;
  text-shadow: 0 1px 0 $white;
  border-radius: 2px;
  color: $black;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  display: inline-block;
  user-select: none;
  // This is used for A-tag buttons.
  text-decoration: none;
  // This is used to display all boxes the same height.
  box-sizing: border-box;
  height: 24px;
  // This is a "reset", so all buttons get the same font-size, line-height and font.
  font-size: 11px;
  line-height: 13px;
  font-family: Tahoma, Geneva, Helvetica, sans-serif;
  // A little animation for hover, active, colors, ...
  transition: all $base-transition-speed;

  img {
    margin-top: -2px;
    height: 16px;
    vertical-align: middle;
  }

  span, strong, em {
    vertical-align: baseline;
  }

  // Different button states.
  &:hover,
  &.hover {
    border-color: #bbbbbb;
    background-color: $lightgrey;
    color: lighten($brand-color, 6.7%);
  }

  &:active,
  &.active {
    // We use transform/translate instead of positioning the button relative + top and left styling for absolute styled buttons.
    transform: translate(1px, 1px);
  }

  &.disabled,
  &.disabled:hover,
  &.disabled:focus,
  &.disabled:active,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &[disabled]:active {
    top: 0;
    left: 0;
    color: $black;
    opacity: .5;
    filter: alpha(opacity=50);
    cursor: default;
  }

  // Special CSS for removing the dotted lines inside buttons (Firefox).
  &::-moz-focus-inner {
    border: 0;
  }

  // === Implementing some button sizes ==========================

  // = MINI ======================
  &.btn-mini {
    padding: 1px 0;
    height: 15px;

    img {
      margin-top: -2px;
      height: 11px;
    }

    span, strong, em {
      font-size: 10px;
      line-height: 9px;
    }
  }

  // = SMALL =====================
  &.btn-small {
    padding: 2px;
    height: 20px;

    img {
      height: 14px;
      margin-top: 0;
    }

    span, strong, em {
      line-height: 12px;
      font-size: 10px;
    }
  }

  // = LARGE =====================
  &.btn-large {
    height: 28px;
    padding: 6px 6px 7px;
    font-size: 13px;
  }

  // = BLOCK =====================
  &.btn-block {
    display: block;
    width: 100%;
  }

  // === Implementing some button colors =========================

  // = TRANSPARENT as in Navbarbuttons ===
  &.btn-transparent {
    background-color: transparent;
    border-color: transparent;

    &:hover, &.hover {
      background-color: $lightgrey;
      border-color: #bbbbbb;
      color: lighten($brand-color, 6.7%);
    }
  }

  // = GREEN =============================
  &.btn-green {
    background-color: #acf097;
    border-color: #81b970;

    &:hover, &.hover {
      background-color: #b9ffa4;
      color: #385524;
    }
  }

  // = BLUE ==============================
  &.btn-blue {
    background-color: #b2d1f0;
    border-color: #7b99b9;

    &:hover, &.hover {
      background-color: #b8dcff;
      color: #414d55;
    }
  }

  // = RED ===============================
  &.btn-red {
    background-color: #f0a19e;
    border-color: #b97775;

    &:hover, &.hover {
      background-color: #ffaca9;
      color: #553534;
    }
  }

  // = YELLOW ============================
  &.btn-yellow {
    background-color: #edf081;
    border-color: #e8d452;

    &:hover, &.hover {
      background-color: #fcff88;
      color: #535523;
    }
  }
}










