@import 'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap';@import 'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap';


/**
 * Color tokens
 *
 * These are the values that express the colors of the design system.
 */
/**
 * Color tokens
 *
 * These are the values that express the colors of the design system.
 */
/**
 * Color tokens
 *
 * These are the values that express the colors of the design system.
 */
/**
 * Font tokens
 *
 * These are the values that express the atomic units
 * of the design system.
 */
/*
* DOCUMENTATION
* nesting: https://sass-lang.com/documentation/at-rules/mixin/
* surrfixes: https://sass-lang.com/documentation/style-rules/parent-selector/#adding-suffixes
* if else: https://sass-lang.com/documentation/at-rules/control/if
*/
/**
 * Color tokens
 *
 * These are the values that express the colors of the design system.
 */
.ListHeader {
  font-family: figtree, arial, sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 500;
  color: #8c8ca7;
  position: sticky;
  top: 0;
  background-color: #f2f5fa;
  padding: 4px 0;
  text-align: center;
  z-index: 1;
}
.ListHeader .sort-by-items {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.ListHeader .sort-by-items .left {
  display: flex;
  align-items: center;
  width: var(--left-section-width);
  flex: 1 1 var(--left-section-width);
}
.ListHeader .sort-by-items .left .item {
  display: flex;
  cursor: pointer;
  flex-grow: 1;
}
.ListHeader .sort-by-items .left .item .title-text {
  display: inline-block;
}
.ListHeader .sort-by-items .left .item .selector {
  margin-left: 3px;
}
.ListHeader .sort-by-items .right {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  width: var(--right-section-width);
  flex: 1 1 var(--right-section-width);
}
.ListHeader .sort-by-items .right .item {
  display: flex;
  position: relative;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  padding: 0 2px;
}
.ListHeader .sort-by-items .right .item .title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.ListHeader .sort-by-items .right .item .selector {
  cursor: pointer;
}
.ListHeader .sort-by-items .right .item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0; /* Position to be in the middle of the gap */
  height: 100%;
  width: 1px;
  background-color: #8c8ca7;
}