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

.card-markup {
  position: relative;

  pre {
    margin: 0; /* WA until this is fixed by Unanimo/Mercury */
  }
}

.copy-button {
  --icon-path: url("https://unpkg.com/@genexus/unanimo@0.12.0/dist/assets/icons/copy.svg");
  position: absolute;
  inset-block-start: var(--spacing-un-spacing--l, var(--mer-spacing--md));
  inset-inline-end: 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-action-list-render {
  gap: 4px;

  &::part(item__caption) {
    font-family: SourceSansPro_SemiBold;
  }

  &::part(item__action) {
    padding-inline: 8px;
    padding-block: 4px;
    border: 1px solid;
  }

  &::part(time) {
    display: block;
    font-style: italic;
    color: gray;
  }

  &::part(hyperlink-notification) {
    text-decoration: underline;
  }
}

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;
}

/* This is a WA to improve the UX */
.navigation-list.tree-view-primary::part(item__action) {
  --ch-tree-view-item__image-size: 20px;
  padding-block: var(--spacing-un-spacing--s);
}

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