@property --module-rail-fade-top { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --module-rail-fade-bottom { syntax: "<length>"; inherits: false; initial-value: 0px; }

.module-rail {
  --module-rail-bg: var(--v5-bg);
  --module-rail-text: var(--v5-text);
  --module-rail-muted: var(--v5-text-muted);
  --module-rail-border: var(--v5-border);
  --module-rail-hover: var(--v5-fill-hover);
  --module-rail-active: var(--ds-cta-soft);
  --module-rail-active-hover: var(--ds-cta-soft-hover);
  --module-rail-on-active: var(--ds-on-cta-soft);
  --module-rail-cta: var(--ds-cta);
  --module-rail-focus: var(--ds-cta);
  --module-rail-item-width: 64px;

  display: flex;
  flex-direction: column;
  flex: none;
  inline-size: var(--rail-width);
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;
  background: var(--module-rail-bg);
  border-inline-end: 1px solid var(--module-rail-border);
}

/* The rail wears v5 on every page, so it reads the v5 values itself instead of the page's visual. */
html:is(:not([data-color]), [data-color=""], [data-color="green"]) .module-rail {
  --module-rail-active: var(--v5-tint);
  --module-rail-active-hover: var(--v5-tint-hover);
  --module-rail-on-active: var(--v5-green-text);
  --module-rail-cta: var(--v5-cta);
  --module-rail-focus: var(--v5-green-text);
}

.module-rail__head {
  display: flex;
  justify-content: center;
  flex: none;
  padding-block: calc(12px + var(--safe-top)) 8px;

  img { inline-size: 40px; block-size: 40px; }
}

.module-rail__logo {
  --hover-size: 0;
  position: relative;
  display: block;
  border-radius: var(--ds-radius-full);
}

.module-rail__logo-caret {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-end: -4px;
  display: grid;
  place-items: center;
  inline-size: 16px;
  block-size: 16px;
  border-radius: var(--ds-radius-full);
  background: var(--module-rail-bg);
  color: var(--module-rail-muted);
}

.module-rail__modules {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-block-size: 0;
  padding-block: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;

  /* The scroll timeline runs only when the list overflows, fading the edge with more modules behind it. */
  mask-image: linear-gradient(transparent, black var(--module-rail-fade-top), black calc(100% - var(--module-rail-fade-bottom)), transparent);

  @supports (animation-timeline: scroll()) {
    animation: module-rail-fade linear both;
    animation-timeline: scroll(self);
  }
}

@keyframes module-rail-fade {
  0%   { --module-rail-fade-top: 0px;  --module-rail-fade-bottom: 24px; }
  8%   { --module-rail-fade-top: 24px; }
  92%  { --module-rail-fade-bottom: 24px; }
  100% { --module-rail-fade-top: 24px; --module-rail-fade-bottom: 0px; }
}

.module-rail__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: none;
  padding-block: 6px calc(10px + var(--safe-bottom));

  &::before {
    content: "";
    inline-size: 32px;
    block-size: 1px;
    margin-block-end: 4px;
    background: var(--module-rail-border);
  }
}

.module-rail__item {
  --hover-size: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: none;
  inline-size: var(--module-rail-item-width);
  padding-block: 4px;
  color: var(--module-rail-muted);
  text-decoration: none;
  cursor: pointer;

  &:hover { color: var(--module-rail-text); }
  &:hover .module-rail__pill { background: var(--module-rail-hover); }
  &:focus-visible { outline: none; }
  &:focus-visible .module-rail__pill { outline: 2px solid var(--module-rail-focus); outline-offset: 1px; }
}

.module-rail__pill {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 30px;
  border-radius: var(--ds-radius-full);
  transition: background-color 150ms;
}

.module-rail__label {
  max-inline-size: 100%;
  overflow: hidden;
  font-size: 10px;
  font-weight: var(--ds-weight-medium);
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-rail__item--active {
  color: var(--module-rail-text);

  .module-rail__pill { background: var(--module-rail-active); color: var(--module-rail-on-active); }
  .module-rail__label { font-weight: var(--ds-weight-semibold); }
  &:hover .module-rail__pill { background: var(--module-rail-active-hover); }
}

/* The counter sits on the pill's corner, out of the flow, so a number never changes the item's size. */
.module-rail__badge {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-end: 0;
  min-inline-size: 16px;
  block-size: 16px;
  padding-inline: 4px;
  background: var(--module-rail-cta);
  box-shadow: 0 0 0 2px var(--module-rail-bg);

  &.hidden { display: none; }
}

/* Push not turned on: the ring pulses around the pill, an outline that takes no room. */
.module-rail__item[data-push-pulsing] {
  animation: none;
  outline: none;

  .module-rail__pill {
    animation: pulsing-outline 2s infinite both;
    outline: 0 solid var(--color-alert);
  }
}

.module-rail__avatar {
  --hover-size: 0;
  display: block;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  margin-block-start: 4px;
  border-radius: var(--ds-radius-full);
  text-decoration: none;
}

.module-rail__avatar--active {
  box-shadow: 0 0 0 2px var(--module-rail-bg), 0 0 0 4px var(--module-rail-cta);
}