// `.skeleton__element` and `@keyframes skeleton-shimmer` are NOT defined here.
//
// They used to be — a copy of the library's old skeleton.scss. But global-styles.scss
// also defines them (mirrored from storefront-websites globals, which is what the
// shared elements are written against), and both files load into the builder. The two
// definitions did not replace each other, they stacked:
//
//   old rule  -> .skeleton__element::before  { absolute gradient + shimmer }
//   new rule  -> .skeleton__element::after   { absolute gradient + shimmer }
//
// so every skeleton ran TWO shimmer sweeps at once (0.6 alpha over 0.4), which read as
// a flicker in the builder canvas. The old `border-radius: 6px` also leaked through,
// since the new rules never set one — corners the same skeleton does not have on the
// storefront. Confirmed in the browser on the cms-builder page: both pseudo-elements
// had `animation-name: skeleton-shimmer` and the box computed `border-radius: 6px`.
//
// global-styles.scss is now the single definition, so the builder and the storefront
// render these skeletons identically. Everything the old block set that still matters
// (`display: block`, `min-height`, background) is already there. Nothing in the CMS
// used `.skeleton__element.rounded` — the dashboard Skeleton is a CSS module with its
// own scoped class, and the shared Skeleton component sets its radius inline.
//
// If a skeleton style needs changing, change it in ONE of the two mirrored files
// (globals.scss in storefront-websites, global-styles.scss here) and copy it across.

// dropdown skeletons
.dpd_skeleton {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

// dropdown skeletons
.opt1_skeleton {
  display: flex;
  flex-direction: column;
  padding: 4px 12px;
}

.opt2_skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px;
  .emp_types {
    display: flex;
    flex-direction: column;
    gap: 6px;
    .emp_type {
      display: flex;
      gap: 8px;
    }
    .emp_dtls {
      display: flex;
      flex-direction: column;
      gap: 6px;
      .emp_code {
        display: flex;
        gap: 8px;
      }
    }
  }
}