.card {
  margin: 4px; /* Necessary to avoid iframe's "overflow: clip" issues */
  padding: var(--spacing-un-spacing--l, var(--mer-spacing--md));
}

ch-showcase hr {
  margin-inline: calc(
    var(--spacing-un-spacing--l, var(--mer-spacing--md)) * -1
  );
}

.card-properties {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  gap: var(--spacing-un-spacing--l, var(--mer-spacing--md));
}

label {
  display: grid;
  grid-template-rows: max-content max-content;
}

fieldset {
  display: grid;
  grid-auto-flow: row;
  gap: var(--spacing-un-spacing--m, var(--mer-spacing--xs));
  border: unset;
}

legend {
  margin-block-end: var(--spacing-un-spacing--m, var(--mer-spacing--xs));
}

.form-field {
  display: grid;
  grid-auto-rows: max-content;
}

.fieldset-test {
  border: 1px solid
    color-mix(
      in srgb,
      var(
          --colors-foundation-un-color__purple--300,
          var(--mer-color__primary-blue--600)
        )
        40%,
      transparent
    );
  padding: 8px;
  margin-block-end: 16px;

  form {
    display: flex;
    gap: 8px;
  }
}

.field-legend-test {
  padding-inline: 16px;
}

::part(item__action item--folder)::before,
::part(item__action item--module)::before {
  content: "";
  width: var(--ch-tree-view-item__image-size);
  height: var(--ch-tree-view-item__image-size);
  background-repeat: no-repeat;
}

::part(item__action item--folder)::before {
  background-image: url("pages/assets/icons/folder.svg");
}

::part(item__action item--folder expanded)::before {
  background-image: url("pages/assets/icons/folder-open.svg");
}

::part(item__action item--module)::before {
  background-image: url("pages/assets/icons/module.svg");
}

::part(item__action item--module expanded)::before {
  background-image: url("pages/assets/icons/module-open.svg");
}

.checkbox-test-main-wrapper {
  display: grid;
  grid-auto-rows: 128px;
}

.code-test-main-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: var(--spacing-un-spacing--l);
}

.radio-group-test-main-wrapper {
  display: grid;
  grid-auto-rows: max-content;
}

.tab-test-main-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;

  ch-tab-render {
    gap: 8px;

    &::part(page-container) {
      border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    }
  }
}

.action-group-test-main-wrapper {
  display: grid;
  grid-template-rows: 100px 100px;
  gap: var(--spacing-un-spacing--l, var(--mer-spacing--md));

  .fieldset-test {
    display: grid;
    grid-auto-flow: row;
    gap: var(--spacing-un-spacing--m, var(--mer-spacing--xs));
    resize: inline;
    overflow: auto;
  }
}

.dropdown-test-main-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 128px;
  grid-template-rows: 80px;
  gap: var(--spacing-un-spacing--l, var(--mer-spacing--md));
}

ch-code > pre > code {
  contain: size;
  overflow: auto;
}

ch-showcase textarea.form-input {
  min-block-size: 32px;
  block-size: 200px;
  max-block-size: unset;
  resize: vertical;
}

/* 
.combo-box::part(item):hover {
  background-color: var(--accents-un-accent__primary-dim--hover);
} */