@bodyColor: #59626a;
@borderColor: #CED7DF;;
@curious-blue: #168eea;
@fillColor: #f4f7f9;
@headingColor: #323b43;
@outer-space: #323b43;

@base: 10px;
@box-shadow-level-1: 0 1px 2px fade(@outer-space, 30%);

@iconSize: 7px;

// Button
.buttonstyle(@color, @gradient, @hover) {
  border: 1px solid darken(@color, 6%);
  text-shadow: 0 0px 1px rgba(0,0,0,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  font-size: 12px;
  max-height: 34px; // padding 10*2 + border 1*2 + font-size
  line-height: 1em;
  font-weight: 400;
  outline: none;

  &:hover {
    border-color: @curious-blue;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
    text-decoration: none;
  }
}

.button {
  .buttonstyle(lighten(@fillColor, 4%), 2%, 10%);
  font-family: Open Sans,Helvetica,Arial,sans-serif;

  cursor: pointer;
  display: flex;
  box-sizing: content-box;

  margin: 0;
  padding: 8px @base;

  color: @borderColor;
  align-items: center;

  text-decoration: none;
  text-shadow: none;

  border: 1px solid @borderColor;
  border-radius: 3px;

  position: relative;
  z-index: 0;

  &:hover {
    color: @headingColor;
    text-shadow: none;
    border: 1px solid @curious-blue;
    box-shadow: none;
    z-index: 1;
  }

  &:focus {
    outline: none;
    text-decoration: none;
  }
}

.leftButton {
  .button;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.rightButton {
  .button;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  left: -1px;
}

.activeButton {
  background-color: #f8f8f8;
  color: @headingColor;
}