/* ==========================================================================
   THE PLATFORM RAIL

   The strip of product marks down the right edge of a Kore app. One component
   for every demo, because the whole point of the rail is that it is the same
   everywhere: it is how the platform tells you it is one platform.

   Sized in px rather than rem. Each demo renders inside a canvas that gets
   scaled as a whole, so the rail has to hold its proportions against the app
   beside it, not against the page's type scale.
   ========================================================================== */
/* No positioning of its own: the host places it. The CRM demo gives it a
   grid cell, iReview a flex track, and a rail that positioned itself would
   fight both. It only insists on its width and on filling the height it is
   given. */
.krail {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 2px;
  width: 44px;
  flex: 0 0 44px;
  padding: 10px 0;
  background: #fff;
  border-left: 1px solid #e8edf2;
  /* Not clipped: the name on hover opens to the left, out over the app, and
     overflow:hidden ate it. Twelve marks at 34px come to 408px, so there is
     nothing to clip in a canvas 840px tall. */
  overflow: visible;
  z-index: 3;
}

.krail__item {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.krail__item:hover {
  background: #f1f5f9;
}
/* The product you are looking at, in colour against the greyed rest. The tint
   is the one the iReview app uses, kept so the rail is recognisably the same
   control it is there. */
.krail__item.is-on {
  background: #dcfce7;
}
.krail__item img {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* The name, on hover, to the left so it opens into the app rather than off
   the edge of the screen. */
.krail__tip {
  position: absolute;
  z-index: 4;
  right: 38px;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  padding: 5px 9px;
  border-radius: 6px;
  background: #0f2033;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}
.krail__item:hover .krail__tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Below the demos' own phone breakpoint the app drops its chrome and the rail
   goes with it: twelve marks down the side of a 330px window is most of the
   window. */
@media (max-width: 900px) {
  .krail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .krail__item,
  .krail__tip {
    transition: none;
  }
}