.#{$iot-prefix}--card-edit-form {
  height: 100%;
  background: $ui-01;
  display: flex;
  flex-direction: column;

  .#{$prefix}--tab-content {
    flex: 1;
  }

  // give the tabs the full space available in the editor column
  .#{$prefix}--tabs--scrollable__nav {
    width: 100%;

    // stretch each tabe to evenly fill the space
    .#{$prefix}--tabs--scrollable__nav-item {
      flex: 1;

      // overfide width on buttons within tabs, so they don't
      // have a width of 10rem, and fill space evently.
      .#{$prefix}--tabs--scrollable__nav-link {
        width: auto;
        flex: 1;
      }
    }
  }

  .#{$prefix}--file__selected-file {
    background-color: $ui-02;
  }

  .color-picker {
    .color-picker-button {
      // need to leave just enough room for the selected border
      width: 1.95rem;
      height: 1.95rem;
      border: solid $spacing-01 $ui-01;
    }

    .color-picker-button__selected {
      border: solid $spacing-01 $interactive-04;
    }
  }

  &--content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-flow: column;
  }

  &--form-section {
    padding: $spacing-03 $spacing-05;
    @include type-style('productive-heading-01');
    border-top: solid 1px $ui-03;
    border-bottom: solid 1px $ui-03;
    margin-left: -$spacing-05;
    margin-right: -$spacing-05;
    margin-bottom: $spacing-05;
    display: flex;
    justify-content: space-between;
  }

  &--input-label {
    font-size: $spacing-04;
  }

  &--input {
    padding-bottom: $spacing-05;
    .#{$prefix}--fieldset {
      margin-bottom: unset;
    }

    &--label {
      font-size: $spacing-04;
    }
    &--toggle-field {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .#{$prefix}--form-item {
        flex: 0;
      }
      .#{$prefix}--toggle-input__label .#{$prefix}--toggle__switch {
        margin-top: 0;
      }
    }
  }
  &--input-inline {
    padding: 0 $spacing-05 $spacing-05;
    display: flex;
    align-items: center;
    &--label {
      flex: 1;
    }
    .#{$prefix}--form-item {
      flex: 0;
    }
    .#{$prefix}--toggle-input__label .#{$prefix}--toggle__switch {
      margin-top: 0;
    }
  }
  &--modal-wrapper {
    .#{$prefix}--number,
    input[type='number'] {
      min-width: unset;
    }
    .iot--table-container .addons-iot-table-container {
      overflow: visible;
    }
    .bx--data-table-content {
      overflow: visible;
    }
  }
  &--input-group {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding-bottom: $spacing-05;
    &--bottom {
      align-items: flex-end;
    }
    &--item {
      .#{$iot-prefix}--color-dropdown {
        margin-bottom: 1.25rem;
      }
      margin-right: $spacing-05;
      width: 100%;
    }
    &--item-half {
      display: flex;
      flex-direction: column;
      margin-right: $spacing-05;
      width: 50%;
      &-label {
        margin-bottom: $spacing-05;
      }
      &-content {
        margin-bottom: 0.6rem;
      }
      &-no-helper-text {
        margin-bottom: 1.25rem;
      }
    }
    &--item-end {
      width: 100%;
    }
    &--item-dropdown {
      margin-right: $spacing-05;
      max-width: 5rem;
    }

    &--span {
      font-size: $spacing-04;
    }
  }
  &--threshold-input-group {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    &--item {
      margin-right: $spacing-05;
      width: 100%;
    }
    &--item-half {
      margin-right: $spacing-05;
      width: 50%;
    }
    &--item-end {
      width: 100%;

      .#{$prefix}--number input[type='number'] {
        padding-right: 0;
      }
      .#{$prefix}--form-item input[type='text'] {
        min-width: 9.375rem;
      }
    }
    &--item-dropdown {
      margin-right: $spacing-05;
      max-width: 5rem;
    }
  }

  &--footer {
    border-top: solid 1px $ui-03;
    & > button {
      justify-content: space-between;
      width: 100%;
    }
  }
  .#{$prefix}--modal-container--xs {
    max-height: none;
    min-width: 30rem;
  }
  .#{$iot-prefix}--combobox {
    padding-top: 0;
  }
  .#{$iot-prefix}--combobox-tags {
    // hide multi-select combobox tags in editor form
    display: none;
  }
}

// Table card form styles
.#{$iot-prefix}--table-card-form--content {
  display: flex;
  flex-flow: column;
}

// Image card form styles
.#{$iot-prefix}--card-edit-form--form-section-image {
  .#{$prefix}--fieldset {
    margin-bottom: 0;
  }

  &--input {
    margin-bottom: $spacing-05;
    position: relative;
  }

  &-btn {
    width: 100%;
  }
  &-clear-button {
    position: absolute;
    right: 0;
    top: 1.25rem;
    color: $ui-05;
    background-color: $ui-02;
    &:hover,
    &:active {
      color: $ui-05;
    }
    border: 0;
    min-height: 2rem;
    > svg.#{$prefix}--btn__icon {
      margin-left: 0;
    }
  }

  .#{$prefix}--slider {
    min-width: 4.5rem;
  }
}

div.#{$iot-prefix}--card-edit-form--data-item-list {
  // remove the spacing
  margin-left: -$spacing-05;
  margin-right: -$spacing-05;
  width: unset;

  // add more spacing to the item so that the content will still align
  .#{$iot-prefix}--list-item {
    padding-left: $spacing-05;
  }
  &--item-color-icon {
    width: $spacing-05;
    height: $spacing-05;
    background-color: var(--icon-color-option);
  }

  .#{$iot-prefix}--list-item--content--values--value__with-actions {
    // need to make room for 2 actions
    padding-right: $layout-05;
  }
}