@import "compass";

// Radius
$field-radius: 3px;
$button-radius: 3px;

// Colors
$border-color-hl: #082054;
$background-color-hl: lighten($border-color-hl,80%);
$button-background-color-hl: #082054;
$button-border-color-hl: #082054;
$background-color: #ffffff;
$border-color: #cccccc;
$shadow-color: #eeeeee;
$label-color: inherit;
$legend-color: inherit;
$button-text-color: #ffffff;
$button-background-color: #2f67b7;
$button-border-color: #082054;
$background-color-ro: #eeeeee;
$placeholder-color: #9c8152;
$field-color: #9c8152;

// Sizes & Paddings
$field-padding: 3px 6px;
$field-height: 35px;
$field-border-width: 1px;
$button-padding: 3px 15px 3px 14px;
$button-height: 35px;
$button-border-width: 2px;

$font-size-field: 16px;

// Font
$font-family-form: "Noto Serif", Arial, Helvetica, FreeSans, sans-serif;

/**
 * Since fieldset borders are removed in the reset style sheet, adjust the
 * legends accordingly
 */
legend {
  width: 100%;
  display: block;
  font-weight: bold;
  border: 0;
}

input,
textarea,
button,
select {
  line-height: 150%;
  outline: none;
  font-size: $font-size-field;
  font-family: $font-family-form;
}

/**
 * Placeholders
 */
::-webkit-input-placeholder {
  color: $placeholder-color;
}

:-moz-placeholder { /* Firefox 18- */
  color: $placeholder-color;
}

::-moz-placeholder {  /* Firefox 19+ */
  color: $placeholder-color;
}

:-ms-input-placeholder {
  color: $placeholder-color;
}

/**
 * Text fields and textareas
 */
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input:not([type]), textarea, select {
  width: 100%;
  display: inline-block;
  padding: $field-padding;
  background: $background-color;
  border: $field-border-width solid $border-color;
  height: $field-height;
  @include border-radius($field-radius);
  @include box-shadow(inset 0 1px 1px $shadow-color);
  @include transition(all .15s linear);
  @include box-sizing(border-box);
  color: $field-color;

  &:focus {
    outline: 0;
    background: $background-color-hl;
    border-color: $border-color-hl;
  }
}

/**
 * Label styling
 */

.formbody label {
  color: $label-color;
}

/**
 * Fieldset styling
 */
.formbody > fieldset {
  margin-top: 1.5em;

  legend {
    color: $legend-color;
    border-bottom-color: $legend-color;
  }
}


/**
 * Fix some width and height settings
 */
input[type="file"] {
  cursor: pointer;
}

select, input[type="file"] {
  display: block;
}

input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] {
  width: auto;
}

textarea, select[multiple], select[size] {
  height: auto;
}

/**
 * Checkboxes and radio buttons
 */
input[type="radio"], input[type="checkbox"] {
  margin: 0 3px 0 0;
}

input[type="radio"], input[type="checkbox"], label {
  vertical-align: middle;
}

/**
 * Handle disabled and read-only
 */
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
  cursor: not-allowed;
  background: $background-color-ro;
}

input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
  background: transparent;
}

/**
 * Buttons
 */
input[type="submit"], .button, button {
  display: inline-block;
  padding: $button-padding;
  margin-bottom: 0;
  text-align: center;
  vertical-align: middle;
  color: $button-text-color;
  cursor: pointer;
  border: $button-border-width solid $button-border-color;
  height: $button-height;
  @include border-radius($button-radius);
  background-color: $button-background-color;
  @include transition(background .15s linear);
  @include box-sizing(border-box);

  a& {
    line-height: $button-height;
  }

  &:hover,
  a&:hover {
    text-decoration: none;
  }

  &:active,
  a&:active {
    background-color: $button-background-color-hl;
    border-color: $button-border-color-hl;
  }
}

/**
 * Optional button styles
 */
.button_block input[type="submit"],
.button_block button,
button.button_block,
.button_block.button {
  display: block;
  width: 100%;
}

.button_small input[type="submit"],
.button_small button,
button.button_small,
.button_small.button {
  height: 30px;
}

a.button_small.button {
  line-height: 30px;
}

/**
 * Checkbox
 */
.widget.widget-checkbox label, .widget.widget-radio label {
  display: inline-block;
  margin-bottom: 0;
}