.form-item {
  display: block;
  overflow-y: hidden;
  @extend .clearfix;
}

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

.form-item--half-size {
  // OLD SOLUTION (nicer, but can't be used with max-height=0 and overflow-y=hidden)
  // position: relative;
  // float: left;
  // width: 50%;

  // NEW SOLUTION (not very nice but plays nicely with max-height=0 and overflow-y=hidden)
  display: inline-block;
  width: calc(
    50% - 3px
  ); // 5px are for the weird issue caused by non-blank space around the inline-block elements

  .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--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--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;
}

.form-item--collapsable {
  transition: box-shadow 0.3s ease, transform 0.3s ease,
    max-height 0.6s ease-out !important;
}

.form-item--collapsable-stack {
  transition: box-shadow 0.3s ease, transform 0.3s ease,
    max-height 0.6s ease-out !important;
}

.font-item--collapsed .form-item--collapsable-stack {
  margin-bottom: 8px;
}

.form--add-list-item {
  float: right;
  margin-right: 8px;
}

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

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

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

a.form--delete-list-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;
  }
}