form {
  .contextual &{
    display: inline-block;
  }
  &.fileover{
    position: relative;
    &:before{
      content: '';
      position: absolute;
      top: 10px;
      right: 10px;
      bottom: 10px;
      left: 10px;
      border: 2px dashed $color-important;
    }
  }
}
.form{
  padding: 0 $box-padding;
  margin: 0 (-$box-padding);
  &-box{
    @extend %form-box;
  }
}
fieldset {
  //@extend %form-box;
  margin-bottom: $gap;
  border: none;
  border-top: 1px solid $color-border-minor !important;
  margin: 0 (-$box-padding) !important;
  padding: $box-padding !important;
  position: relative;
  &.notop{
    padding-top: 0 !important;
    border-top: none !important;
  }
  &.box{
   @extend %reset-box;
  }
  form > &{
    &:first-child{
      margin-top: (-$box-padding - 1);
    }
  }
  .splitcontent &{
    margin: 0 !important;
    padding: $box-padding 0 !important;
  }
  & &{
    border-bottom: 1px solid $color-border-minor !important;
    margin-bottom: $gap !important;
  }
  &.collapsible {
    border-width: 1px 0 0 0;
    position: relative;
    &.collapsed{
      padding-bottom: 0;
      &>legend{
        &:after{
          @extend %rotate-90cw;
        }
      }
    }
    & > div{
      display: table;
      table-layout: fixed;
      width: 100%;
    }
    &>legend{
      .nested-fields &{
        padding-left: 0.25*$tabular-offset;
      }
      &.icon{
        &:before{
          margin-right: 0.5*$gap;
        }
      }
      @extend %pseudo-after;
      position: static;
      &:hover{
        cursor: pointer;
      }
      &:after{
        @include icon(arrow);
        @extend %button-icon;
        @extend %rotate-90ccw;
        background: $color-uberlight;
        border: 1px solid $color-border-minor;
        right: $box-padding;
        top: 0;
        @at-root {
          @-moz-document url-prefix() {
            & {
              top: -$box-padding !important;
            }
          }
        }
        @include small;

        .splitcontent &{
          right: 0;
        }
      }
      &.icon{
        &:after{
          .splitcontent &{
            right: $box-padding;
          }
        }
      }
    }
  }

  &#date-range p {
    margin: 2px 0 2px 0;
  }
}

// Groups of fields with labels on top (legends)
legend {
  // Small
  font-weight: bold;
  padding: 0 $gap;
  margin-left: -$gap;
  small {
	font-size: $font-small;
  }
  &.button{
    text-align: inherit;
  }
  a{
    &.icon{
      @extend %button-link;
      @extend %tooltip-left;
      &:before{
        background: $color-foreground;
        border: 1px solid $color-border-minor;
      }
    }
  }
  .legend-actions{
    font-size: $font-size;
    position: absolute;
    right: 4*$box-padding;
    top: 0;
    label{
      background: $color-foreground;
      border: 1px solid $color-border-minor;
      font-weight: normal;
      padding-left: $gap;
      margin: 0 $gap;
    }
    select{
      @extend %box-shadow-none;
      border: none;
      margin-top: -1px;
      line-height: 16px;
      height: 18px;
    }
  }
}

[disabled]{
  opacity: 0.5;
}

// Set font for forms
label,
input,
button,
select,
textarea {
  //#font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
}
input,
button,
select,
textarea {
  //font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
}

