@import 'css/romo/vars';
@import 'css/romo/mixins';

.romo {

  /* defaults */

  form { @include rm-push; @include rm-pad; }
  label { display: block; }

  /* basic */

  .romo-form fieldset {
    @include rm-push;
    @include rm-pad;
    @include rm-border;
  }

  .romo-form legend {
    display: block;
    width: 100%;
    @include rm-push;
    @include rm-pad;
    @include push0-bottom;
    @include rm-border;
    @include border1-bottom;
  }

  .romo-form input,
  .romo-form select,
  .romo-form textarea,
  input.romo-option-list-dropdown-filter {
    font-size: 100%;
    @include rm-push;
    @include align-middle;
  }

  .romo-form label.romo-radio,
  .romo-form label.romo-checkbox {
    span,
    input[type="radio"],
    input[type="checkbox"] {
      line-height: 1;
      @include align-middle;
    }
  }

  .romo-form input,
  input.romo-option-list-dropdown-filter {
    *overflow: visible;
    line-height: normal;
  }

  .romo-form textarea {
    overflow: auto; @include align-top;
  }

  .romo-form label,
  .romo-form select,
  .romo-form input[type="button"],
  .romo-form input[type="reset"],
  .romo-form input[type="submit"],
  .romo-form input[type="radio"],
  .romo-form input[type="checkbox"] { cursor: pointer; }

  .romo-form input[disabled],
  .romo-form select[disabled],
  .romo-form textarea[disabled],
  .romo-form input[readonly],
  .romo-form select[readonly],
  .romo-form textarea[readonly],
  input.romo-option-list-dropdown-filter[disabled],
  input.romo-option-list-dropdown-filter[readonly] { cursor: $notAllowedCursor; }

  .romo-form select {
    font-weight: normal;
    background-color: $inputBgColor;
    @include border1;
  }
  .romo-form select optgroup { @include input-option-list-optgroup; }
  .romo-form select option   { @include input-option-list-option; }

  .romo-form textarea,
  .romo-form input[type="text"],
  .romo-form input[type="password"],
  .romo-form input[type="datetime"],
  .romo-form input[type="datetime-local"],
  .romo-form input[type="date"],
  .romo-form input[type="month"],
  .romo-form input[type="time"],
  .romo-form input[type="week"],
  .romo-form input[type="number"],
  .romo-form input[type="email"],
  .romo-form input[type="url"],
  .romo-form input[type="search"],
  .romo-form input[type="tel"],
  .romo-form input[type="color"],
  input.romo-option-list-dropdown-filter {
    font-weight: normal;
    background-color: $inputBgColor;
    @include border1;
    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
  }

  /* see https://css-tricks.com/almanac/selectors/p/placeholder/ */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder */
  .romo-form textarea::placeholder,
  .romo-form input[type="text"]::placeholder,
  .romo-form input[type="password"]::placeholder,
  .romo-form input[type="datetime"]::placeholder,
  .romo-form input[type="datetime-local"]::placeholder,
  .romo-form input[type="date"]::placeholder,
  .romo-form input[type="month"]::placeholder,
  .romo-form input[type="time"]::placeholder,
  .romo-form input[type="week"]::placeholder,
  .romo-form input[type="number"]::placeholder,
  .romo-form input[type="email"]::placeholder,
  .romo-form input[type="url"]::placeholder,
  .romo-form input[type="search"]::placeholder,
  .romo-form input[type="tel"]::placeholder,
  .romo-form input[type="color"]::placeholder,
  input.romo-option-list-dropdown-filter::placeholder {
    @include input-placeholder;
  }
  .romo-form textarea::-webkit-input-placeholder,                     /* Chrome/Opera/Safari */
  .romo-form input[type="text"]::-webkit-input-placeholder,
  .romo-form input[type="password"]::-webkit-input-placeholder,
  .romo-form input[type="datetime"]::-webkit-input-placeholder,
  .romo-form input[type="datetime-local"]::-webkit-input-placeholder,
  .romo-form input[type="date"]::-webkit-input-placeholder,
  .romo-form input[type="month"]::-webkit-input-placeholder,
  .romo-form input[type="time"]::-webkit-input-placeholder,
  .romo-form input[type="week"]::-webkit-input-placeholder,
  .romo-form input[type="number"]::-webkit-input-placeholder,
  .romo-form input[type="email"]::-webkit-input-placeholder,
  .romo-form input[type="url"]::-webkit-input-placeholder,
  .romo-form input[type="search"]::-webkit-input-placeholder,
  .romo-form input[type="tel"]::-webkit-input-placeholder,
  .romo-form input[type="color"]::-webkit-input-placeholder,
  input.romo-option-list-dropdown-filter::-webkit-input-placeholder {
    @include input-placeholder;
  }
  .romo-form textarea::-moz-placeholder,                              /* Firefox 19+ */
  .romo-form input[type="text"]::-moz-placeholder,
  .romo-form input[type="password"]::-moz-placeholder,
  .romo-form input[type="datetime"]::-moz-placeholder,
  .romo-form input[type="datetime-local"]::-moz-placeholder,
  .romo-form input[type="date"]::-moz-placeholder,
  .romo-form input[type="month"]::-moz-placeholder,
  .romo-form input[type="time"]::-moz-placeholder,
  .romo-form input[type="week"]::-moz-placeholder,
  .romo-form input[type="number"]::-moz-placeholder,
  .romo-form input[type="email"]::-moz-placeholder,
  .romo-form input[type="url"]::-moz-placeholder,
  .romo-form input[type="search"]::-moz-placeholder,
  .romo-form input[type="tel"]::-moz-placeholder,
  .romo-form input[type="color"]::-moz-placeholder,
  input.romo-option-list-dropdown-filter::-moz-placeholder {
    @include input-placeholder;
  }
  .romo-form textarea:-moz-placeholder,                               /* Firefox 18- */
  .romo-form input[type="text"]:-moz-placeholder,
  .romo-form input[type="password"]:-moz-placeholder,
  .romo-form input[type="datetime"]:-moz-placeholder,
  .romo-form input[type="datetime-local"]:-moz-placeholder,
  .romo-form input[type="date"]:-moz-placeholder,
  .romo-form input[type="month"]:-moz-placeholder,
  .romo-form input[type="time"]:-moz-placeholder,
  .romo-form input[type="week"]:-moz-placeholder,
  .romo-form input[type="number"]:-moz-placeholder,
  .romo-form input[type="email"]:-moz-placeholder,
  .romo-form input[type="url"]:-moz-placeholder,
  .romo-form input[type="search"]:-moz-placeholder,
  .romo-form input[type="tel"]:-moz-placeholder,
  .romo-form input[type="color"]:-moz-placeholder,
  input.romo-option-list-dropdown-filter:-moz-placeholder {
    @include input-placeholder;
  }
  .romo-form textarea:-ms-input-placeholder,                          /* IE 10+ */
  .romo-form input[type="text"]:-ms-input-placeholder,
  .romo-form input[type="password"]:-ms-input-placeholder,
  .romo-form input[type="datetime"]:-ms-input-placeholder,
  .romo-form input[type="datetime-local"]:-ms-input-placeholder,
  .romo-form input[type="date"]:-ms-input-placeholder,
  .romo-form input[type="month"]:-ms-input-placeholder,
  .romo-form input[type="time"]:-ms-input-placeholder,
  .romo-form input[type="week"]:-ms-input-placeholder,
  .romo-form input[type="number"]:-ms-input-placeholder,
  .romo-form input[type="email"]:-ms-input-placeholder,
  .romo-form input[type="url"]:-ms-input-placeholder,
  .romo-form input[type="search"]:-ms-input-placeholder,
  .romo-form input[type="tel"]:-ms-input-placeholder,
  .romo-form input[type="color"]:-ms-input-placeholder,
  input.romo-option-list-dropdown-filter:-ms-input-placeholder {
    @include input-placeholder;
  }

  .romo-form select:focus,
  .romo-form textarea:focus,
  .romo-form input[type="text"]:focus,
  .romo-form input[type="password"]:focus,
  .romo-form input[type="datetime"]:focus,
  .romo-form input[type="datetime-local"]:focus,
  .romo-form input[type="date"]:focus,
  .romo-form input[type="month"]:focus,
  .romo-form input[type="time"]:focus,
  .romo-form input[type="week"]:focus,
  .romo-form input[type="number"]:focus,
  .romo-form input[type="email"]:focus,
  .romo-form input[type="url"]:focus,
  .romo-form input[type="search"]:focus,
  .romo-form input[type="tel"]:focus,
  .romo-form input[type="color"]:focus,
  input.romo-option-list-dropdown-filter:focus {
    @include input-focus;
  }

  .romo-form input[disabled],
  .romo-form select[disabled],
  .romo-form textarea[disabled],
  .romo-form input[readonly],
  .romo-form select[readonly],
  .romo-form textarea[readonly],
  input.romo-option-list-dropdown-filter[disabled],
  input.romo-option-list-dropdown-filter[readonly] { background-color: $inputDisabledColor; }

  .romo-form input[type="radio"][disabled],
  .romo-form input[type="checkbox"][disabled],
  .romo-form input[type="radio"][readonly],
  .romo-form input[type="checkbox"][readonly] { background-color: transparent };

  .romo-form select,
  .romo-form input[type="text"],
  .romo-form input[type="password"],
  .romo-form input[type="datetime"],
  .romo-form input[type="datetime-local"],
  .romo-form input[type="date"],
  .romo-form input[type="month"],
  .romo-form input[type="time"],
  .romo-form input[type="week"],
  .romo-form input[type="number"],
  .romo-form input[type="email"],
  .romo-form input[type="url"],
  .romo-form input[type="search"],
  .romo-form input[type="tel"],
  .romo-form input[type="color"],
  input.romo-option-list-dropdown-filter {
    height: $inputHeight;
    line-height: $baseLineHeight;
    @include align-middle;
  }

  input.romo-option-list-dropdown-filter {
    height: $inputFilterHeight;
  }

  .romo-form textarea,
  .romo-form input[type="text"],
  .romo-form input[type="password"],
  .romo-form input[type="datetime"],
  .romo-form input[type="datetime-local"],
  .romo-form input[type="date"],
  .romo-form input[type="month"],
  .romo-form input[type="time"],
  .romo-form input[type="week"],
  .romo-form input[type="number"],
  .romo-form input[type="email"],
  .romo-form input[type="url"],
  .romo-form input[type="search"],
  .romo-form input[type="tel"],
  .romo-form input[type="color"],
  input.romo-option-list-dropdown-filter {
    display: inline-block;
    padding: 4px 6px;
    color: $inputColor;
  }

  input.romo-option-list-dropdown-filter {
    display: block;
    width: 100%;
  }

  .romo-option-list-dropdown-filter-wrapper {
    @include border1-bottom();
    padding: 4px 0;
    margin: 0 4px;
  }

  .romo-form textarea,
  .romo-form select[multiple],
  .romo-form select[size] { height: auto; }

  .romo-form input[type="file"] {
    height: ($baseLineHeight / 2) * 3;      /* 30px */
    line-height: ($baseLineHeight / 2) * 3; /* 30px */
  }

  .romo-input,
  .romo-input1 { width: $inputSize1; }
  .romo-input-small,
  .romo-input0 { width: $inputSize0; }
  .romo-input-large,
  .romo-input2 { width: $inputSize2; }

  .romo-input-block { width: 100%; display: block; }

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

  .romo-form .romo-input-inline,
  .romo-form .romo-input-help {
    line-height: $inputHeight;
    @include align-middle;
  }

  /* input option list (used by selects/pickers via option list dropdown) */

  .romo-input-option-list {
    cursor: pointer;
    font-weight: normal;
    padding: 4px 0;
    @include user-select(none);

    background-color: $inputBgColor;
    color: $inputColor;
  }

  .romo-input-option-list UL {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
  }

  .romo-input-option-list UL.romo-option-list-optgroup LI {
    padding-left: $spacingSize1;
  }

  .romo-input-option-list LI[data-romo-option-list-dropdown-item="opt"] {
    @include input-option-list-option;
  }

  .romo-input-option-list LI[data-romo-option-list-dropdown-item="optgroup"] {
    @include input-option-list-optgroup;
    padding: 0 $spacingSize0;
  }

  .romo-input-option-list LI.romo-option-list-dropdown-highlight {
    background-color: $inputHighlightBgColor;
    color: $inputBgColor;
  }

  .romo-input-option-list LI.disabled {
    cursor: $notAllowedCursor;
  }

  .romo-input-option-list LI.disabled,
  .romo-input-option-list LI.disabled.romo-option-list-dropdown-highlight {
    background-color: $inputBgColor;
    color: $disabledColor;
  }

  /* selected options list (used by multi selects/pickers) */

  .romo-selected-options-list {
    font-weight: normal;
    @include user-select(none);
    background-color: $inputBgColor;
    color: $inputColor;
    @include border1;

    .romo-selected-options-list-items {
      min-height: 35px;
    }
    .romo-selected-options-list-items {
      padding: 4px;
    }
    .romo-selected-options-list-item {
      display: inline-block;
      @include border1;
      @include bg-alt;
    }
  }

}