@import '../../themes/default/collections/form.variables';

@if $use-form {
  /*--------------------
  //@-     Form
  ---------------------*/

  .ui.form {
    position: relative;
    max-width: 100%;
  }

  /*--------------------
          Content
  ---------------------*/

  .ui.form > p {
    margin: $form-paragraph-margin;
  }

  /*--------------------
          Field
  ---------------------*/

  .ui.form .field {
    clear: both;
    margin: $form-field-margin;
  }

  .ui.form .field:last-child,
  .ui.form .fields:last-child .field {
    margin-bottom: 0;
  }

  .ui.form .fields .field {
    clear: both;
    margin: 0;
  }


  /*--------------------
          Labels
  ---------------------*/

  .ui.form .field > label {
    display: block;
    margin: $form-label-margin;
    color: $form-label-color;
    font-size: $form-label-font-size;
    font-weight: $form-label-font-weight;
    text-transform: $form-label-text-transform;
  }

  /*--------------------
      Standard Inputs
  ---------------------*/


  .ui.form textarea,
  .ui.form input:not([type]),
  .ui.form input[type="date"],
  .ui.form input[type="datetime-local"],
  .ui.form input[type="email"],
  .ui.form input[type="number"],
  .ui.form input[type="password"],
  .ui.form input[type="search"],
  .ui.form input[type="tel"],
  .ui.form input[type="time"],
  .ui.form input[type="text"],
  .ui.form input[type="file"],
  .ui.form input[type="url"] {
    width: $form-input-width;
    vertical-align: top;
  }

  /* Set max height on unusual input */
  .ui.form ::-webkit-datetime-edit,
  .ui.form ::-webkit-inner-spin-button {
    height: $input-line-height;
  }

  .ui.form input:not([type]),
  .ui.form input[type="date"],
  .ui.form input[type="datetime-local"],
  .ui.form input[type="email"],
  .ui.form input[type="number"],
  .ui.form input[type="password"],
  .ui.form input[type="search"],
  .ui.form input[type="tel"],
  .ui.form input[type="time"],
  .ui.form input[type="text"],
  .ui.form input[type="file"],
  .ui.form input[type="url"] {
    font-family: $form-input-font;
    margin: 0;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);

    line-height: $input-line-height;
    padding: $form-input-padding;
    font-size: $form-input-font-size;

    background: $input-background;
    border: $form-input-border;
    color: $form-input-color;
    border-radius: $form-input-border-radius;
    box-shadow: $form-input-box-shadow;
    transition: $form-input-transition;
  }

  /* Text Area */
  .ui.input textarea,
  .ui.form textarea {
    margin: 0;
    -webkit-appearance: none;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);

    padding: $form-text-area-padding;
    background: $form-text-area-background;
    border: $form-text-area-border;
    outline: none;
    color: $form-input-color;
    border-radius: $form-input-border-radius;
    box-shadow: $form-input-box-shadow;
    transition: $form-text-area-transition;
    font-size: $form-text-area-font-size;
    font-family: $form-input-font;
    line-height: $form-text-area-line-height;
    resize: $form-text-area-resize;
  }
  .ui.form textarea:not([rows]) {
    height: $form-text-area-height;
    min-height: $form-text-area-min-height;
    max-height: $form-text-area-max-height;
  }

  .ui.form textarea,
  .ui.form input[type="checkbox"] {
    vertical-align: $form-checkbox-vertical-align;
  }

  /*--------------------
      Checkbox margin
  ---------------------*/

  .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox {
    margin-top: $form-checkbox-label-field-top-margin;
  }
  .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox {
    margin-top: $input-line-height + $form-checkbox-field-top-margin;
  }
  .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox {
    margin-top: $input-line-height + $form-checkbox-toggle-field-top-margin;
  }
  .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox {
    margin-top: $input-line-height + $form-checkbox-slider-field-top-margin;
  }
  .ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
    margin-top: $form-checkbox-field-top-margin / 2;
  }
  .ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox {
    margin-top: $form-checkbox-toggle-field-top-margin / 2;
  }
  .ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox {
    margin-top: $form-checkbox-slider-field-top-margin / 2;
  }

  /*--------------------
        Transparent
  ---------------------*/

  .ui.form .field .transparent.input:not(.icon) input,
  .ui.form .field input.transparent,
  .ui.form .field textarea.transparent {
    padding: $form-transparent-padding;
  }

  .ui.form .field input.transparent,
  .ui.form .field textarea.transparent {
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  .ui.form .field.error .transparent.input input,
  .ui.form .field.error .transparent.input textarea,
  .ui.form .field.error input.transparent,
  .ui.form .field.error textarea.transparent {
    background-color: $form-transparent-error-background !important;
    color: $form-transparent-error-color !important;
  }

  /*--------------------------
    Input w/ attached Button
  ---------------------------*/

  .ui.form input.attached {
    width: auto;
  }


  /*--------------------
      Basic Select
  ---------------------*/

  .ui.form select {
    display: block;
    height: auto;
    width: 100%;
    background: $form-select-background;
    border: $form-select-border;
    border-radius: $form-select-border-radius;
    box-shadow: $form-select-box-shadow;
    padding: $form-select-padding;
    color: $form-select-color;
    transition: $form-select-transition;
  }

  /*--------------------
        Dropdown
  ---------------------*/

  /* Block */
  .ui.form .field > .selection.dropdown {
    min-width: auto;
    width: 100%;
  }
  .ui.form .field > .selection.dropdown > .dropdown.icon {
    float: right;
  }

  /* Inline */
  .ui.form .inline.fields .field > .selection.dropdown,
  .ui.form .inline.field > .selection.dropdown {
    width: auto;
  }
  .ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
  .ui.form .inline.field > .selection.dropdown > .dropdown.icon {
    float: none;
  }

  /*--------------------
        UI Input
  ---------------------*/

  /* Block */
  .ui.form .field .ui.input,
  .ui.form .fields .field .ui.input,
  .ui.form .wide.field .ui.input {
    width: 100%;
  }

  /* Inline  */
  .ui.form .inline.fields .field:not(.wide) .ui.input,
  .ui.form .inline.field:not(.wide) .ui.input {
    width: auto;
    vertical-align: middle;
  }

  /* Auto Input */
  .ui.form .fields .field .ui.input input,
  .ui.form .field .ui.input input {
    width: auto;
  }

  /* Full Width Input */
  .ui.form .ten.fields .ui.input input,
  .ui.form .nine.fields .ui.input input,
  .ui.form .eight.fields .ui.input input,
  .ui.form .seven.fields .ui.input input,
  .ui.form .six.fields .ui.input input,
  .ui.form .five.fields .ui.input input,
  .ui.form .four.fields .ui.input input,
  .ui.form .three.fields .ui.input input,
  .ui.form .two.fields .ui.input input,
  .ui.form .wide.field .ui.input input {
    flex: 1 0 auto;
    width: 0;
  }


  /*--------------------
    Types of Messages
  ---------------------*/

  .ui.form .success.message,
  .ui.form .warning.message,
  .ui.form .error.message,
  .ui.form .error.message:empty {
    display: none;
  }

  /* Assumptions */
  .ui.form .message:first-child {
    margin-top: 0;
  }

  /*--------------------
    Validation Prompt
  ---------------------*/

  .ui.form .field .prompt.label {
    white-space: normal;
    background: $form-prompt-background !important;
    border: $form-prompt-border !important;
    color: $form-prompt-text-color !important;
  }
  .ui.form .inline.fields .field .prompt,
  .ui.form .inline.field .prompt {
    vertical-align: top;
    margin: $form-inline-prompt-margin;
  }
  .ui.form .inline.fields .field .prompt:before,
  .ui.form .inline.field .prompt:before {
    border-width: 0 0 $form-inline-prompt-border-width $form-inline-prompt-border-width;
    bottom: auto;
    right: auto;
    top: 50%;
    left: 0;
  }


  /*******************************
              States
  *******************************/

  /*--------------------
        Autofilled
  ---------------------*/

  .ui.form .field.field input:-webkit-autofill {
    box-shadow: 0 0 0 100px $form-input-auto-fill-background inset !important;
    border-color: $form-input-auto-fill-border !important;
  }

  /* Focus */
  .ui.form .field.field input:-webkit-autofill:focus {
    box-shadow: 0 0 0 100px $form-input-auto-fill-focus-background inset !important;
    border-color: $form-input-auto-fill-focus-border !important;
  }

  /* Error */
  .ui.form .error.error input:-webkit-autofill {
    box-shadow: 0 0 0 100px $form-input-auto-fill-error-background inset !important;
    border-color: $form-input-auto-fill-error-border !important;
  }



  /*--------------------
        Placeholder
  ---------------------*/

  /* browsers require these rules separate */
  .ui.form ::-webkit-input-placeholder {
    color: $input-placeholder-color;
  }
  .ui.form :-ms-input-placeholder {
    color: $input-placeholder-color !important;
  }
  .ui.form ::-moz-placeholder {
    color: $input-placeholder-color;
  }

  .ui.form :focus::-webkit-input-placeholder {
    color: $input-placeholder-focus-color;
  }
  .ui.form :focus:-ms-input-placeholder {
    color: $input-placeholder-focus-color !important;
  }
  .ui.form :focus::-moz-placeholder {
    color: $input-placeholder-focus-color;
  }

  /* Error Placeholder */
  .ui.form .error ::-webkit-input-placeholder {
    color: $form-input-error-placeholder-color;
  }
  .ui.form .error :-ms-input-placeholder {
    color: $form-input-error-placeholder-color !important;
  }
  .ui.form .error ::-moz-placeholder {
    color: $form-input-error-placeholder-color;
  }

  .ui.form .error :focus::-webkit-input-placeholder {
    color: $form-input-error-placeholder-focus-color;
  }
  .ui.form .error :focus:-ms-input-placeholder {
    color: $form-input-error-placeholder-focus-color !important;
  }
  .ui.form .error :focus::-moz-placeholder {
    color: $form-input-error-placeholder-focus-color;
  }


  /*--------------------
          Focus
  ---------------------*/

  .ui.form input:not([type]):focus,
  .ui.form input[type="date"]:focus,
  .ui.form input[type="datetime-local"]:focus,
  .ui.form input[type="email"]:focus,
  .ui.form input[type="number"]:focus,
  .ui.form input[type="password"]:focus,
  .ui.form input[type="search"]:focus,
  .ui.form input[type="tel"]:focus,
  .ui.form input[type="time"]:focus,
  .ui.form input[type="text"]:focus,
  .ui.form input[type="file"]:focus,
  .ui.form input[type="url"]:focus {
    color: $form-input-focus-color;
    border-color: $form-input-focus-border-color;
    border-radius: $form-input-focus-border-radius;
    background: $form-input-focus-background;
    box-shadow: $form-input-focus-box-shadow;
  }
  .ui.form textarea:focus {
    color: $form-text-area-focus-color;
    border-color: $form-text-area-focus-border-color;
    border-radius: $form-text-area-focus-border-radius;
    background: $form-text-area-focus-background;
    box-shadow: $form-text-area-focus-box-shadow;
    -webkit-appearance: none;
  }


  /*--------------------
          Success
  ---------------------*/

  /* On Form */
  .ui.form.success .success.message:not(:empty) {
    display: block;
  }
  .ui.form.success .compact.success.message:not(:empty) {
    display: inline-block;
  }
  .ui.form.success .icon.success.message:not(:empty) {
    display: flex;
  }

  /*--------------------
          Warning
  ---------------------*/

  /* On Form */
  .ui.form.warning .warning.message:not(:empty) {
    display: block;
  }
  .ui.form.warning .compact.warning.message:not(:empty) {
    display: inline-block;
  }
  .ui.form.warning .icon.warning.message:not(:empty) {
    display: flex;
  }

  /*--------------------
          Error
  ---------------------*/

  /* On Form */
  .ui.form.error .error.message:not(:empty) {
    display: block;
  }
  .ui.form.error .compact.error.message:not(:empty) {
    display: inline-block;
  }
  .ui.form.error .icon.error.message:not(:empty) {
    display: flex;
  }

  /* On Field(s) */
  .ui.ui.form .fields.error .field label,
  .ui.ui.form .field.error label,
  .ui.ui.form .fields.error .field .input,
  .ui.ui.form .field.error .input {
    color: $form-error-color;
  }

  .ui.form .fields.error .field .corner.label,
  .ui.form .field.error .corner.label {
    border-color: $form-error-color;
    color: $white;
  }

  .ui.form .fields.error .field textarea,
  .ui.form .fields.error .field select,
  .ui.form .fields.error .field input:not([type]),
  .ui.form .fields.error .field input[type="date"],
  .ui.form .fields.error .field input[type="datetime-local"],
  .ui.form .fields.error .field input[type="email"],
  .ui.form .fields.error .field input[type="number"],
  .ui.form .fields.error .field input[type="password"],
  .ui.form .fields.error .field input[type="search"],
  .ui.form .fields.error .field input[type="tel"],
  .ui.form .fields.error .field input[type="time"],
  .ui.form .fields.error .field input[type="text"],
  .ui.form .fields.error .field input[type="file"],
  .ui.form .fields.error .field input[type="url"],
  .ui.form .field.error textarea,
  .ui.form .field.error select,
  .ui.form .field.error input:not([type]),
  .ui.form .field.error input[type="date"],
  .ui.form .field.error input[type="datetime-local"],
  .ui.form .field.error input[type="email"],
  .ui.form .field.error input[type="number"],
  .ui.form .field.error input[type="password"],
  .ui.form .field.error input[type="search"],
  .ui.form .field.error input[type="tel"],
  .ui.form .field.error input[type="time"],
  .ui.form .field.error input[type="text"],
  .ui.form .field.error input[type="file"],
  .ui.form .field.error input[type="url"] {
    background: $form-error-background;
    border-color: $form-error-border;
    color: $form-error-color;
    border-radius: $form-input-error-border-radius;
    box-shadow: $form-input-error-box-shadow;
  }
  .ui.form .field.error textarea:focus,
  .ui.form .field.error select:focus,
  .ui.form .field.error input:not([type]):focus,
  .ui.form .field.error input[type="date"]:focus,
  .ui.form .field.error input[type="datetime-local"]:focus,
  .ui.form .field.error input[type="email"]:focus,
  .ui.form .field.error input[type="number"]:focus,
  .ui.form .field.error input[type="password"]:focus,
  .ui.form .field.error input[type="search"]:focus,
  .ui.form .field.error input[type="tel"]:focus,
  .ui.form .field.error input[type="time"]:focus,
  .ui.form .field.error input[type="text"]:focus,
  .ui.form .field.error input[type="file"]:focus,
  .ui.form .field.error input[type="url"]:focus {
    background: $form-input-error-focus-background;
    border-color: $form-input-error-focus-border;
    color: $form-input-error-focus-color;

    box-shadow: $form-input-error-focus-box-shadow;
  }

  /* Preserve Native Select Stylings */
  .ui.form .field.error select {
    -webkit-appearance: menulist-button;
  }

  /*------------------
      Dropdown Error
  --------------------*/

  .ui.form .fields.error .field .ui.dropdown,
  .ui.form .fields.error .field .ui.dropdown .item,
  .ui.form .field.error .ui.dropdown,
  .ui.form .field.error .ui.dropdown .text,
  .ui.form .field.error .ui.dropdown .item {
    background: $form-error-background;
    color: $form-error-color;
  }
  .ui.form .fields.error .field .ui.dropdown,
  .ui.form .field.error .ui.dropdown {
    border-color: $form-error-border !important;
  }
  .ui.form .fields.error .field .ui.dropdown:hover,
  .ui.form .field.error .ui.dropdown:hover {
    border-color: $form-error-border !important;
  }
  .ui.form .fields.error .field .ui.dropdown:hover .menu,
  .ui.form .field.error .ui.dropdown:hover .menu {
    border-color: $form-error-border;
  }
  .ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,
  .ui.form .field.error .ui.multiple.selection.dropdown > .label {
    background-color: $form-dropdown-error-label-background;
    color: $form-dropdown-error-label-color;
  }

  /* Hover */
  .ui.form .fields.error .field .ui.dropdown .menu .item:hover,
  .ui.form .field.error .ui.dropdown .menu .item:hover {
    background-color: $form-dropdown-error-hover-background;
  }

  /* Selected */
  .ui.form .fields.error .field .ui.dropdown .menu .selected.item,
  .ui.form .field.error .ui.dropdown .menu .selected.item {
    background-color: $form-dropdown-error-selected-background;
  }


  /* Active */
  .ui.form .fields.error .field .ui.dropdown .menu .active.item,
  .ui.form .field.error .ui.dropdown .menu .active.item {
    background-color: $form-dropdown-error-active-background !important;
  }

  /*--------------------
      Checkbox Error
  ---------------------*/

  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
  .ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
  .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
    color: $form-error-color;
  }
  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
  .ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
  .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
  .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
    background: $form-error-background;
    border-color: $form-error-border;
  }
  .ui.form .fields.error .field .checkbox label:after,
  .ui.form .field.error .checkbox label:after,
  .ui.form .fields.error .field .checkbox .box:after,
  .ui.form .field.error .checkbox .box:after {
    color: $form-error-color;
  }

  /*--------------------
        Disabled
  ---------------------*/

  .ui.form .disabled.fields .field,
  .ui.form .disabled.field,
  .ui.form .field :disabled {
    pointer-events: none;
    opacity: $disabled-opacity;
  }
  .ui.form .field.disabled > label,
  .ui.form .fields.disabled > label {
    opacity: $form-disabled-label-opacity;
  }
  .ui.form .field.disabled :disabled {
    opacity: 1;
  }


  /*--------------
      Loading
  ---------------*/

  .ui.loading.form {
    position: relative;
    cursor: default;
    pointer-events: none;
  }
  .ui.loading.form:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background: $form-loader-dimmer-color;
    width: 100%;
    height: 100%;
    z-index: $form-loader-dimmer-z-index;
  }

  .ui.loading.form.segments:before {
    border-radius: $default-border-radius;
  }

  .ui.loading.form:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;

    margin: $loader-margin;
    width: $form-loader-size;
    height: $form-loader-size;

    animation: loader $loader-speed infinite linear;
    border: $loader-line-width solid $loader-line-color;
    border-radius: $circular-radius;

    box-shadow: 0 0 0 1px transparent;
    visibility: visible;
    z-index: $form-loader-line-z-index;
  }

  /*******************************
          Element Types
  *******************************/

  /*--------------------
      Required Field
  ---------------------*/

  .ui.form .required.fields:not(.grouped) > .field > label:after,
  .ui.form .required.fields.grouped > label:after,
  .ui.form .required.field > label:after,
  .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
  .ui.form .required.field > .checkbox:after,
  .ui.form label.required:after {
    margin: $form-required-margin;
    content: $form-required-content;
    color: $form-required-color;
  }

  .ui.form .required.fields:not(.grouped) > .field > label:after,
  .ui.form .required.fields.grouped > label:after,
  .ui.form .required.field > label:after,
  .ui.form label.required:after {
    display: inline-block;
    vertical-align: top;
  }

  .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
  .ui.form .required.field > .checkbox:after {
    position: absolute;
    top: 0;
    left: 100%;
  }


  /*******************************
            Variations
  *******************************/


  /*--------------------
      Inverted Colors
  ---------------------*/

  .ui.inverted.form label,
  .ui.form .inverted.segment label,
  .ui.form .inverted.segment .ui.checkbox label,
  .ui.form .inverted.segment .ui.checkbox .box,
  .ui.inverted.form .ui.checkbox label,
  .ui.inverted.form .ui.checkbox .box,
  .ui.inverted.form .inline.fields > label,
  .ui.inverted.form .inline.fields .field > label,
  .ui.inverted.form .inline.fields .field > p,
  .ui.inverted.form .inline.field > label,
  .ui.inverted.form .inline.field > p {
    color: $form-inverted-label-color;
  }
  .ui.inverted.loading.form {
    color: $inverted-loader-line-color;
  }
  .ui.inverted.loading.form:before {
    background: $form-loader-inverted-dimmer-color;
  }
  /* Inverted Field */
  .ui.inverted.form input:not([type]),
  .ui.inverted.form input[type="date"],
  .ui.inverted.form input[type="datetime-local"],
  .ui.inverted.form input[type="email"],
  .ui.inverted.form input[type="number"],
  .ui.inverted.form input[type="password"],
  .ui.inverted.form input[type="search"],
  .ui.inverted.form input[type="tel"],
  .ui.inverted.form input[type="time"],
  .ui.inverted.form input[type="text"],
  .ui.inverted.form input[type="file"],
  .ui.inverted.form input[type="url"] {
    background: $form-inverted-input-background;
    border-color: $form-inverted-input-border-color;
    color: $form-inverted-input-color;
    box-shadow: $form-inverted-input-box-shadow;
  }

  /*--------------------
      Field Groups
  ---------------------*/

  /* Grouped Vertically */
  .ui.form .grouped.fields {
    display: block;
    margin: $form-grouped-margin;
  }
  .ui.form .grouped.fields:last-child {
    margin-bottom: 0;
  }

  .ui.form .grouped.fields > label {
    margin: $form-grouped-label-margin;
    color: $form-grouped-label-color;
    font-size: $form-grouped-label-font-size;
    font-weight: $form-grouped-label-font-weight;
    text-transform: $form-grouped-label-text-transform;
  }

  .ui.form .grouped.fields .field,
  .ui.form .grouped.inline.fields .field {
    display: block;
    margin: $form-grouped-field-margin;
    padding: 0;
  }

  /*--------------------
          Fields
  ---------------------*/

  /* Split fields */
  .ui.form .fields {
    display: flex;
    flex-direction: row;
    margin: $form-fields-margin;
  }
  .ui.form .fields > .field {
    flex: 0 1 auto;
    padding-left: ($form-gutter-width / 2);
    padding-right: ($form-gutter-width / 2);
  }
  .ui.form .fields > .field:first-child {
    border-left: none;
    box-shadow: none;
  }

  /* Other Combinations */
  .ui.form .two.fields > .fields,
  .ui.form .two.fields > .field {
    width: $two-column;
  }
  .ui.form .three.fields > .fields,
  .ui.form .three.fields > .field {
    width: $three-column;
  }
  .ui.form .four.fields > .fields,
  .ui.form .four.fields > .field {
    width: $four-column;
  }
  .ui.form .five.fields > .fields,
  .ui.form .five.fields > .field {
    width: $five-column;
  }
  .ui.form .six.fields > .fields,
  .ui.form .six.fields > .field {
    width: $six-column;
  }
  .ui.form .seven.fields > .fields,
  .ui.form .seven.fields > .field {
    width: $seven-column;
  }
  .ui.form .eight.fields > .fields,
  .ui.form .eight.fields > .field {
    width: $eight-column;
  }
  .ui.form .nine.fields > .fields,
  .ui.form .nine.fields > .field {
    width: $nine-column;
  }
  .ui.form .ten.fields > .fields,
  .ui.form .ten.fields > .field {
    width: $ten-column;
  }

  /* Swap to full width on mobile */
  @media only screen and (max-width : $largest-mobile-screen) {
    .ui.form .fields {
      flex-wrap: wrap;
    }

    .ui[class*="equal width"].form:not(.unstackable) .fields > .field,
    .ui.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field {
      width: $one-column !important;
      margin: 0 0 $form-row-distance;
    }
  }


  /* Sizing Combinations */
  .ui.form .fields .wide.field {
    width: $one-wide;
    padding-left: ($form-gutter-width / 2);
    padding-right: ($form-gutter-width / 2);
  }

  .ui.form .one.wide.field {
    width: $one-wide !important;
  }
  .ui.form .two.wide.field {
    width: $two-wide !important;
  }
  .ui.form .three.wide.field {
    width: $three-wide !important;
  }
  .ui.form .four.wide.field {
    width: $four-wide !important;
  }
  .ui.form .five.wide.field {
    width: $five-wide !important;
  }
  .ui.form .six.wide.field {
    width: $six-wide !important;
  }
  .ui.form .seven.wide.field {
    width: $seven-wide !important;
  }
  .ui.form .eight.wide.field {
    width: $eight-wide !important;
  }
  .ui.form .nine.wide.field {
    width: $nine-wide !important;
  }
  .ui.form .ten.wide.field {
    width: $ten-wide !important;
  }
  .ui.form .eleven.wide.field {
    width: $eleven-wide !important;
  }
  .ui.form .twelve.wide.field {
    width: $twelve-wide !important;
  }
  .ui.form .thirteen.wide.field {
    width: $thirteen-wide !important;
  }
  .ui.form .fourteen.wide.field {
    width: $fourteen-wide !important;
  }
  .ui.form .fifteen.wide.field {
    width: $fifteen-wide !important;
  }
  .ui.form .sixteen.wide.field {
    width: $sixteen-wide !important;
  }

  /* Swap to full width on mobile */
  @media only screen and (max-width : $largest-mobile-screen) {
    .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,
    .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field,
    .ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field {
      width: $one-column !important;
    }
    .ui.form .fields {
      margin-bottom: 0;
    }
  }

  /*--------------------
      Equal Width
  ---------------------*/

  .ui[class*="equal width"].form .fields > .field,
  .ui.form [class*="equal width"].fields > .field {
    width: 100%;
    flex: 1 1 auto;
  }

  /*--------------------
      Inline Fields
  ---------------------*/

  .ui.form .inline.fields {
    margin: $form-field-margin;
    align-items: center;
  }
  .ui.form .inline.fields .field {
    margin: 0;
    padding: $form-inline-fields-margin;
  }

  /* Inline Label */
  .ui.form .inline.fields > label,
  .ui.form .inline.fields .field > label,
  .ui.form .inline.fields .field > p,
  .ui.form .inline.field > label,
  .ui.form .inline.field > p {
    display: inline-block;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: baseline;
    font-size: $form-inline-label-font-size;
    font-weight: $form-inline-label-font-weight;
    color: $form-inline-label-color;
    text-transform: $form-inline-label-text-transform;
  }

  /* Grouped Inline Label */
  .ui.form .inline.fields > label {
    margin: $form-grouped-inline-label-margin;
  }

  /* Inline Input */
  .ui.form .inline.fields .field > input,
  .ui.form .inline.fields .field > select,
  .ui.form .inline.field > input,
  .ui.form .inline.field > select {
    display: inline-block;
    width: auto;

    margin-top: 0;
    margin-bottom: 0;

    vertical-align: middle;
    font-size: $form-inline-input-size;
  }

  /* Label */
  .ui.form .inline.fields .field > :first-child,
  .ui.form .inline.field > :first-child {
    margin: 0 $form-inline-label-distance 0 0;
  }
  .ui.form .inline.fields .field > :only-child,
  .ui.form .inline.field > :only-child {
    margin: 0;
  }

  /* Wide */
  .ui.form .inline.fields .wide.field {
    display: flex;
    align-items: center;
  }
  .ui.form .inline.fields .wide.field > input,
  .ui.form .inline.fields .wide.field > select {
    width: 100%;
  }


  /*--------------------
          Sizes
  ---------------------*/

  .ui.mini.form {
    font-size: $mini;
  }
  .ui.tiny.form {
    font-size: $tiny;
  }
  .ui.small.form {
    font-size: $small;
  }
  .ui.form {
    font-size: $medium;
  }
  .ui.large.form {
    font-size: $large;
  }
  .ui.big.form {
    font-size: $big;
  }
  .ui.huge.form {
    font-size: $huge;
  }
  .ui.massive.form {
    font-size: $massive;
  }

  /* Dropdown */
  .ui.mini.form .field .dropdown {
    font-size: $mini;
  }
  .ui.tiny.form .field .dropdown {
    font-size: $tiny;
  }
  .ui.small.form .field .dropdown {
    font-size: $small;
  }
  .ui.form .field .dropdown {
    font-size: $medium;
  }
  .ui.large.form .field .dropdown {
    font-size: $large;
  }
  .ui.big.form .field .dropdown {
    font-size: $big;
  }
  .ui.huge.form .field .dropdown {
    font-size: $huge;
  }
  .ui.massive.form .field .dropdown {
    font-size: $massive;
  }

  /* Dropdown Items */
  .ui.mini.form .field .dropdown .menu > .item {
    font-size: $mini;
  }
  .ui.tiny.form .field .dropdown .menu > .item {
    font-size: $tiny;
  }
  .ui.small.form .field .dropdown .menu > .item {
    font-size: $small;
  }
  .ui.form .field .dropdown .menu > .item {
    font-size: $medium;
  }
  .ui.large.form .field .dropdown .menu > .item {
    font-size: $large;
  }
  .ui.big.form .field .dropdown .menu > .item {
    font-size: $big;
  }
  .ui.huge.form .field .dropdown .menu > .item {
    font-size: $huge;
  }
  .ui.massive.form .field .dropdown .menu > .item {
    font-size: $massive;
  }
}

@import '../../themes/default/collections/form.style';