/* ! Do not edit css files !
   Edit scss version and compile with sass from scss folder like this:
   $ sass form.scss ../form.css
 */

@import "base";

input {
  vertical-align: middle;

  &.input-text {
    @extend %extend_18;
  }
}

textarea {
  @extend %extend_18;
  margin: 0;

  &:disabled {
    background: $color_wild_sand_approx;
  }

  &.disabled {
    background: $color_wild_sand_approx;
  }
}

select {
  @extend %extend_18;
  height: 26px;
  margin: 0 0 8px;
  border: 1px solid $color_silver_approx;
  box-sizing: border-box;
  text-transform: none;
  margin: 0;

  &.disabled {
    background: $color_wild_sand_approx;
  }

  &:disabled {
    background: $color_wild_sand_approx;
  }

  optgroup {
    font-weight: 600;
  }
}

input[type=text] {
  &.disabled {
    background: $color_wild_sand_approx;
  }

  &:disabled {
    background: $color_wild_sand_approx;
  }
}

select[multiple] {
  height: auto;
}

select[size] {
  height: auto;
}

button {
  text-transform: none;
  @extend %extend_20;

  span {
    padding: 0;
  }

  &.cancel {
    background: $color_cinnabar_approx;
    color: $white;
    padding: 0 13px;

    span {
      background: none;
      padding: 0;
    }

    &:hover {
      background: $color_coral_red_approx;
    }
  }

  &.delete {
    background: $color_cinnabar_approx;
    color: $white;
    padding: 0 13px;

    span {
      background: none;
      padding: 0;
    }

    &:hover {
      background: $color_coral_red_approx;
    }
  }

  &.save {
    @extend %extend_23;
    padding: 0 13px;

    span {
      background: none;
      padding: 0;
    }

    &:focus {
      @extend %extend_24;
    }

    &:active {
      @extend %extend_24;
    }

    &:hover {
      background-color: $color_action;
    }

    &.disabled {
      @extend %extend_25;
    }
  }

  &.ok_button {
    @extend %extend_23;
    padding: 0 13px;

    span {
      background: none;
      padding: 0;
    }

    &:focus {
      @extend %extend_24;
    }

    &:active {
      @extend %extend_24;
    }

    &:hover {
      background-color: $color_action;
    }

    &.disabled {
      @extend %extend_25;
    }
  }

  &.add {
    @extend %extend_23;
    padding: 0 13px;

    span {
      background: none;
      padding: 0;
    }

    &:focus {
      @extend %extend_24;
    }

    &:active {
      @extend %extend_24;
    }

    &:hover {
      background-color: $color_action;
    }

    &.disabled {
      @extend %extend_25;

      span {
        background: none;
      }
    }
  }

  &.back {
    background: none;

    span {
      background: none;
      padding: 0;
    }

    &:before {
      content: "«";
      padding-right: 4px;
    }
  }

  &:focus {
    @extend %extend_21;
  }

  &:active {
    @extend %extend_21;
  }

  &:hover {
    background: $color_gray_approx;
  }

  &.disabled {
    @extend %extend_22;
    background: $color_gray_approx;

    &:hover {
      background: $color_gray_approx;
    }

    &:active {
      background: $color_gray_approx;
    }
  }

  &.save[disabled] {
    @extend %extend_25;
  }

  &.add[disabled] {
    @extend %extend_25;
  }

  &.ok_button[disabled] {
    @extend %extend_25;
  }

  &.fail {
    background: $color_cinnabar_approx;
    color: $white;
    padding: 0 13px;

    &:hover {
      background: $color_coral_red_approx;
    }
  }

  &.cancel_button {
    background: $color_cinnabar_approx;
    color: $white;
    padding: 0 13px;

    &:hover {
      background: $color_coral_red_approx;
    }
  }

  &.icon-btn {
    width: auto !important;

    span {
      text-indent: 0;
      width: auto;
      display: inline;
    }
  }

  &.large {
    font-size: 22px;
    padding: 14px 22px 16px;
  }

  &.add-image span {
    background: none;
    padding: 0;
  }

  &.add-widget span {
    background: none;
    padding: 0;
  }

  &.go span {
    background: none;
    padding: 0;
  }

  &.add-variable span {
    background: none;
    padding: 0;
  }
}

.form-button {
  @extend %extend_20;

  &:focus {
    @extend %extend_21;
  }

  &:active {
    @extend %extend_21;
  }

  &:hover {
    background: $color_gray_approx;
  }

  &.disabled {
    @extend %extend_22;
  }

  &.ok_button {
    @extend %extend_23;

    &:focus {
      @extend %extend_24;
    }

    &:active {
      @extend %extend_24;
    }

    &:hover {
      background-color: $color_action;
    }
  }

  &.large {
    font-size: 22px;
    padding: 14px 22px 16px;
  }
}

button[disabled] {
  @extend %extend_22;
}

.field-100 {
  background: none;
  border: 0;
  padding: 0;

  textarea {
    @extend %extend_26;
  }

  input.input-text {
    @extend %extend_26;
  }
}

.form-list td {
  &.label {
    @extend %extend_19;

    label {
      padding: 5px 15px 0 0;
      @extend %extend_19;
    }
  }

  &.scope-label {
    color: $color_martini_approx;
    font-size: 11px;
  }

  &.value {
    padding-left: 0 !important;

    textarea {
      width: 324px;
    }

    select {
      width: 330px;
    }

    p.note {
      color: $color_dorado_approx;
      font-size: 11px;
      font-weight: 400;
    }

    input.input-text {
      width: 324px;
    }
  }
}

.form-button[disabled] fieldset[disabled] button {
  @extend %extend_22;
}

fieldset[disabled] button {
  &.save {
    @extend %extend_25;
  }

  &.add {
    @extend %extend_25;
  }

  &.ok_button {
    @extend %extend_25;
  }
}

.input-text.large {
  padding: 12px 12px 14px;
  font-size: 18px;
}