.facesheet-instance-generator {
  .sections-builder-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;

    .sections-builder-header {
      padding: var(--spacing-xl);
      font-weight: 600;
      border-bottom: 1px solid var(--color-border-secondary);
      background-color: var(--color-bg-primary);
    }

    .category-accordion-header {
      color: var(--color-text-secondary);
      font-size: 14px;
      padding-top: 16px;
      padding-bottom: 16px;
    }

    .no-sections-selected-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--spacing-xl);

      .no-sections-selected-footer {
        display: flex;
        gap: 12px;
        margin-top: 32px;
        width: 100%;
      }
    }

    .sections-builder-body {
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: auto;

      .section-list-container {
        overflow: visible;
      }

      .sections-list {
        display: flex;
        flex-direction: column;
        flex: none;
        padding: var(--spacing-xl);
        border-bottom: 1px solid var(--color-border-secondary);

        &.selected {
          order: -1;
          background-color: var(--color-bg-primary);
          gap: 16px;
          border-bottom: 8px solid var(--color-bg-secondary);
        }

        .section-header {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-bottom: var(--spacing-3xl);

          .section-title {
            font-weight: var(--weight-bold);
            font-size: 14px;
          }

          .section-header-actions {
            .sections-search-input {
              width: 100px;
              height: 22px;

              &:focus {
                width: 100%;
                height: auto;
              }
            }
          }
        }

        .section-box {
          display: flex;
          flex-direction: row;
          gap: 12px;
          padding: var(--spacing-xl);
          border: 1px solid var(--color-border-primary);
          border-radius: 12px;
          background-color: var(--color-bg-primary);
          margin-bottom: 12px;

          .section-box-description {
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex: 1;
            min-width: 0;

            .section-box-subtitle {
              color: var(--color-text-secondary);
              font-size: 12px;
            }
          }

          .section-box-action {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;

            &.draggable {
              cursor: grab;
            }
          }
        }

        .section-footer {
          display: flex;
          justify-content: space-between;
          justify-self: flex-end;
          gap: var(--spacing-md);
        }
      }
    }
  }

  @media (min-width: 1024px) {
    .sections-builder-container {
      .sections-builder-header {
        padding: 30px;
      }

      .no-sections-selected-container {
        flex: 2;
        padding: 32px;
      }

      .sections-builder-body {
        flex-direction: row;
        height: 100%;

        .section-list-container {
          flex: 1;
          overflow: auto;

          /* Hide scrollbar */
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none; /* IE and Edge */

          &::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
          }
        }

        .sections-list {
          flex: 1;
          overflow-y: auto;
          padding: 32px;
          border-right: 1px solid var(--color-border-secondary);
          border-bottom: none;

          &.selected {
            order: 0;
            flex: 2;
            border-right: none;
            border-bottom: none;
          }
        }
      }
    }
  }
}