body:not(.hide-frontmatter-off) .metadata-properties-heading {
  display: none;
}

.metadata-container {
  --icon-size: 16px;
  transform: none !important;

  .metadata-properties-heading {
    padding: 16px 0 4px;
    color: var(--text-muted);
  }

  .metadata-properties {
    border-radius: var(--metadata-property-radius);
    background-color: var(--background-secondary);

    input:not([type="checkbox"]) {
      box-shadow: none !important;
      border: none !important;
    }
  }

  .metadata-property-icon::before {
    display: none;
  }

  .metadata-property-key {
    padding: 8px 8px 8px 16px;
  }

  .metadata-property-key,
  .metadata-property-value {
    border: none;
    min-height: 40px;
  }

  .metadata-property-value input:not([type="checkbox"]) {
    box-shadow: none !important;
    border: none !important;
  }

  .multi-select-container,
  .metadata-input,
  .metadata-input-number,
  .metadata-input-longtext {
    padding: 8px;
  }

  .metadata-add-button {
    gap: 8px;
    margin: 0;
    padding: 0 16px;
    width: 100%;
    height: 40px;
    color: var(--text-faint);
    font-weight: var(--font-normal);
  }
  .metadata-add-button:hover {
    background-color: transparent;
    color: var(--text-muted);
  }

  .multi-select-pill {
    padding: var(--tag-padding-y) var(--tag-padding-x);
    line-height: var(--line-height-tight);
  }
  .multi-select-pill-content {
    margin-inline-start: 0;
    font-size: var(--tag-size);
  }
  .multi-select-pill-remove-button {
    margin-inline-end: 0;
  }

  @container (width < 250px) {
    .metadata-property {
      flex-wrap: wrap;

      &:not(:last-child)::before {
        border-bottom: var(--border-width) solid var(--background-modifier-border);
        content: "";
        inset: 0 8px;
        position: absolute;
        pointer-events: none;
      }
    }

    .metadata-property .metadata-property-value,
    .metadata-add-button {
      padding: 8px var(--side-padding);
      min-height: 40px;
    }
    .metadata-property .multi-select-container {
      padding: 0;
    }
    .metadata-input,
    .metadata-input-number,
    .metadata-input-longtext,
    .metadata-input-checkbox {
      margin: 0 !important;
      padding: 0 !important;
    }
    input::-webkit-calendar-picker-indicator {
      display: none;
    }
  }
}

.workspace-split:not(.mod-root) .metadata-container .metadata-properties {
  --metadata-property-radius: var(--radius-m) !important;
  background-color: var(--background-primary);
}

body:not(.is-mobile) {
  .metadata-property {
    max-height: 100vh;
  }

  .metadata-add-button {
    display: flex;
    cursor: pointer;
  }

  .metadata-add-button,
  .metadata-property[data-property-key="cssclasses"] {
    transition: var(--anim-duration-moderate) var(--anim-motion-cupertino);
  }

  &:not(.hide-frontmatter-off) .markdown-reading-view .metadata-container:not(:hover) {
    .metadata-property[data-property-key="cssclasses"]:not(.has-active-menu):not(:focus-within),
    .metadata-add-button {
      visibility: hidden;
      opacity: 0;
    }
    .metadata-property[data-property-key="cssclasses"]:not(.has-active-menu):not(:focus-within) {
      padding: 0;
      max-height: 0px;
    }
    .metadata-add-button {
      height: 0;
    }
  }

  .prompt.suggestion {
    border-radius: var(--radius-m);
    background-color: var(--background-secondary);
    padding: 6px;

    .suggestion-item {
      padding: 4px 8px;
      font-size: var(--font-ui-small);
    }
  }
}

body.is-mobile {
  .metadata-container {
    --metadata-property-radius: var(--radius-s);
  }

  .metadata-property-key {
    padding-top: 0;
    padding-bottom: 0;
  }

  .metadata-property-key-input,
  .metadata-property-value,
  .metadata-input-number {
    background-color: transparent !important;
    padding: 0 8px !important;
  }

  .metadata-property-warning-icon {
    height: auto;
  }

  input::-webkit-calendar-picker-indicator {
    display: none;
  }
}
