/* -------------- */
/*      CIG       */
/* -------------- */
.CIG {
  @apply relative flex flex-wrap p-0 @container/CIG [--CIG-padding:theme(spacing.6)];

  &.is-empty {
    @apply hidden;
  }
}

.toggleable-form > .CIG > .CIG-row:first-child {
  @apply pt-0;
}

/* TabContainer CIGs are flush on both axes. */
.CIG.TC {
  &:has(> .TabBar) {
    @apply pt-0;
  }

  /* Embedded TabBars need to use the CIG padding for negative margins to stretch the full width. */
  & .tabs-wrapper > .TabBar,
  > .TabBar {
    @apply grow basis-full [--pull-inline:var(--CIG-padding)];
  }
}

.CIG-label {
  /* line-height is set here to make sure that labels with/without action icons are always the same height */
  @apply relative -order-2 flex h-min items-center text-sm font-semibold leading-6 text-gray-700;
}

.CIG-label label {
  @apply min-w-max;
}

.CIG-requiredLabel {
  @apply ps-2 text-sm font-normal text-gray-500;
}

/* Adjusts spacing between RCIG-list, view switcher and label when "Items Type" dropdown is missing */
.CIG-label + .CIG-large .RCIG.is-previewable > {
  .repeatablePreviewControls {
    @apply top-[calc(theme(fontSize.md.1)_-_theme(spacing.7))];
  }

  .RCIG-expandAll {
    @apply top-[calc(0px_-_theme(spacing.2)_*_2_-_theme(iconSize.lg)_+_theme(fontSize.md.1))];
  }

  .repeatablePreviewControls + .RCIG-list {
    @apply mt-[calc(theme(fontSize.md.1)_+_theme(spacing.2))];
  }
}

.CIG-comments {
  @apply ms-1 delay-[0.12s] before:btu-icon-message-circle-plus;

  &.has-comments {
    @apply before:btu-icon-message-circle after:absolute after:right-[2px] after:top-[4px] after:size-[10px] after:rounded-full after:border after:bg-error-600 after:[clip-path:circle()] hover:bg-primary-50 hover:text-primary-800;
  }
}

.CIG-help {
  @apply ms-1 before:btu-icon-wrench;
}

.CIG-guide {
  @apply ms-2 before:btu-icon-circle-help;
}

.CIG-guide,
.CIG-help,
.CIG-comments {
  @apply order-1;
}

.CIG-wordCount {
  --space: 0.375rem;
  @apply order-last ms-auto mt-[--space] text-sm font-normal text-gray-500 opacity-0;

  &.has-min-or-max {
    @apply flex justify-end opacity-100;

    .CIG-wordCount-min + .CIG-wordCount-max {
      @apply ps-1;
    }
  }
}

.CIG-help,
.CIG-guide,
.CIG-comments,
.AIChatButton {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs -translate-x-[4px] opacity-0 [transition:opacity_0.3s_cubic-bezier(0.25,_0,_0.2,_1),_transform_0.2s_cubic-bezier(0.25,_0,_0.2,_1)] before:btu-icon touch-device:-translate-x-0 touch-device:opacity-100 touch-device:transition-none;
}

.CIG-guide + .CIG-help {
  @apply delay-[0.08s]; /* stagger the entrance transition for each button. TODO: set this in the element style from backend?... */

  + .CIG-comments {
    @apply delay-[0.1s];
  }
}

.CIG-label:has(> .CIG-guide + .CIG-help + .CIG-comments) {
  @apply delay-[0.12s];
}

.AIChatButton {
  @apply delay-[0.16s]; /* stagger the entrance transition for each button. TODO: set this in the element style from backend?... */
}

.CIG-pending,
.CIG-updated {
  @apply basis-full text-sm font-normal text-gray-500;
}

.CIG-search {
  @apply btu-button btu-button-fill-none btu-button-primary me-6 btu-button-container-none before:btu-icon before:btu-icon-search;
}

.CIG > .CIG-note {
  @apply relative order-[-1] -mx-[--space] w-screen;
}

