/* ------- BUTTON ------- */

.anychart-button {
  .border-radius(2px);

  background-color: #f5f5f5;
  .linear-gradient(#f5f5f5; #f1f1f1);

  border: 1px solid #dcdcdc;
  border: 1px solid rgba(0,0,0,0.1);

  color: #333;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  height: 29px;
  line-height: 27px;
  margin-right: 16px;
  min-width: 52px;
  outline: 0;
  padding: 0 8px;
  white-space: nowrap;

  &:focus {
    border-color: #4d90fe;
  }

  &:hover {
    .box-shadow(0 1px 1px rgba(0, 0, 0, .1));
  }

  &:active {
    .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.3));
  }

  i {
    font-size: 11px;
  }

  &.anychart-button-disabled:active {
    .box-shadow(none);
    cursor: default;
  }

  &.anychart-button-disabled {

  }
}

.anychart-button-primary {
  .border-radius(2px);

  background-color: #4898e6;
  .linear-gradient(#4898e6; #4089d0);

  border: 1px solid #1976d2;
  color: #fff;

  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  height: 26px;
  line-height: 24px;
  margin: 0 16px 0 0;
  min-width: 70px;
  outline: 0;
  padding: 0 7px;

  &:hover, &:active {
    background-color: #4898e6;
    .linear-gradient(#4898e6; #387ec3);
    border: 1px solid #1976d2;
    color: #fff;
  }

  &:focus {
    .box-shadow(inset 0 0 0 1px #fff);
    outline: 0;
  }

  &:active {
    .box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.3));
  }

  &.anychart-button-disabled {
    .box-shadow(none);

    background: #4d90fe;
    .linear-gradient(#4d90fe; #4089d0);

    filter: alpha(opacity=50);
    opacity: 0.5;
    cursor: default;
  }
}

.anychart-button-secondary {
  .border-radius(2px);

  background-color: #f5f5f5;
  .linear-gradient(#f5f5f5; #f1f1f1);

  border: 1px solid #dcdcdc;
  color: #333;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  height: 26px;
  line-height: 24px;
  margin: 0 16px 0 0;
  min-width: 70px;
  outline: 0;
  padding: 0 7px;

  &:hover, &:active {
    .box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));

    background-color: #f8f8f8;
    .linear-gradient(#f8f8f8; #f1f1f1);
    border: 1px solid #c6c6c6;
    color: #111;
  }

  &:focus {
    border: 1px solid #4d90fe;
  }

  &:active {
    .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
  }

  &.anychart-button-disabled {
    .box-shadow(none);

    background-color: #f5f5f5;
    .linear-gradient(#f5f5f5; #f1f1f1);

    border: 1px solid #f3f3f3;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #b8b8b8;
    cursor: default;
  }
}

.anychart-button-standard {
  .box-shadow(none);

  background-color: #f5f5f5;
  .linear-gradient(#f5f5f5; #f1f1f1);
  color: #333;
  border: 1px solid #dcdcdc;
  border: 1px solid rgba(0,0,0,0.1);

  &:hover {
    .box-shadow(none);

    background-color: #f8f8f8;
    .linear-gradient(#f8f8f8; #f1f1f1);
    border: 1px solid #c6c6c6;
    color: #111;
  }

  &:active {
    .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
    background: #f8f8f8;
    color: #111;
  }

  &.anychart-button-checked {
    .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));

    background-color: #eee;
    .linear-gradient(#eee; #e0e0e0);

    border: 1px solid #ccc;
    color: #333;
  }

  &.anychart-button-disabled {
    .box-shadow(none);

    background-color: #f5f5f5;
    .linear-gradient(#f5f5f5; #f1f1f1);

    border: 1px solid #f3f3f3;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #b8b8b8;
    cursor: default;
  }
}

.anychart-button-toggle {
  height: 28px;
  line-height: 24px;
  padding: 0;
  min-width: 27px;
  margin: 0;
  vertical-align: middle;
}

.anychart-button.anychart-button-toggle {
  z-index: auto;
}

.anychart-button-collapse-left,
.anychart-button-collapse-right {
  z-index: 1;

  &.anychart-button-checked {
    z-index: 2;
  }

  &:hover {
    z-index: 3;
  }
}

.anychart-button-collapse-left.anychart-button-disabled {
  z-index: 0;
}

.anychart-button-collapse-right {
  margin-right: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.anychart-button-collapse-left {
  margin-left: -1px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
