.Guide {
  /* Note: First variable factors in height of breadcrumbs icon (not yet implemented). */
  --guide-tab-cluster-h: calc(theme(padding.6) + theme(iconSize.md));
  --guide-edit-icon-size: calc(theme(padding.4) + theme(iconSize.md));

  @apply grid h-full grid-rows-[auto_1fr] border-e border-e-gray-200;

  > .Guide-content {
    @apply overflow-auto;

    > .Guide-description {
      @apply first:mt-2;
    }
  }
}

.Guide-title {
  --guide-title-h: calc(var(--guide-edit-icon-size) + theme(padding.6));
  --guide-controls-w: calc(2 * var(--guide-edit-icon-size) + theme(padding.8));

  @apply btu-heading-4 relative h-[var(--guide-title-h)] truncate border-b border-b-gray-200 bg-gray-50 py-3.5 pl-4 pr-[var(--guide-controls-w)] text-gray-900;
}

.Guide-controls {
  @apply absolute right-4 top-3 flex items-center gap-2;
}

.Guide-edit {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-pen before:btu-icon-md;
}

.Guide-close {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-x before:btu-icon-md;
}

.Guide-description,
.Guide-fieldDescription {
  @apply text-sm text-gray-500;

  b {
    @apply font-[700];
  }

  i {
    @apply italic;
  }

  img {
    @apply max-w-full;
  }

  ol,
  ul {
    @apply pl-5 pt-2 [list-style-type:revert];
  }

  u {
    @apply underline;
  }

  .cms-textAlign-center {
    @apply text-center;
  }

  .cms-textAlign-right {
    @apply text-right;
  }
}

.Guide-description {
  @apply px-4 py-2 text-sm font-normal text-gray-500;
}

.Guide-tabCluster {
  @apply sticky -top-[1px] z-[1] mt-2 flex h-[var(--guide-tab-cluster-h)] items-center justify-between gap-2 border-y border-gray-200 bg-gray-50 px-4 py-2 text-xs font-medium text-gray-900;

  .Guide-content > &:first-child {
    @apply -mt-[1px];
  }
}

.Guide-image {
  @apply my-4 blokk;

  > img {
    @apply blokk;
  }
}

.Guide-field {
  @apply mx-4 mt-4 flex scroll-mt-[calc(var(--guide-tab-cluster-h)-1px)] flex-col gap-1.5 rounded-lg px-4 py-2;

  form {
    @apply w-[calc(100%-var(--guide-edit-icon-size)-0.5rem)];
  }

  &.is-focus {
    @apply bg-primary-50;
  }
}

.Guide-fieldName {
  @apply text-sm font-semibold text-gray-700;
}

.Guide-embedded {
  @apply relative ml-2.5 pl-2.5 shadow-[-1px_0_0_theme(colors.gray.300)];

  > .Guide-edit {
    @apply absolute right-0 top-[calc(0px-var(--guide-edit-icon-size)-0.5rem-1px)];
  }

  .Guide-field,
  .Guide-description {
    @apply pl-1 pr-0;
  }

  .Guide-tabCluster {
    @apply hidden;
  }
}

.Popup[name='edit-guide'] {
  /* Production Guide edit page does not need "Delete Permanently" button*/
  .ActionBar > button[name='action-delete'] {
    @apply hidden;
  }

  /* Hide the "remove" button  */
  .RCIG-item {
    @apply grid-cols-[1fr_repeat(2,auto)];

    > .RCIG-remove {
      @apply hidden;
    }

    &:not(.has-dropdown-actions) {
      @apply grid-cols-[1fr];

      > btu-dropdown {
        @apply hidden;
      }

      /* Hide the vertical line when both remove button and dropdown are hidden */
      > .RCIG-title {
        @apply [background-image:none];
      }
    }
  }
}

.frame[name='guideField'] {
  .Guide {
    @apply border-s-0;
  }

  .Guide-field {
    @apply px-0 py-4;
  }

  .Guide-fieldDescription {
    @apply text-gray-700;
  }
}

/* Make guide icon appear only on applicable popups */
.Popup {
  &[data-subject-type='true'] a.CIG-guide {
    @apply blokk;
  }

  a.CIG-guide {
    @apply hidden;
  }
}

.Popup[name='helpField'] > .Popup-content {
  @apply pb-6;
}

.Popup[name='guideField'] {
  .Popup-content {
    @apply pb-8;
  }

  .Guide {
    @apply border-e-0;
  }

  .Guide-title {
    @apply bg-white;
  }
}
