body {
  --metadata-background: transparent; // Default Transparent or none
  --metadata-padding: 0;
  --metadata-border-color: var(--background-modifier-border);
  --metadata-border-radius: 4px;
  --metadata-border-width: 1px;
  --metadata-divider-color: var(--background-secondary);
  --metadata-divider-width: 1px;
  --metadata-gap: 0;
  --metadata-property-padding: 0;
  --metadata-property-radius: var(--radius-s);
  --metadata-label-font-size: var(--font-smaller);
  --metadata-input-font-size: var(--font-smaller);
}

.markdown-source-view .metadata-container .metadata-add-button {
  margin-top: var(--size-2-1);
  padding-left: var(--size-2-2);
  position: absolute;
  font-size: var(--font-smaller);
  left: 0;
  top: 0;
}

.workspace > .workspace-split:not(.mod-root) {
  .workspace-leaf-content[data-type="file-properties"] .view-content {
    padding: 0;
  }
  .metadata-container {
    --metadata-background: transparent;
    --metadata-divider-color: var(--background-secondary);
    --metadata-border-color: transparent;

    .metadata-property {
      background-color: var(--background-primary-alt);
    }

    .metadata-add-button {
      margin-top: 0;
    }
  }
}

.workspace > .workspace-split.mod-root .metadata-container {
  --input-height: var(--line-height-normal);
    font-family: var(--font-monospace);
    margin-left: 25px; // gutter
    margin-block-end: 0;

  .metadata-property-icon,
  .metadata-property-key,
  .metadata-property-key-input,
  .metadata-property-value {
    border-bottom: none;
  }

  // .metadata-property-key-input {
  //   padding: 0 var(--size-4-1);
  // }

  .metadata-property,
  .metadata-property[data-property-key="tags"] {
    --pill-remove-color: var(--text-faint);
    --pill-remove-color-hover: var(--text-accent);
    --pill-radius: var(--radius-s);
    --pill-border-width: 0;
    --pill-background: var(--background-primary-alt);
    --pill-padding-y: 0;
    --pill-padding-x: var(--size-2-1);

    .multi-select-pill {
      line-height: var(--line-height-normal);
    }
  }

  .metadata-property {
    border-bottom: var(--metadata-divider-width) solid var(--metadata-divider-color);

    .metadata-property-icon {
      --icon-size: var(--icon-xs);
      width: var(--icon-s);
      min-height: var(--line-height-normal);
    }
    .multi-select-container {
      padding: 0;
    }
    .metadata-input-longtext {
      padding: var(--pill-padding-x);
    }
  }
  .metadata-property:last-child {
    border-bottom: none;
  }
}

.metadata-property-key {
  align-items: center;
  border-right: var(--metadata-divider-width) solid var(--metadata-divider-color);
}

.metadata-properties-title {
  margin-bottom: var(--size-4-1);
  padding: var(--size-4-1);
  display: flex;
  justify-content: center;
  font-family: var(--ebw-header-font);
  background-color: rgba(var(--secondary-accent-4-rgb), 0.1);

  &:before {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    content: "✧ ";
    color: var(--secondary-accent-4);
    padding: 0 0.8em;
    position: relative;
  }
  &::after {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    content: " ✧";
    padding: 0 0.8em;
    position: relative;
    color: var(--secondary-accent-4);
  }
}

.metadata-properties-heading {
  display: block;
  padding: 0;
  margin-bottom: 0;
}

@media screen and (max-width: 700px) {

  .metadata-properties-title {
    display: none;
  }

  .markdown-source-view .metadata-container .metadata-add-button {
    margin-top: revert;
    padding-left: revert;
    position: revert;
    font-size: revert;
    left: revert;
    top: revert;
  }
}
