@import 'lib.less';
@import 'theme.less';

.form-input-gradient() {
//  .linear-gradient(top, white, 0%, @gray8, 95%, @gray8, 95%, '#00ffffff', '#f2e4e3e0');
  .alpha-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0), '#00000000', '#33000000');
}

.form-input-gradient-inverted() {
  .linear-gradient(top, @gray8, white);
}

form, form.stacked {
  label {
    display: block;
    margin-bottom: @font-size/2;
    cursor: pointer;
  }

  label.radio, label.checkbox {
    padding-left: 18px;

    input[type=radio], input[type=checkbox] {
      float: left;
      margin-left: -18px;
      margin-top: @font-size/4;
      margin-bottom: @font-size/4;
    }

    input[type=checkbox] {
      margin-top: @font-size/6;
      margin-bottom: @font-size/6;
    }
  }

  input, textarea, select, div.selectbox {
    margin-bottom: @font-size*0.75;
  }
}

input, textarea, select, div.selectbox {
  font-size: @font-size;
}

input[type=text], textarea, select, div.selectbox {
  line-height: @font-size*1.25;
  vertical-align: middle;
  .accent-border();
  .border-radius(2px);
}

input[type=text], textarea {
  .inset-box-shadow(0, 0, 1px, 1px, @gray8);
}

.button {
  background-color: white;
  .accent-border();
  .border-radius(2px);
  .form-input-gradient();
}

.button:active, .button.active {
  .form-input-gradient-inverted();
}

.button:disabled, .button.disabled, div.selectbox.disabled, select:disabled,
textarea:disabled, textarea.disabled {
  color: @disabled-color;
  .accent-border(@disabled-border);
}

.button:disabled:active, .button.disabled.active {
  .form-input-gradient();
}

.button.green {
  .accent-border(@green);
}

.button.highlight {
  border-color: @highlight-color1;
}

.button.error {
  color: @red;
  border-color: @red;
}


div.selectbox {
  .form-input-gradient();
  padding: 1px @font-size*0.5;
  .arrow {
    border-color: @standard-border;
    font-size: @font-size*0.5;
  }
}

.menu, .base-menu {
  border-color: @standard-border;
  li:hover {
    background-color: @standard-border;
  }
}

.togglegroup {
  display: inline-table;
}

.togglegroup [type=button] {
  border-width: 1px 0px 1px 1px;
  .border-radius(0px);
  margin: 0px;
}

.togglegroup [type=button].first {
  .border-radius(4px, 0, 0, 4px);
}

.togglegroup [type=button].last {
  .border-radius(0, 4px, 4px, 0);
  border-width: 1px;
}

.togglegroup .checked {
  color: @white;
  background: @highlight-color1;
}

.bargraph {
  .graph-bar {
    background-color: @highlight-color1;
    .box-shadow(-3px, 7px, 5px, 0px, @gray4);
  }
}

.ratio-graph {
  .total-count-view {
    border: 1px solid @standard-border;
  }

  .current-count-view {
    position: relative;
    background: @highlight-color1;
    border: solid @highlight-color1;
    border-width: 0px 1px 1px 0px;
  }

  .current-count-cell {
    color: @highlight-color1;
  }

  .current-count {
    color: @highlight-color1;
  }

  .total-count-cell {
    color: @gray4;
  }

  .total-count {
    color: @gray4;
  }
}