.folder-contents {
  #content {
    max-width: 90rem;
    padding: 0.5rem 1rem;
    margin: 0 auto;
  }

  .topbar {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 0.5rem 0 1rem;
    margin-bottom: 0.5rem;
    background-color: var(--background-color);
    gap: 1rem;
  }

  .react-aria-Breadcrumbs .react-aria-Link {
    font-size: 0.89rem;

    &[data-disabled] {
      text-decoration: none;
    }
  }

  .contents-table {
    --plone-table-width: 100%;
  }

  /* .add {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.375rem;
    border: 0 none;
    border-radius: 50%;
    background: var(--quanta-sapphire);
    color: var(--quanta-air);
    cursor: pointer;

    &:hover {
      background: var(--quanta-royal);
    }
  } */

  .title-link {
    display: inline-flex;
    align-items: center;

    .icon-margin {
      flex-shrink: 0;
      margin-inline-end: 0.5rem;
    }
  }

  .review-state {
    display: flex;
    align-items: center;

    &::before {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background-color: var(--quanta-dolphin);
      content: '';
      margin-inline-end: 0.5rem;
    }

    &.private::before {
      background-color: var(--quanta-rose);
    }

    &.published::before {
      background-color: var(--quanta-cobalt);
    }

    &.intranet::before {
      background-color: var(--quanta-neon);
    }

    &.draft::before {
      background-color: #f6a808;
    }
  }

  .drag-cell-header,
  .actions-cell-header,
  .contents-actions,
  .item-actions-trigger {
    --border-color: transparent;
    --border-color-pressed: transparent;
    --border-color-disabled: transparent;
    padding: 0;
  }

  .contents-actions {
    margin-inline-start: auto;
  }

  .contents-action-trigger {
    &.delete {
      --text-color: var(--quanta-candy);
    }
  }

  .drag-column-header,
  .drag-cell {
    display: none;
  }
}

body.view-contentsview {
  h1 {
    margin-top: 0.4em;
    font-size: 1.5rem;
  }

  .tooltip {
    padding: 0.1875rem 0.375rem;
    border-radius: 3px;
    margin-top: 0.25rem;
    background-color: var(--quanta-denim);
    color: var(--quanta-air);
    line-height: 1.5;
  }

  .react-aria-Popover.scroll {
    overflow: auto;
  }

  .react-aria-Popover .label {
    color: var(--quanta-pigeon);
    font-size: 0.85em;
    font-weight: 500;
  }

  .table-indexes-list,
  .item-actions-list,
  .add-content-list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .table-indexes-list-item,
  .add-content-list-item {
    padding: 12px;

    & + li {
      border-top: 1px solid var(--quanta-smoke);
    }

    a {
      display: flex;
      align-items: center;
      color: var(--quanta-sapphire);
      text-decoration: none;

      &:hover {
        color: var(--quanta-royal);
        text-decoration: underline;
      }
    }

    .icon {
      margin-inline-start: auto;
    }
  }

  .item-actions-list-item {
    padding: 12px 0;
    font-size: 1rem;

    &.view,
    &.move-to-bottom {
      border-bottom: 1px solid var(--quanta-smoke);
    }

    &.delete {
      --link-color: var(--quanta-candy);
      --link-color-secondary: var(--quanta-wine);
    }

    .icon {
      flex-shrink: 0;
      margin-inline-end: 1rem;
    }

    .react-aria-Link {
      display: inline-flex;
      align-items: center;
      padding: 0;
      border: 0;
      background: 0 none;
      font-family: inherit;
      text-align: left;
    }
  }

  .react-aria-Dialog {
    padding: 0.75rem;

    .react-aria-Checkbox {
      font-size: 1rem;
    }
  }

  .react-aria-MenuItem {
    font-size: 1rem;
  }

  .rearrange-menu-item {
    display: flex;
    justify-content: space-between;

    .icon {
      flex-shrink: 0;
    }

    &.open {
      background-color: var(--highlight-pressed);
    }

    &.focused {
      background-color: var(--highlight-background);
      color: var(--highlight-foreground);
    }
  }
}

@media (min-width: 992px) {
  .folder-contents {
    #content {
      padding-right: 2rem;
      padding-left: 2rem;
    }

    .topbar {
      position: sticky;
      z-index: 1;
      top: 0;
      flex-wrap: nowrap;
    }

    .drag-column-header,
    .drag-cell {
      display: table-cell;
    }
  }
}