@use 'sass:color';
@use 'variables' as *;
@use 'mixin' as *;

@include export-module('form-renderer-layout') {
  .form-renderer-container hr {
    background-color: $sf-layout-border-color;
  }

  .e-form-renderer .field-label {
    color: $sf-text-color;
    font-family: $sf-font-family;
  }

  .e-form-renderer .form-panel-renderer .panel-legend {
    color: $sf-text-color;
    font-family: $sf-font-family;
  }

  .e-form-renderer .field-label .required-asterisk {
    color: $e-validation-text-color;
  }

  .e-form-renderer .field-label .tooltip-icon {
    color: $sf-tooltip-text-color;
  }

  .e-form-renderer .field-error {
    color: $e-validation-text-color;
  }

  .e-form-renderer .form-panel-renderer:has(.panel-legend) {
    border: 1px solid $sf-layout-border-color;
    font-family: $sf-font-family;
  }

  .e-form-renderer .form-table-renderer.table-border {
    border: 1px solid $sf-layout-border-color;
  }

  .e-form-renderer .table-border .e-form-table-cell {
    border-bottom: 1px solid $sf-layout-border-color;
    border-right: 1px solid $sf-layout-border-color;
  }

  .e-form-renderer .form-panel-renderer,
  .e-form-renderer .form-table-renderer {
    @include border-color-when-dark($sf-layout-border-color);
  }

  .e-form-renderer .e-form-table-row {
    @include border-color-when-dark($sf-layout-border-color);
  }

  .e-form-renderer .e-form-table-cell {
    @include border-color-when-dark($sf-layout-border-color);
  }

  /* stylelint-disable-next-line at-rule-no-unknown */
  @container (max-width: 480px) {
    .e-form-renderer .table-border .e-form-table-cell {
      border-bottom: 1px solid $sf-layout-border-color;
    }

    .e-form-renderer .form-table-renderer .e-form-table-cell:last-child {
      border-bottom: 1px solid $sf-layout-border-color;
    }
  }
}