.CIG > .CIG-note > .CIG-noteItem {
  @apply mt-0;
}

.CIG > .CIG-note > .CIG-noteItem > .Message {
  @apply my-0 rounded-none border-0 border-b;
}

.CIG-note:empty,
.CIG-note:has([data-dynamic-html]:empty) {
  @apply hidden;
}

.CIG-row > .CIG-note,
.CIG-noteItem {
  @apply order-12 mt-1.5 text-sm text-gray-500;
  [data-dynamic-html] .Message {
    @apply mb-0 mt-1.5 [overflow-wrap:anywhere];
  }
}

/* Equalize the ComboInput widths so that they look aligned. */
.CIG .ComboInput {
  @apply w-auto min-w-[25cqw] max-w-[100cqw];
}

/* Width of small inputs (this should not affect grid fields like items in a gallery) */
.CIG
  .CIG-row:not(.is-gridItem .CIG-row):has(
    > .CIG-small.inputSmall:not(.is-grid)
  ) {
  > .CIG-label,
  > .CIG-note {
    @apply w-full;
  }

  /* Only constrain the width when the CIG container is wide enough at over 312px */
  > .CIG-small.inputSmall:not(.is-grid) {
    @apply @[312px]/CIG:min-w-[312px] @[312px]/CIG:max-w-[540px] @[312px]/CIG:basis-1/2;
  }

  /* Inside a layout with columns, unset the min width to prevent fields from 
  overlapping on smaller viewports. Set flex basis back to full so that the fields are not
  really small here. These will still get the max width of 540px. */
  &.is-minimal,
  &.is-half,
  &.is-third,
  &.is-quarter {
    > .CIG-small.inputSmall:not(.is-grid) {
      @apply min-w-[unset] basis-full;
    }
  }
}

.CIG-large,
.CIG-small {
  --CIG-space: 0.375rem;
  @apply mt-[--CIG-space] basis-full;
}

/* -------------- */
/*    CIG-row     */
/* -------------- */
.CIG-row {
  --CIG-row-space: 1.5rem;

  @apply relative flex max-h-min min-w-[200px] basis-full flex-row flex-wrap content-start @container/CIG-row;

  /* The colored vertical "thread" to the side of each row.
    The 1px left offset is to stay true to the design so that there is a slight gap betweem the thread and container.
    The 3px top offset is shifted down a few pixels to make it look a little more aligned with label. */
  &::after {
    @apply absolute bottom-0 left-[calc(1px_-_var(--space))] top-[3px] w-0.5 origin-left scale-x-0 rounded-lg bg-primary-600 opacity-0 transition;
  }

  /* Rows could be empty or have no visible children. */
  &:empty,
  &:has(> [type='hidden']:only-child) {
    @apply hidden;
  }

  /* Show word count when focused and reduces width of note if it contains a message */
  &:focus-within {
    .CIG-wordCount {
      @apply opacity-100;

      transition: opacity 0.25s cubic-bezier(0.25, 0, 0.2, 1);
    }
    &:has(> .CIG-note .Message) > .CIG-note {
      @apply me-2 flex-1;
    }
  }

  /* hidden/unselected Tab Container CIG-rows, shouldn't have padding */
  &:not(.TC-unselected) {
    @apply mt-[--CIG-row-space];
  }

  /* Word count element in all Cig rows (except the last sibling row). */
  &:has(+ .CIG-row) .CIG-wordCount {
    @apply mb-[calc(-1_*_(var(--space)_+_theme(lineHeight.4)))]; /* negative margin keeps the word count from pushing the next CIG-row down. */
  }
}

/* CIG-row children need to run out the row (unless specified in :not()).
  This is due to changing the flex direction from column (v4) to row. */
.CIG-row
  > *:not(.CIG-label, .AIChatButton, .CIG-note, .CIG-wordCount, .File-upload) {
  @apply w-full basis-full;
}

/*
  Fades out the surrounding buttons when the user focuses the input. */
