@use 'variables' as *;
@use 'mixin' as *;

@include export-module('form-renderer-theme') {
  .form-renderer-container {
    padding: 2rem;
  }

  .form-renderer-container hr {
    border: none;
    height: .5px;
    margin: 0;
  }

  .form-renderer {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* stylelint-disable-next-line property-no-unknown */
    container-type: inline-size;
  }

  .form-renderer.twolayout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .form-renderer.threelayout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .form-renderer.fourlayout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .form-renderer.twolayout > .form-group:has(.e-btn),
  .form-renderer.threelayout > .form-group:has(.e-btn),
  .form-renderer.fourlayout > .form-group:has(.e-btn) {
    align-self: flex-end;
  }

  .form-renderer.twolayout > .form-group:has(.e-message),
  .form-renderer.threelayout > .form-group:has(.e-message),
  .form-renderer.fourlayout > .form-group:has(.e-message) {
    align-self: flex-end;
  }

  .form-renderer.twolayout > .form-group:has(.e-checkbox),
  .form-renderer.threelayout > .form-group:has(.e-checkbox),
  .form-renderer.fourlayout > .form-group:has(.e-checkbox) {
    align-self: flex-end;
  }

  .form-renderer.twolayout > .form-group:has(.e-switch),
  .form-renderer.threelayout > .form-group:has(.e-switch),
  .form-renderer.fourlayout > .form-group:has(.e-switch) {
    align-self: flex-end;
  }

  .form-renderer.twolayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)),
  .form-renderer.threelayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)),
  .form-renderer.fourlayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)) {
    grid-column: 1 / -1;
  }

  .form-renderer.twolayout > .form-group:nth-last-child(2):has(.form-reset-type),
  .form-renderer.twolayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type),
  .form-renderer.threelayout > .form-group:nth-last-child(2):has(.form-reset-type),
  .form-renderer.threelayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type),
  .form-renderer.fourlayout > .form-group:nth-last-child(2):has(.form-reset-type),
  .form-renderer.fourlayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type) {
    grid-column: auto;
  }

  /* stylelint-disable-next-line at-rule-no-unknown */
  @container (max-width: 768px) {
    .form-renderer.fourlayout {
      grid-template-columns: repeat(2, 1fr);
    }

    .form-renderer.threelayout {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* stylelint-disable-next-line at-rule-no-unknown */
  @container (max-width: 480px) {
    .form-renderer.twolayout,
    .form-renderer.threelayout,
    .form-renderer.fourlayout {
      grid-template-columns: 1fr;
    }
  }

  .e-form-renderer .form-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }

  .e-form-renderer .field-wrapper {
    display: flex;
    width: 100%;
  }

  .e-form-renderer .field-wrapper.label-top {
    flex-direction: column;
    gap: .5rem;
  }

  .e-form-renderer .field-wrapper.label-bottom {
    flex-direction: column-reverse;
    gap: .5rem;
  }

  .e-form-renderer .field-wrapper.label-left {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .e-form-renderer .field-wrapper.label-right {
    flex-direction: row-reverse;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
  }

  .e-form-renderer .field-wrapper.label-left .field-input,
  .e-form-renderer .field-wrapper.label-right .field-input {
    flex: 1;
    min-width: 0;
  }

  .e-form-renderer .field-wrapper:has(.e-small) .field-label {
    font-size: .75rem;
  }

  .e-form-renderer .form-group .field-description {
    font-size: .75rem;
  }

  .e-form-renderer .form-group:has(.e-small) .field-description {
    font-size: .625rem;
  }

  .e-form-renderer .field-wrapper:has(.e-bigger) .field-label {
    font-size: 1rem;
  }

  .e-form-renderer .form-group:has(.e-bigger) .field-description {
    font-size: .875rem;
  }

  .e-form-renderer .field-label {
    font-size: .875rem;
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  .e-form-renderer .field-label .required-asterisk {
    margin-left: 2px;
  }

  .e-form-renderer .field-label .tooltip-icon {
    cursor: help;
    font-size: .875rem;
  }

  .e-form-renderer .field-input {
    width: 100%;
  }

  .e-form-renderer .field-input .e-image-editor {
    min-height: 250px;
  }

  .e-form-renderer .field-input .e-switch-wrapper,
  .e-form-renderer .field-input .e-checkbox-wrapper {
    margin: 5px 0;
  }

  .e-form-renderer .field-error {
    font-size: .75rem;
    margin-top: .25rem;
    display: block;
  }

  .form-renderer-container .e-radio-group {
    display: flex;
    flex-direction: column;
  }

  .form-renderer-container .e-radio-group .e-radio + label {
    margin-left: .5rem;
  }

  .e-form-renderer .form-panel-renderer {
    border: none;
    border-radius: 8px;
    padding: 0;
  }

  .e-form-renderer .form-panel-renderer:has(.panel-legend) {
    padding: 1.5rem;
  }

  .e-form-renderer .form-panel-renderer legend {
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 1.5rem;
  }

  .e-form-renderer .form-panel-renderer .panel-legend {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0 .5rem;
    margin-bottom: 0;
    border-bottom: none;
    width: unset;
  }

  .e-form-renderer .panel-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .e-form-renderer .card-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .e-form-renderer .form-table-renderer {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
  }

  .e-form-renderer .form-table-renderer {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .e-form-renderer .form-table-renderer .e-form-table-row {
    display: table-row;
    background: transparent;
  }

  .e-form-renderer .form-table-renderer .e-form-table-cell {
    display: table-cell;
    padding: 12px;
    vertical-align: top;
  }

  .e-form-renderer .e-form-table-cell:last-child {
    border-right: none;
  }

  .e-form-renderer .form-table-renderer .e-form-table-row:last-child .e-form-table-cell {
    border-bottom: none;
  }

  .e-form-renderer .e-form-table-cell > .form-table-renderer,
  .e-form-renderer .e-form-table-cell > .form-tabs-renderer,
  .e-form-renderer .e-form-table-cell > .form-card-renderer,
  .e-form-renderer .e-form-table-cell > .form-panel-renderer,
  .e-form-renderer .e-form-table-cell > .form-group {
    margin-bottom: 1.5rem;
  }

  .e-form-renderer .e-form-table-cell > .form-table-renderer:last-child,
  .e-form-renderer .e-form-table-cell > .form-tabs-renderer:last-child,
  .e-form-renderer .e-form-table-cell > .form-card-renderer:last-child,
  .e-form-renderer .e-form-table-cell > .form-panel-renderer:last-child,
  .e-form-renderer .e-form-table-cell > .form-group:last-child {
    margin-bottom: 0;
  }

  .e-form-renderer .form-table-renderer .col,
  .e-form-renderer .form-table-renderer [class ^= 'col-'] {
    min-height: 100%;
    vertical-align: top;
  }

  .e-form-renderer .form-table-renderer .col {
    width: auto;
  }

  .e-form-renderer .form-table-renderer .col-1 {
    width: 8.33333333%;
  }

  .e-form-renderer .form-table-renderer .col-2 {
    width: 16.66666667%;
  }

  .e-form-renderer .form-table-renderer .col-3 {
    width: 25%;
  }

  .e-form-renderer .form-table-renderer .col-4 {
    width: 33.33333333%;
  }

  .e-form-renderer .form-table-renderer .col-5 {
    width: 41.66666667%;
  }

  .e-form-renderer .form-table-renderer .col-6 {
    width: 50%;
  }

  .e-form-renderer .form-table-renderer .col-7 {
    width: 58.33333333%;
  }

  .e-form-renderer .form-table-renderer .col-8 {
    width: 66.66666667%;
  }

  .e-form-renderer .form-table-renderer .col-9 {
    width: 75%;
  }

  .e-form-renderer .form-table-renderer .col-10 {
    width: 83.33333333%;
  }

  .e-form-renderer .form-table-renderer .col-11 {
    width: 91.66666667%;
  }

  .e-form-renderer .form-table-renderer .col-12 {
    width: auto;
  }

  /* Tabs Layout */
  .e-form-renderer .form-tabs-renderer {
    width: 100%;
  }

  .e-form-renderer .tab-content-renderer {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .e-form-renderer .form-submit-button {
    margin-top: 1.5rem;
    align-self: flex-start;
  }

  .e-form-renderer .field-input .e-input-group,
  .e-form-renderer .field-input .e-control-wrapper {
    width: 100%;
  }

  .e-form-renderer .field-input .e-float-input {
    width: 100%;
  }

  .e-form-renderer .unsupported-component {
    padding: 1rem;
    border-radius: 4px;
    font-size: .875rem;
  }

  .form-renderer-container .e-tooltip.e-msg-icon::before {
    font-family: 'e-icons';
    font-size: 16px;
    height: 16px;
    margin: 3px 4px;
    display: flex;
    line-height: 16px;
  }

  .e-form-renderer .form-title h1 {
    margin-top: 0;
  }

  .e-form-renderer .form-title {
    text-align: center;
  }

  .form-renderer-container .e-card .e-card-content {
    padding: 12px 18px;
  }

  /* Responsive */
  /* stylelint-disable-next-line at-rule-no-unknown */
  @container (max-width: 480px) {
    .e-form-renderer .form-table-renderer .table-grid {
      display: flex;
      flex-direction: column;
      border-spacing: 0;
      gap: .75rem;
    }

    .e-form-renderer .form-table-renderer .row {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      width: 100%;
    }

    .e-form-renderer .form-table-renderer .e-form-table-cell {
      display: block;
      flex: 1 1 auto;
      padding: 12px;
    }

    /* Override column width classes on mobile - let content flow naturally */
    .e-form-renderer .form-table-renderer .col,
    .e-form-renderer .form-table-renderer [class ^= 'col-'] {
      /* stylelint-disable-next-line declaration-no-important */
      width: auto !important;
      min-width: 250px;
      flex: 1 1 auto;
    }

    .e-form-renderer .table-border .e-form-table-cell {
      border-right: none;
      border-radius: 4px;
    }

    .e-form-renderer .form-table-renderer .row:last-child .e-form-table-cell {
      border-bottom: none;
    }
  }

  /* stylelint-disable-next-line at-rule-no-unknown */
  @container (max-width: 480px) {
    .e-form-renderer .form-table-renderer .e-form-table-row {
      /* stylelint-disable-next-line declaration-no-important */
      flex-direction: column !important;
      /* stylelint-disable-next-line declaration-no-important */
      gap: 1rem !important;
    }

    .e-form-renderer .form-table-renderer .e-form-table-cell {
      /* stylelint-disable-next-line declaration-no-important */
      width: 100% !important;
    }

    .form-renderer-container {
      padding: 1rem;
    }
  }

  /* stylelint-disable-next-line at-rule-no-unknown */
  @container (max-width: 400px) {
    .e-form-renderer .field-wrapper.label-left,
    .e-form-renderer .field-wrapper.label-right {
      flex-direction: column;
      align-items: stretch;
    }

    .e-form-renderer .field-wrapper.label-left .field-input,
    .e-form-renderer .field-wrapper.label-right .field-input {
      width: 100%;
    }
  }
}