@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/form";
@use "../../base/icon_fonts" as *;
@use "../textEditor/sizes" as *;

// adduse
@use "../scrollable";


.dx-form-group-caption {
  font-size: $material-form-group-caption-font-size;
}

.dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors
  & > .dx-form-group-content {
    border-top: 1px solid $form-group-border-color;
    padding-bottom: $material-form-group-content-padding-bottom;
    padding-top: $material-form-group-caption-bottom-padding;
    margin-top: $material-form-group-caption-bottom-margin;
  }
}

.dx-form {
  > .dx-scrollable-wrapper {
    > .dx-scrollable-container {
      margin-left: -10px;
      padding-left: $material-form-default-padding;
    }
  }
}

.dx-scrollable-content > .dx-layout-manager {
  padding-inline-end: 5px;
}

.dx-layout-manager {
  .dx-field-item {
    &:not(.dx-last-col) {
      padding-inline-end: 20px;
    }

    &:not(.dx-first-col) {
      padding-inline-start: 20px;
    }

    padding-bottom: $material-form-default-padding;
    font-size: $material-form-label-font-size;

    .dx-field-item {
      &.dx-last-row {
        padding-bottom: 0;
      }
    }
  }
}

.dx-form > .dx-layout-manager.dx-layout-manager-one-col {
  .dx-field-item {
    .dx-field-item.dx-last-row:not(.dx-last-col) {
      padding-bottom: $material-form-default-padding;
    }

    .dx-form-group .dx-single-column-item-content > .dx-first-row.dx-col-0.dx-field-item {
      padding-top: 0;
    }

    .dx-box-item:not(:first-child) .dx-single-column-item-content > .dx-field-item {
      padding-top: $material-form-default-padding;
    }
  }
}

.dx-field-item {
  &:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) {
    padding-top: $material-form-default-top-padding;
  }

  .dx-switch {
    vertical-align: middle;
  }

  .dx-toggle-controls-paddings {
    padding-inline-start: $material-filled-texteditor-input-horizontal-padding;
  }
}

.dx-field-item-content-wrapper.dx-invalid {
  .dx-field-item-help-text {
    color: transparent;
  }
}

.dx-field-item-label-location-top {
  padding: $material-form-top-label-padding;
  padding-inline-start: $material-filled-texteditor-input-horizontal-padding;
  padding-inline-end: $material-filled-texteditor-input-horizontal-padding;

  .dx-form-styling-mode-underlined & {
    padding-left: 0;
    padding-right: 0;
  }
}

.dx-field-item-label-text {
  color: $form-field-item-color;
}

.dx-field-item-help-text {
  color: $form-field-item-color;
  padding: 6px $material-filled-texteditor-input-horizontal-padding 2px;
  font-style: normal;

  .dx-form-styling-mode-underlined & {
    padding-left: 0;
    padding-right: 0;
  }
}

.dx-field-item-optional .dx-label > span::after,
.dx-field-item-optional-mark {
  color: $form-field-mark-color;
}

.dx-field-item-required .dx-label > span::after,
.dx-field-item-required-mark {
  color: $form-field-required-color;
}

.dx-field-item-custom-label-content {
  .dx-icon {
    @include dx-icon-sizing($material-form-label-icon-size);
    @include dx-icon-margin(math.div($material-base-icon-size, 3));
  }
}

.dx-form-group-custom-caption {
  font-size: $material-form-group-caption-font-size;

  .dx-icon {
    @include dx-icon-sizing($material-base-icon-size);
    @include dx-icon-margin(math.div($material-base-icon-size, 3));
  }
}