.CIG-row:has(
    textarea:focus,
    input:focus,
    a:focus,
    button:focus,
    .ComboInput:focus,
    .ProseMirror:focus,
    .is-highlighted
  ) {
  > .CIG-label .CIG-guide:not(:hover),
  > .CIG-label .CIG-help:not(:hover),
  > .CIG-label .CIG-comments:not(:hover),
  > .AIChatButton:not(:hover) {
    @apply opacity-50 touch-device:opacity-100;
  }
}

.CIG-row.is-highlighted > .CIG-label > a {
  @apply opacity-100;
}

/* Fade in the surrounding buttons when the user interacts with the input. */
.CIG-row:where(.is-openPopup, :hover, :focus-within) > .CIG-label > *,
.CIG-row:where(.is-openPopup, :hover, :focus-within) > .AIChatButton {
  @apply translate-x-0 opacity-100;
}

/* Displays status thread in various cases */
.CIG-row:where(
    :focus-within,
    .is-error,
    .is-pending,
    .state-changed:not(:focus-within),
    .is-openPopup,
    .is-highlighted
  ) {
  @apply after:transform-none after:opacity-100;
}

/* Blue field label when the row is focused. */
.CIG-row:where(:focus-within, .is-openPopup, .is-highlighted):not(.is-error)
  > .CIG-label {
  @apply text-primary-700;
}

/* Messages inside CIG-row should present differently. */
.CIG-row > .Message {
  @apply mt-[0.375rem] gap-2 border-none !bg-transparent p-0;
  &.is-error {
    @apply text-error-600;
  }
}

/* Rounded border on embedded CIG (usually). */
.CIG-row:where(
    [data-type='record'],
    [data-type='period'],
    [data-type='duration'],
    [data-type='date'],
    [data-type='dateString']
  ) {
  > .CIG-large {
    > .toggleable-form > .CIG,
    > .CIG {
      --CIG-radius: theme(borderRadius.lg);
      @apply rounded-[--CIG-radius] border p-[--CIG-padding];

      &:has(> .CIG-row) {
        @apply pt-0;
      }
    }
  }
}

/* Narrow row modifiers. */
.CIG:has(
    > .CIG-row.is-minimal,
    > .CIG-row.is-half,
    > .CIG-row.is-third,
    > .CIG-row.is-quarter
  ) {
  --gap: calc(2 * var(--CIG-padding));

  @apply gap-x-[--gap];
}

.CIG-row {
  &:where(.is-minimal, .is-half, .is-third, .is-quarter) {
    @apply basis-auto;
  }

  &.is-minimal {
    @apply basis-[min-content];
  }

  &.is-half {
    @apply flex-[1_0_calc(50%_-_var(--gap))];
  }

  &.is-third {
    @apply flex-[1_0_calc(33.33333%_-_var(--gap))];
  }

  &.is-quarter {
    @apply flex-[1_0_calc(25%_-_var(--gap))];
  }
}

.CIG-row.is-updated {
  &::after {
    @apply transform-none bg-purple-400 opacity-100;
  }
}

/* Red thread when the row contains errors. */
.CIG-row.is-error {
  @apply after:bg-error-600;

  > .CIG-label {
    @apply text-error-600;
  }

  .CIG-small,
  .CIG-large {
    input,
    textarea {
      @apply focus:ring-error-100 focus:border-error-600;
    }
  }
}

/* Gray/yellow thread when the row is pending change. */
.CIG-row.is-pending {
  @apply after:[background-image:linear-gradient(theme(colors.gray.500)_60%,theme(colors.warning.400)_60%)] after:[background-size:1px_20px];
}

/* Yellow thread when the row has changed. */
.CIG-row.state-changed:not(:focus-within) {
  @apply after:bg-warning-300 after:more-contrast:bg-warning-700;

  > .CIG-label {
    @apply text-warning-900 more-contrast:text-warning-800;
  }
}

/* Boolean field checkboxes should look like toggles. */
.CIG-row[data-type='boolean'] > .CIG-small > input[type='checkbox'] {
  @apply Checkbox-toggle;
}

