.form-item {
  display: block;
  overflow-y: hidden;
  transition: max-height 0.6s ease-out;

  @extend .clearfix;
}

.form-item > p {
  padding: 12px;
}

.form-item--half-size {
  position: relative;
  float: left;
  width: 50%;

  .form-group {
    border-top: none !important;
  }
}

.form-item--full-size {
  position: relative;
  clear: both;
  width: 100%;
}

.form-item--main-actions {
  a {
    float: right;
    margin-left: 8px;
  }
}

.form-item--new {
  position: absolute;
  top: 101%;
  max-height: 0;
}

.form-item--select-input {
  display: inline-block;
  width: 240px;
  margin-left: 5%;
}

.form-item--textarea {
  display: inline-block;
  width: 70%;
  margin-left: 5%;
}

.form-item--category {
  margin-bottom: 20px;
  padding-bottom: 20px;

  input[type="submit"] {
    float: left;
    width: 20%;
  }

  .form-group {
    float: left;
    width: 70%;
    margin: 0;
    margin-right: 10%;
  }
}

.form-item--toggle-button {
  cursor: pointer;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}

.form-item--toggle-button-closed {
  transform: rotate(180deg);
}

.form-item--editor {
  overflow-y: hidden;
  // max-height: is set via javascript in app/assets/javscripts/components/form_item_editor.js;
  // default is 0
  max-height: 0;
  transition: max-height 0.6s ease-out;
}

.form-item--repeater {
  overflow-y: hidden;
  // inherit transitions from sortable and add max-height
  transition: box-shadow 0.3s ease, transform 0.3s ease,
    max-height 0.6s ease-out !important;
}

.standard-form--container .form-item--repeater .control-label {
  @extend .p;
}

.form-item--repeater-fields {
  overflow-y: hidden;
  transition: all 0.6s ease;
}

.font-item--collapsed .form-item--repeater-fields {
  margin-bottom: 8px;
}

.form-item--repeater-section {
  overflow-x: hidden; // This ensure that the div doesn't become wider when draggin sortable items to the right
  margin-bottom: 0;

  ul.sortable > li {
    margin-top: -1px; // this solve the issue of a 2px border between 2 repeaters
    border: 1px solid $color-gray-lighter;
  }

  ul.sortable > li > * {
    display: block;
  }

  ul.sortable {
    margin-bottom: 0;
  }

  .ui-sortable-handle:hover {
    background-color: transparent;
  }

  .sortable--toggle-text:first-child {
    display: none;
  }

  .sortable--toggle {
    float: right;
    margin: 0;
  }

  .sortable--enabled {
    .form-item--repeater-fields {
      margin: 0;
      padding: 0;
    }
  }

  .form-item--new {
    position: absolute;
    top: 101%;
    max-height: 0;
  }
}

.form-item--repeater-section--add-new {
  float: right;
  margin-right: 8px;
}

.form-item--repeater-title {
  display: block;
  margin-bottom: 20px;
}

.form-item--header {
  padding: 4px;
  background-color: $color-gray-lightest !important;

  p {
    margin-top: 8px;
    margin-left: 8px;
  }
}

.form-item--collapse-btn,
.form-item--delete-repeater-item,
.form-item--edit-item {
  float: right;
  margin-top: 8px;
  margin-right: 8px;
}

a.form-item--delete-repeater-item {
  cursor: pointer;
  transition: color 0.2s ease;
  color: $color-danger;

  &:hover {
    color: $color-danger-hover;
  }
}

.form-item--collapse-btn {
  span:first-child {
    display: block;
  }
  span:last-child {
    display: none;
  }
}

.form-item--collapsed .form-item--collapse-btn {
  span:first-child {
    display: none;
  }
  span:last-child {
    display: block;
  }
}