@use "../../../variables/index" as *;


/**
 * c8y schema form - Component styles
 *
 * Note: Uses $size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
c8y-schema-form.widget {
  padding-top: $size-16;

  // Note: list-group() mixin doesn't exist, removed during LESS to SCSS migration
  // @include list-group();
  bootstrap-decorator,
  sf-decorator {
    display: block;
    margin-bottom: 0;
    .form-group,
    .legend,
    .help-block {
      padding-right: $size-16;
      padding-left: $size-16;
    }
    .form-group {
      margin-bottom: -1px;
      padding: 3px $size-16 $size-20;

      .form-control[disabled],
      .form-control[readonly],
      fieldset[disabled] .form-control {
        color: $text-color;
      }
    }
  }
  bootstrap-decorator + ng-form {
    display: block;
    margin-bottom: 0; //.list-group-item();
    > .form-group {
      margin-bottom: 0;
      padding: 3px $size-16 $size-20;
      .form-control[disabled],
      .form-control[readonly],
      fieldset[disabled] .form-control {
        color: $text-color;
      }
    }
  }
  bootstrap-decorator {
    .legend {
      margin-top: $size-20;
      margin-bottom: $size-8;
    }
  }
  sf-decorator {
    .legend {
      margin-top: 0;
      margin-bottom: 7px;
      padding-top: 8px;
      background-color: $component-background-default;
      color: $form-label-color;
      &.form-block {
        &::after {
          display: none;
        }
      }
    }
  }

  &.form-read-only {
    sf-decorator,
    bootstrap-decorator {
      min-height: 0;
      height: auto;
    }
    .form-group {
      display: flex;
      align-items: center;
      flex-flow: row wrap;
      padding: 3px $size-16;
      label {
        flex: 1 0 30%;
        margin: 0 $size-8 0 0;
        line-height: 1.3;
        align-self: flex-start;
      }
      label + div,
      .form-control,
      .text-pre-wrap {
        flex: 1 1 60%;
        padding: 0 !important;
        height: auto;
        background-color: transparent;
        text-overflow: ellipsis;
        .dashboard & {
          color: inherit;
        }
      }
      .help-block {
        margin: 0;
        width: 100%;
      }

      &.datepicker {
        padding: 0;
        .form-control {
          cursor: not-allowed;
          pointer-events: none;
        }
        [uib-datepicker-popup-wrap] {
          display: none;
        }
      }
      &.timepicker {
        padding: 0;
        .form-group.uib-time {
          padding: 0;
          .form-control {
            width: $size-20;
            cursor: not-allowed;
            pointer-events: none;
          }
        }
      }
    }
    .schema-form-checkbox {
      padding: 0 0 $size-16 16px !important;
    }
    .schema-form-textarea {
      padding: $size-16;
    }
    .c8y-schema-form-empty {
      display: none;
    }
  }
  bootstrap-decorator > fieldset > sf-decorator:last-child {
    padding-bottom: 0;
    border-bottom: 0;
    & .schema-form-checkbox {
      padding: 0 0 $size-16 16px !important;
    }
  }
}

c8y-schema-form.generic-ui {
  .form-group {
    margin-bottom: 0;
    .help-block {
      margin: 0;
    }
  }
  .c8y-checkbox {
    display: flex;
    input + span {
      margin-right: $size-base;
    }
  }

  // Removed unused label utility - verified 0 usages: .no-label
}

.schema-form-grid {
  display: grid;
  margin: 0 -1rem;
  > div,
  > div > ng-form {
    display: contents;
  }
  bootstrap-decorator {
    padding: 0 1rem;
  }

  bootstrap-decorator:first-child:last-child {
    display: contents;
    padding: 0;
    > fieldset {
      display: contents;
    }
    sf-decorator {
      padding: 0 1rem;
    }
  }
}

.schema-form-checkbox {
  padding-bottom: $size-base;
}