/* When inside an unlabeled row, the thread ui is positioned at the very top. */
.CIG-row:where(
    [data-type='record'],
    [data-type='list/record'],
    [data-type='set/record'],
    [data-type='text']
  )
  > .CIG-large
  > .toggleable-form
  > .CIG
  > .CIG-row {
  &:after {
    @apply top-0;
  }
}

/* Embedded CIG rows need no padding-top since the container comes with space. */
.CIG-large > .CIG.TC > .CIG-row:first-child {
  @apply pt-0;
}

/* Remove all gaps around CIG inside unlabeled row by itself. */
.CIG-row:where(
    [data-type='record'],
    [data-type='list/record'],
    [data-type='set/record']
  )
  > .CIG-large {
  > .toggleable-form > .CIG,
  > .CIG,
  > .RCIG-list > .RCIG-item > .CIG {
    &:has(> div.CIG-row.is-unlabeled:where(:only-of-type, :last-child)) {
      @apply rounded-none border-none p-0;
    }

    > div.CIG-row.is-unlabeled:where(:only-of-type, :last-child) {
      @apply mt-0 ps-0;

      > .CIG-label,
      > .AIChatButton {
        @apply hidden;
      }
      > .CIG-small,
      > .CIG-large {
        @apply mt-0;
      }
    }
  }
}

/* Make certain types of rows not editable. */
.ContentEdit.is-locked,
.CIG.is-readOnly,
.CIG-row:where(.is-readOnly, .is-pending, .is-updated),
.StandardForm.is-locked {
  input[type],
  input[data-preview]:not([data-preview='']) + .ContentSelector-search,
  input[data-previewable='true']:not([data-preview]) + .ContentSelector-search,
  input[data-previewable='true'][data-preview=''] + .ContentSelector-search,
  select,
  textarea,
  .locationMap,
  .regionMap,
  .CIG-label,
  .CIG-note,
  .CodeMirror,
  .ComboInput,
  .ComboInput-label,
  .ContentSelector-placeholder,
  .DateTimeInput,
  .Enhancement,
  .ProseMirrorContainer,
  .ProseMirror-tableContainer,
  .RichTextEditor {
    --combo-label-color: theme(colors.gray.400);
    @apply pointer-events-none border-0 text-gray-400;
  }

  input[data-previewable='false']:not([data-preview]) + .ContentSelector-search,
  input[data-previewable='false'][data-preview=''] + .ContentSelector-search,
  input[data-previewable='true']:not([data-preview])
    + .ContentSelector-search::after,
  input[data-previewable='true'][data-preview='']
    + .ContentSelector-search::after,
  input[data-preview]:not([data-preview='']) + .ContentSelector-search::before,
  input[data-preview]:not([data-preview='']) + .ContentSelector-search::after,
  .leaflet-control:not(.leaflet-control-zoom),
  .AIChatButton,
  .CIG-help,
  .CIG-guide,
  .Dropdown-container,
  .ContentSelector-clear,
  .ImageEditor-open,
  .MultiSortable-buttonToggle,
  .ProsemirrorEnhancementMenu-container-button,
  .ProseMirrorToolbar,
  .ProseMirror-tableSubmenuItem,
  .RCIG-controls,
  .RCIG-remove,
  .RCIG-swap,
  .RCS-remove,
  .RCS-controls,
  .Repeatable-controls,
  .RichTextEditor-toolbar,
  .RTI-add,
  .EIG-controls {
    @apply !hidden;
  }

  .MultiSortable:hover {
    @apply cursor-[unset];
  }

  .RCIG-item.MultiSortable > .RCIG-title:hover {
    @apply cursor-pointer;
  }

  .RCIG-item {
    @apply !grid-cols-[auto];
  }

  .RCIG-title {
    @apply bg-none;
  }

  .RTI-remove {
    @apply hidden;
  }

  .is-collapsed {
    @apply w-full;
  }

  .readOnlyDisplay {
    @apply m-4 text-gray-400;
  }

  /* Image editor readonly */
  .is-imagePreview {
    @apply after:col-span-full after:h-full after:rounded-b-lg after:border after:[grid-row:2/3];

    .ImageEditor-editToggle {
      @apply my-1 after:border-none;
    }
  }

  /* Single and Repeatable Content selector inputs in readonly mode */
  .CIG-small:has(> .ContentSelector-select),
  .RCS-list > li {
    @apply pointer-events-none border-gray-300 text-gray-400;
  }
}

