/**
 * @file
 * The floating tools rail: a card pinned to the edge of the viewport, showing
 * icons only until it is hovered, focused, or — on touch — tapped open.
 *
 * The collapsed footprint comes straight off the Figma FAB: a 1px border, then
 * 16px of padding either side of a 28px icon, with 16px between the rows and
 * the hairline that separates them. Theme tokens are inlined as hex because the
 * theme ships its palette as Sass maps, not custom properties:
 *   #fff     = bg/secondary
 *   #e8e2db  = border/primary  (stone 200)
 *   #a44f17  = alternate/primary (copper 500)
 *
 * Collapsing is done with a transform rather than an animated width so the card
 * fits whatever the labels are — "Accessibility" and "إمكانية الوصول" are not
 * the same length.
 */

.saib-rail {
  --saib-rail-pad: 16px;
  --saib-rail-icon: 28px;
  /* Border + padding + icon + padding: what stays on screen when collapsed. */
  --saib-rail-collapsed: calc(
    1px + (var(--saib-rail-pad) * 2) + var(--saib-rail-icon)
  );
  /* Labels sit after the icons, so the card hides towards the end edge. */
  --saib-rail-shift: 1;

  position: fixed;
  inset-inline-end: 0;
  top: 50%;
  /* Above the sticky header, below the search overlay and the cookie layer. */
  z-index: 1040;
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: 90vw;
  background: #fff;
  /* The end edge is off-screen, so it carries no border and no radius. */
  border-block: 1px solid #e8e2db;
  border-inline-start: 1px solid #e8e2db;
  border-start-start-radius: 16px;
  border-end-start-radius: 16px;
  box-shadow: 0 6px 28px rgba(26, 28, 30, 0.12);
  transform:
    translateY(-50%)
    translateX(calc(var(--saib-rail-shift) * (100% - var(--saib-rail-collapsed))));
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The popup_modal region wrapper is a Bootstrap .row, and `.row > *` forces
   width: 100%, max-width: 100% and gutter padding onto every child of it. The
   class is repeated here to out-specify that: the card has to be exactly as
   wide as its longest label, whatever language it is in. */
.saib-rail.saib-rail {
  width: max-content;
  max-width: 90vw;
  padding: 0;
}

[dir="rtl"] .saib-rail {
  --saib-rail-shift: -1;
}

.saib-rail__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: var(--saib-rail-pad);
  border: 0;
  background: transparent;
  color: #1a1c1e;
  /* Inherit body/default/regular from the page, which the theme already
     resizes at 1440px and 1024px. Pinning a size here is what stopped the
     labels tracking the type scale through the breakpoints. */
  font: inherit;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.saib-rail__item:hover,
.saib-rail__item:focus {
  color: #a44f17;
  text-decoration: none;
}

/* Hairline between rows, inset by the card's own padding on both sides so it
   lines up with the icon while the card is collapsed. It is a row of its own
   in the design — hence the matching 1px of margin, without which the card
   comes out a pixel short of the 123px the Figma frame measures. */
.saib-rail__item + .saib-rail__item {
  margin-block-start: 1px;
}

.saib-rail__item + .saib-rail__item::before {
  content: "";
  position: absolute;
  inset-inline: var(--saib-rail-pad);
  top: -1px;
  height: 1px;
  background: #e8e2db;
}

.saib-rail__item:focus-visible {
  outline: 2px solid #a44f17;
  outline-offset: -4px;
  border-radius: 14px;
}

.saib-rail__icon {
  flex: 0 0 var(--saib-rail-icon);
  width: var(--saib-rail-icon);
  height: var(--saib-rail-icon);
  object-fit: contain;
}

.saib-rail__label {
  opacity: 0;
  transition: opacity 0.2s ease 0.04s;
}

/* Expanded — pointer, keyboard, a tap, or a script that opened it. */
.saib-rail:focus-within,
.saib-rail.is-open {
  transform: translateY(-50%) translateX(0);
}

.saib-rail:focus-within .saib-rail__label,
.saib-rail.is-open .saib-rail__label {
  opacity: 1;
}

@media (hover: hover) {
  .saib-rail:hover {
    transform: translateY(-50%) translateX(0);
  }

  .saib-rail:hover .saib-rail__label {
    opacity: 1;
  }
}

/* Waiting for the widget script to arrive. */
.saib-rail__item.is-loading .saib-rail__icon {
  animation: saib-rail-pulse 0.9s ease-in-out infinite;
}

@keyframes saib-rail-pulse {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saib-rail,
  .saib-rail__label,
  .saib-rail__item.is-loading .saib-rail__icon {
    transition: none;
    animation: none;
  }
}

@media print {
  .saib-rail {
    display: none;
  }
}