@layer pages {
  .pattern_detail {
    flex: 2;
    border-radius: calc(var(--border-radius) * 2);
    background-color: var(--color-surface-container);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing) * 2);
    .control_panel {
      display: flex;
      flex-direction: column;
      gap: calc(var(--spacing) * 2);
      .button_row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(var(--spacing) * 2);
      }
    }
    .detail_panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: calc(var(--spacing) * 2);
      .detail_row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        .detail_unit {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: calc(var(--spacing));
          label {
            min-width: 8em;
            flex: 0 0 8em;
            text-align: right;
          }
          .content {
            flex: 1 1;
          }
        }
      }
    }
    .preview_panel {
      min-height: 140px;
      flex: 0 0;
    }
  }
  .empty_promption {
    flex: 2;
    border-radius: calc(var(--border-radius) * 2);
    background-color: var(--color-surface-container);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    .promption {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
    }
    .spacer {
      flex: 3;
    }
  }
}