@property --left-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --right-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@keyframes scrollfade {
  0% {
    --left-fade: 0;
  }
  10%, 100% {
    --left-fade: 3rem;
  }
  0%, 90% {
    --right-fade: 3rem;
  }
  100% {
    --right-fade: 0;
  }
}

.scrollable-hr {
  overflow-x: scroll;
  mask: linear-gradient(to right,
    #0000,
    #ffff var(--left-fade) calc(100% - var(--right-fade)),
    #0000
  );
  animation: scrollfade;
  animation-timeline: --scrollfade;
  scroll-timeline: --scrollfade x;
}

.tracking-label-text {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
}

@media (min-width:600px) {
  .tracking-label-text {
    max-width: 100% !important;
  }
}