/* When CIG-row is readonly and ProseMirror is empty, hide the extra blank space */
.CIG-row.is-readOnly .AutoExpand:has(> .ProseMirrorContainer + textarea:empty) {
  @apply m-0;

  .ProseMirrorContainer {
    @apply hidden;
  }
}

.CIG-row:only-child.is-unlabeled > .Message.is-error {
  @apply ms-[calc(var(--CIG-padding)_+_theme(spacing.4))];
}

/* Query Field support. */
.CIG.TC.is-query {
  --CIG-padding: 0;

  .QueryField input[type] {
    @apply hidden;
  }
}

.CIG-row.is-query.is-disabled .QueryField-toggle {
  @apply hidden;
}

/* DateOnly Field */
.CIG-row[data-type$='dateOnly'] > .CIG-small {
  @apply flex;

  input,
  .ComboInput {
    @apply w-[100px];
  }

  .ComboInput:last-of-type {
    @apply ms-2;
  }

  .DateOnly-month {
    & + .ComboInput {
      &,
      .ComboInput-filter {
        @apply w-[150px] min-w-[150px];
      }
    }
  }

  .DateOnly-day {
    & + .ComboInput {
      &,
      .ComboInput-filter {
        @apply w-[150px] min-w-[150px];
      }
    }
  }
}

/* Duration, Period */
.CIG-row[data-type$='duration'],
.CIG-row[data-type$='period'] {
  .TC {
    @apply grid auto-cols-min grid-flow-col-dense gap-x-10;

    > .CIG-row {
      @apply pt-0;
    }
  }

  > .CIG-large .CIG > .CIG-row {
    @apply w-[100px] min-w-[100px];
  }
}

/* Date, DateString */
.CIG-row[data-type$='date'],
.CIG-row[data-type$='dateString'] {
  > .CIG-large .CIG > .CIG-row {
    > .CIG-small,
    > .CIG-note {
      @apply order-first;
    }
  }
}

.CIG-small > .DateStringCalendarEmbedded .DateStringCalendarEmbedded-widget {
  @apply blokk border-none;

  .DateStringCalendarTime,
  /* Unset the horizontal borders which appear in these pseudo-elements */
  .DateStringCalendarAction {
    @apply before:content-none;
  }

  .DateStringCalendarTime {
    @apply py-2;

    .ComboInput {
      @apply min-w-min;
    }
  }

  .DateStringCalendarAction {
    @apply py-0;
  }
}

.CIG-small .passwordChange:has(> .Message) {
  @apply mt-4;
}

.RteSettings-customKeyboardConfig .CIG-small,
.RteSettings-customKeyboardConfig textarea {
  @apply tracking-[0.6rem];
}

/* Author persona writing style - override readonly styles here so the links are clickable */
.CIG-row[data-field-name='writingStyleProfile'] {
  @apply !pointer-events-auto !opacity-100;
}

.CIG-row.is-unlabeled > .AIChatButton {
  @apply absolute right-0 top-[calc(-1_*_var(--button-size-md))] ms-0 ![display:initial];
}

/* Focus state for CIG-small in read-only rows */
:is(.CIG-row.is-readOnly, .CIG.is-readOnly) .CIG-small:focus-within {
  @apply rounded-lg outline-dashed outline-[4px] outline-gray-300;

  /* Remove default focus styles */
  :focus:not(.ImageEditor-editToggle, .filePreview > a),
  .ProseMirrorContainer {
    @apply !border-transparent !ring-0;
  }
}
