body {
  --bases-no-img-str: "No image path could be found for this file";
  --bases-border-r: 16px;
  --bases-cards-group-padding: 16px;

  --flexcyon-bases-card-padding-top: 8px;
  --flexcyon-bases-card-padding-right: 0px;
  --flexcyon-bases-card-padding-bottom: 0px;
  --flexcyon-bases-card-padding-left: 2px;
  --flexcyon-bases-card-padding: var(--flexcyon-bases-card-padding-top)
    var(--flexcyon-bases-card-padding-right)
    var(--flexcyon-bases-card-padding-bottom)
    var(--flexcyon-bases-card-padding-left);

  --flexcyon-input-verti-padding: 4px;
  --flexcyon-input-horiz-padding: 8px;
  --input-padding: var(--flexcyon-input-verti-padding)
    var(--flexcyon-input-horiz-padding);

  --bases-cards-cover-background: var(--background-secondary);

  --flexcyon-bases-card-flex-grow: 0.55;
  --flexcyon-bases-card-delay-factor: 12.5;

  --flexcyon-bases-padding-horiz: 16px;
  --flexcyon-bases-padding-verti: 16px;
  --bases-embed-padding: 4px;
  --flexcyon-bases-td-padding-l: 2px;
}

.workspace-leaf-content[data-type="bases"] .view-content {
  padding: var(--flexcyon-bases-padding-verti)
    var(--flexcyon-bases-padding-horiz);
}

.workspace-leaf-content[data-type="bases"] .bases-header {
  --bases-header-padding-start: 0px;
  --bases-header-padding-end: 0px;
  --bases-header-border-width: 0 0 1px 0;
  width: min(calc(100% - 8px), 99.5%);
}

.bases-table {
  margin-left: 1px;
  border-right: 0.5px solid var(--text-faint);
}

.bases-view {
  flex-grow: var(--flexcyon-bases-card-flex-grow);
  transition: flex-grow
    calc(
      var(--flexcyon-bases-card-delay-factor) * var(--flexcyon-anim-duration)
    )
    ease-in-out;
}

.bases-cards-item {
  padding: var(--flexcyon-bases-card-padding);
}

div.bases-cards-cover:not([style*="background-image"]) {
  --flexcyon-editor-bg-color: var(--background-primary);
  &::after {
    content: var(--bases-no-img-str);
    color: var(--text-muted);
    justify-content: center;
    display: flex;
    width: max-content;
    margin: 30% auto;
    text-align: center;
    max-width: 85%;
    right: 0;
    left: calc(16px + 6px * 2 + 4px * 2);
  }
  & {
    background-image:
      repeating-linear-gradient(
        calc(30deg + var(--flexcyon-editor-bg-rotation)),
        var(--flexcyon-editor-bg-color),
        var(--flexcyon-editor-bg-color) 1px,
        transparent 1px,
        transparent var(--flexcyon-editor-bg-width)
      ),
      repeating-linear-gradient(
        calc(150deg + var(--flexcyon-editor-bg-rotation)),
        var(--flexcyon-editor-bg-color),
        var(--flexcyon-editor-bg-color) 1px,
        transparent 1px,
        transparent var(--flexcyon-editor-bg-width)
      );
  }
  * {
    background-image: none;
  }
}

.bases-cards-property.mod-title div,
.bases-cards-property.mod-title,
.bases-cards-item {
  border: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  --input-padding: 0px 4px;
}

.bases-cards-label {
  padding: 2px 4px;
}

.bases-td {
  padding-left: var(--flexcyon-bases-td-padding-l);
}

.query-toolbar-menu .bases-query-container {
  margin-top: 4px;
}

.query-toolbar-menu .query-toolbar-section-header {
  color: var(--text-accent);
  span.flair {
    font-size: var(--font-ui-smaller);
    color: var(--color-blue);
    font-weight: 900;
  }
}

.bases-query-container {
  .filter-row {
    gap: 12px;
  }
  .filter-expression {
    gap: 4px;
  }
  .filter-group .filter-group-actions {
    padding-top: 8px;
  }
  .filter-group .filter-group-header .conjunction.dropdown {
    font-size: var(--font-ui-medium);
  }
}

.query-toolbar-menu .query-toolbar-section:not(:last-child) {
  border-bottom: none;
}

.workspace-leaf-content[data-type="markdown"] .block-language-base .bases-view,
.workspace-leaf-content[data-type="markdown"] .bases-embed .bases-view {
  min-height: 100px;
  border: none;
}
.bases-tbody[style*="height: 0px"] {
  &::after {
    white-space: pre;
    content: " \a\
 No entries could be found";
    font-size: var(--font-ui-small);
    color: var(--color-red);
  }
}
.bases-table-cell[disabled*="true"] {
  background-color: transparent;
  &::after {
    color: var(--color-red);
    content: "N/A";
    font-size: var(--font-ui-small);
    margin-left: 8px;
  }
}
.bases-table-cell {
  --input-placeholder-color: var(--color-red);
}
