/* ==========================================================================
   MS WORD ONLINE - RULER STYLES
   Interactive Horizontal Ruler with Draggable Margins & Indent Markers
   ========================================================================== */

.ruler-container {
  height: var(--ruler-height);
  background-color: #f3f2f1;
  border-bottom: 1px solid #d1d5db;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  z-index: 60;
  user-select: none;
}

.ruler-track {
  width: var(--page-width);
  height: 18px;
  background-color: #ffffff;
  border: 1px solid #c8c6c4;
  position: relative;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.ruler-ticks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: 
    repeating-linear-gradient(to right, #8a8886 0, #8a8886 1px, transparent 1px, transparent 12px),
    repeating-linear-gradient(to right, #201f1e 0, #201f1e 1px, transparent 1px, transparent 96px);
}

/* Margin Shade Overlays on Ruler */
.ruler-margin-left-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--page-padding-left);
  height: 100%;
  background-color: #e1dfdd;
  border-right: 1px solid #8a8886;
}

.ruler-margin-right-shade {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--page-padding-right);
  height: 100%;
  background-color: #e1dfdd;
  border-left: 1px solid #8a8886;
}

/* Draggable Sliders */
.ruler-marker {
  position: absolute;
  top: 0;
  width: 12px;
  height: 18px;
  cursor: ew-resize;
  z-index: 5;
  display: flex;
  justify-content: center;
  transform: translateX(-50%);
}

.ruler-marker-left {
  left: var(--page-padding-left);
}

.ruler-marker-right {
  right: calc(var(--page-padding-right) - 6px);
}

.ruler-marker::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #185abd;
  position: absolute;
  top: 0;
}

.ruler-marker::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid #185abd;
  position: absolute;
  bottom: 0;
}