label{
  //display: block;
  @include small;
  input + &{
    display: inline-block;
  }
  &.required{
    color: $color-negative;
  }
  &.checkbox, &.radio{
    //white-space: nowrap;
    padding: (0.5*$gap + 1) 0;
    text-overflow: ellipsis;
    overflow: hidden;

    input[type=checkbox], input[type=radio]{
      float: left;
    }

    select, input[type=text]{
      @extend %input-inline;
    }

    br{
      & + select, & + input[type=text]{
        margin-left: $box-padding + 0.5*$gap;
        &.normalize{
          width: 80%;
          width: calc(100% - #{$box-padding + 0.5*$gap});
          max-width: $form-input-max-width - ($box-padding + 0.5*$gap);
        }
      }
    }
  }
  &.inline{
    display: inline-block !important;
    //float: left; //breaks sefault redmine labels (inputs not wrapped in them)
    margin-right: 0.5*$gap !important;
    overflow: initial;
  }
  &.block{
    display: block !important;
    white-space: normal;
  }
}

// Form controls
// -------------------------

// Shared size and type resets
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input,
.easy-lookup-values-wrapper{
  @extend %form-field;
  @include respond-to(max-small-screen){
    min-width: 6*$box-padding + 6;
    min-height: 1.5*$box-padding !important;
    margin-left: 0 !important;
  }
}
select{
  @extend %form-select;
  optgroup{
    padding-top: 0.5*$gap;
  }
}
.easy-lookup{
  &-values{
    display: block;
    //line-height: $tab-height - 7;
    &-wrapper{
      min-height: $tab-height !important;
      padding-left: 3px;
      padding-right: 3px;
    }
    .icon-del{
      color: darken(mix($color-background, $color-foreground), 20%);
      &:hover{
        color: darken(mix($color-background, $color-foreground), 30%);
      }
    }
  }
  &-selected-value{
    &-wrapper{
      border: 1px solid $color-border;
      background: mix($color-background, $color-foreground);
      padding: 0.4*$gap 0.8*$gap;
      display: inline-block;
      line-height: 1;
      @extend %border-radius-small;
      @include small;
    }
  }
  &-modal-selector-container{
    //padding-bottom: 3*$box-padding;
    padding-bottom: 0;
    & > .modal-selected-values{
      position: fixed;
      bottom: 2*$box-padding + 10;
      @include respond-to(max-small-screen){
        bottom: 3.5*$box-padding;
      }
      @include respond-to(max-xsmall-screen){
        bottom: 5*$box-padding + 0.75*$gap;
      }
      right: 0;
      left: 0;
      padding: $gap;
      border-top: 1px solid $color-border;
      background: mix($color-foreground,$color-background);
      display: block;
      text-align: center;
    }
  }
}
.easy-icon-select{
  @extend %material-icon;
  font-family: 'Material Icons','EasyIcons' !important;
  overflow: hidden !important;
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
  margin: $gap 0.5*$gap;
  //*margin-top: 0; /* IE7 */ // todo: muze jebat print
  //margin-top: 1px \9; /* IE8-9 */ // todo: muze jebat print
  line-height: normal;
  label &{
    margin: 0.3*$gap;
  }
}

textarea{
  max-width: 100%;
  padding: 0.5*$gap;
  line-height: $base-line-height;
  height: auto;
  table.list &{
    resize:vertical;
  }
  p &{
    max-width: $form-input-max-width;
    &.wiki-edit{
      max-width: 100%;
    }
  }
}

// DISABLED STATE
// --------------

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

// Explicitly reset the colors here
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
  background-color: transparent;
}

