.dsm-pinned-expressions {
  position: sticky;
  top: 0;
  z-index: 99;
  // background-color: inserted via javascript

  .dsm-has-pinned-expressions & {
    box-shadow: -2px 2px 4px rgba(0 0 0 / 15%);
    border-bottom: 1px solid rgba(0 0 0 / 20%);
  }
}

body .dcg-container {
  .dsm-has-pinned-expressions .dcg-expression-top-bar.dcg-expressions-scrolled {
    box-shadow: none;
  }

  .dcg-exppanel-outer .dcg-exppanel-container {
    // see the override for "expressions/list-view" for the list of existing elements

    // Using grid & grid-row to place .dcg-exppanel.dsm-pinned-expressions after the default .dcg-exppanel
    // in the DOM (so the default .dcg-exppanel gets selected in calculations)
    // but above the default .dcg-exppanel in the page, so it appears pinned above
    display: grid;
    // 1fr wins out, so only the default .dcg-exppanel expands
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-columns: 100%;

    .dcg-exppanel {
      // placed after the expression search bar
      grid-row: 5 / 6;
    }

    .dcg-exppanel.dsm-pinned-expressions {
      // placed before the expression search bar
      // but after Ticker
      grid-row: 3 / 4;
      overflow-y: hidden;

      // need to override with higher precedence, and dcg uses a bunch of classes
      .dcg-expressionitem .dcg-tab {
        cursor: default;
      }
    }
  }
}