.input{
  &--rounded{
    @extend %input--rounded;
  }
  &-append{
    width: 100%;
    max-width: $form-input-max-width;
    @include display(inline-flex !important);
    @extend %align-items-center;

    .new-issue-custom-field & {
      @extend %flex-wrap-wrap;
    }

    & > input,& > select, & > .timerange{
      width: 80%; /* fallback if needed */
      width: calc(100% - #{1.5*$box-padding});

      @include respond-to(max-small-screen) {
        flex: 1;
      }
    }

    & > span {
      @include respond-to(max-small-screen) {
        flex: 0;
      }
    }
    & > input[type="radio"], > input.inline{
      width: auto;
    }
    &.inline{
      display: inline-flex;
      max-width: initial;
      width: auto;
    }

    input[type="radio"], input[type="checkbox"]{
      margin-top: .5*$gap - 1;
      margin-bottom: .5*$gap - 1;
    }
    //& > input, & > select{
    //  @extend %input-append;
    //}
    &__addon{
      @extend %button-append;
      width: auto !important;
    }
    & > a {
      @extend %button-append;
      @extend %tooltip-left;
    }
    & > button{
      @extend %button-append;
      font-weight: normal;
    }
    & > span{
      padding: 0 .5*$gap;
      line-height: $tab-height - 2;
      //border: 1px solid $color-border;
      //background: mix($color-background, $color-foreground);
    }
    & > input, & > select,& > button,& > a, &>span{
      margin-left: -1px;
      input[type="radio"] + &{
        margin-top: -1 - .5*$gap;
      }
      &:last-child{
        @include border-radius(0 $border-radius $border-radius 0);
      }
      &:first-child{
        margin-left: 0;
        @include border-radius($border-radius 0 0 $border-radius);
      }
    }
    //& > input, & > select,& > button,& > a{
    //  & ~ input, & ~ select, & ~ button,& ~ a{
    //    margin-left: -1px;
    //  }
    //}
    &.easy-autocomplete-tag{
      button{
        right: 1.5*$box-padding + 1;
      }
    }
    & > button {
      min-width: 1.5*$box-padding + 4;
      //max-width: 1.5*$box-padding + 4;
    }
    & > select {
      min-width: 2*$box-padding - 4;
      //max-width: 2*$box-padding - 4;
    }
    & > .date {
      min-width: 3*$box-padding + $gap + 4;
    }
  }
}
input{
  &.autocomplete{
    background-image: url(/images/magnifier.png);
    padding-left: $box-padding;
    background-repeat: no-repeat;
    background-position: 3px center;
  }
}
.disabled,*:disabled{
  opacity: 0.5;
  cursor: default;
}
//.timerange{
//  @extend %button-base;
//  padding: 0 .5*$gap;
//  height: $tab-height - 2;
//  line-height: $tab-height - 2;
//  input, select{
//    margin: -2px 0.5*$gap 0;
//    @extend %input-inline;
//  }
//  button{
//    margin-right: 0.5*$gap;
//  }
//}
input[type="checkbox"], input[type="radio"] {
  border: none;
}

.attribute{
  position: relative;
}

%cke-reset{
  background: transparent !important;
  @extend %box-shadow-none;
  border: none !important;
}
.cke,#cke{ //editor
  //margin-bottom: $gap !important;
  &_chrome,&_top,&_bottom,&_toolgroup,&_inner{
    @extend %cke-reset;
  }
  &_chrome{
    //border-top: 1px solid $color-border !important;
  }
  &_top{
    //border-bottom: 1px solid $color-border-minor !important;
  }
  &_bottom{
    //border-top: 1px solid $color-border-minor !important;
    position: absolute !important;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  &_reset{
    max-width: 100%;
  }
  &_inner{
    position: relative !important;
  }
  &_contents{
    border: 1px solid $color-border !important;
    @extend %box-shadow-input-inset;
    background: $color-foreground !important;
    padding-bottom: 26px !important;
  }
  &_wysiwyg_frame, &_wysiwyg_div{
    background: none !important;
  }
  &_wysiwyg_frame{

  }
}

.jst{
  &Editor{
    margin-bottom: $gap;
  }
}

.easy-autocomplete-tag{
  @extend %form-field;
  overflow: visible;
  padding: 0;
  border: none;
  @extend %box-shadow-none;
  & > input{
    //margin-top: -1px;
    @extend %form-select-arrow;
    @extend %input-block;
  }
  &:hover{
    & > input{
      @extend %form-select-arrow-hover;
    }
  }
  &.block{
    & > input{
      @extend %input-block;
    }
  }
  &>button{
	position: absolute;
	right: 1px;
	top: 0px;
	bottom: 0px;
	font-size: $font-size;
	line-height: 2.25;
	margin: 0;
	padding: 0;
	display: block;
	background: none !important;
	border: none !important;
    width: 18px;
    &>span{
      display: none !important;
    }

	//&:after{
	//  @include icon(arrow);
     // position: absolute;
     // top: 0;
     // left: 0;
     // right: 0;
     // bottom: 0;
     // text-align: center;
     // @extend %rotate-90cw;
	//}
	span{
	  //display: none;
	}
  }
}

select{
  &.select-color{
    option{
      border: 1px solid;
      @extend %palette-background;
    }
  }
  &.select-small{
    min-width: 50px;
  }
}

.form-actions{
  @extend %form-actions;
  [class*='button']{
    @extend %button-large;
    margin-bottom: 0 !important;
    vertical-align: middle;
  }
}

.help{
  font-family: $font-family;
  @include box-sizing(border-box);
  padding: 0.5*$gap;
  margin: 0.25*$gap 0;
  display: inline-block;
  @include small;
  opacity: .8;
  min-height: $tab-height - $gap - 2;
  vertical-align: middle;
  position: relative;
  background: none;
  //border-left: 3px solid $color-notice;
  //@include icon-parent(before,help);
  //&:before{
  //  color: $color-notice;
  //  margin-right: 0.5*$gap;
  //}
  :hover{
    opacity: 1;
  }
  &-block{ // todo deprecated
    @extend %flash-info;
    padding: $gap;
    display: block;
    margin-top: $gap;
    @include small;
    &:before{
      display: none;
    }
  }
}

@import "forms-attachments";
@import "forms-tabular";