@arcgis/core 4.25.0-next.20221107 → 4.25.0

package/assets/esri/themes/base/_mixins.scss

@@ -1,665 +1,665 @@
-////////////////////////////////////////
-// Widget Common Mixins
-@use "sass:math";
-
-@mixin boxShadow($arguments) {
-  box-shadow: #{$arguments};
-}
-
-@mixin defaultBoxShadow() {
-  @include boxShadow("0 1px 2px rgba(0, 0, 0, 0.3)");
-}
-
-@mixin borderBoxShadow($color: $border-color) {
-  box-shadow: 0 0 0 1px $color;
-}
-
-@mixin cardBoxShadow($color: $border-color) {
-  box-shadow: 0 1px 0 $color;
-}
-
-@mixin pointerStyle($width, $height) {
-  content: "";
-  position: absolute;
-  width: $width + px;
-  height: $height + px;
-}
-
-@mixin outlineStyle() {
-  outline: 2px solid $interactive-font-color;
-  outline-offset: 2px;
-  z-index: 1;
-}
-
-@function sqrt($r) {
-  $x0: 1;
-  $x1: $x0;
-  @for $i from 1 through 10 {
-    $x1: $x0 - math.div($x0 * $x0 - abs($r), 2 * $x0);
-    $x0: $x1;
-  }
-  @return $x1;
-}
-
-@mixin contentMaxHeightDockedSide($contentHeight) {
-  $pageMenuHeight: $contentHeight - 60;
-  .esri-popup--is-docked {
-    &-top-left,
-    &-top-right,
-    &-bottom-left,
-    &-bottom-right {
-      .esri-popup__content {
-        max-height: #{$contentHeight}px;
-      }
-    }
-  }
-}
-
-@mixin popupHeight_BasedOnViewSize($height) {
-  $pageMenuHeight: $height - 50;
-  .esri-popup__main-container {
-    max-height: $height;
-  }
-  &.esri-popup--feature-menu-open {
-    .esri-popup__feature-menu-viewport {
-      max-height: $pageMenuHeight;
-    }
-  }
-}
-
-@mixin wordbreak() {
-  /* For Firefox */
-  white-space: pre-wrap;
-  word-break: break-all;
-  /**
-  * IE should ignore these.
-  * Modern browsers should override break-all.
-  */
-  word-wrap: break-word;
-  word-break: break-word;
-}
-
-@mixin measurementWidgetStyles($selector) {
-  .#{$selector} {
-    &__container {
-      position: relative;
-      padding: $cap-spacing 0;
-      overflow-y: auto;
-      a {
-        text-decoration: none;
-      }
-    }
-
-    &__header {
-      position: relative;
-      font-size: $font-size__body;
-      align-items: flex-start;
-      justify-content: space-between;
-      display: flex;
-      flex: 0 0 auto;
-    }
-
-    &__header-title,
-    h1 &__header-title {
-      font: {
-        size: $font-size__header-text;
-        weight: $font-weight--bold;
-      }
-      padding: 8px 0;
-      margin: 0;
-      display: block;
-      flex: 1;
-      word-break: break-word;
-      text-align: left;
-    }
-
-    &__panel--error {
-      color: $font-color--error;
-      padding: 0 $side-spacing;
-      animation: esri-fade-in 250ms ease-in-out;
-    }
-
-    &__hint {
-      padding: 0 $side-spacing;
-      animation: esri-fade-in 250ms ease-in-out;
-
-      &-text {
-        margin: $cap-spacing 0;
-        padding: 0;
-      }
-    }
-
-    &__measurement {
-      padding: $cap-spacing $side-spacing;
-      margin: $cap-spacing 0;
-      background-color: $background-color--offset;
-      animation: esri-fade-in 250ms ease-in-out;
-
-      &-item {
-        display: flex;
-        padding-bottom: $cap-spacing;
-        flex-flow: column;
-
-        &--disabled {
-          display: flex;
-          color: rgba($font-color, $opacity--disabled);
-        }
-
-        &-title {
-          padding-bottom: $cap-spacing--quarter;
-        }
-
-        &-value {
-          font-weight: $font-weight--bold;
-        }
-      }
-    }
-
-    &__settings {
-      display: flex;
-      justify-content: space-between;
-      padding: $cap-spacing--half $side-spacing;
-    }
-
-    &__units {
-      display: flex;
-      flex: 0 1 48%;
-      flex-flow: column;
-      padding: 0;
-      animation: esri-fade-in 250ms ease-in-out;
-      &:only-child {
-        flex: 1 0 100%;
-      }
-    }
-
-    &__units-select {
-      width: 100%;
-      padding: {
-        left: 0.5em;
-        right: 2.7em;
-      }
-
-      &-wrapper {
-        width: 100%;
-      }
-    }
-
-    &__actions {
-      display: flex;
-      flex-flow: column;
-      justify-content: center;
-      padding: 0 $side-spacing;
-    }
-  }
-
-  [dir="rtl"] {
-    .#{$selector}__units-select {
-      padding: {
-        left: 2.7em;
-        right: 0.5em;
-      }
-    }
-  }
-}
-
-// Smart Mapping Sliders
-@mixin smartMappingSlider($class) {
-  .#{$class} {
-    direction: ltr;
-    min-width: $smartmapping-slider__width;
-
-    .esri-slider {
-      font-size: $font-size--small;
-      position: relative;
-      z-index: 1;
-
-      .esri-slider__content {
-        flex-direction: row;
-        height: $smartmapping-slider__base-height;
-        margin: 0 auto 0 40%;
-      }
-
-      .esri-slider__track {
-        background-color: transparent;
-        display: flex;
-        flex: 0 0 auto;
-      }
-
-      .esri-slider__anchor {
-        border-bottom: 1px solid $interactive-font-color;
-        border-top: 1px solid $background-color;
-        width: $smartmapping-slider__ramp-width;
-
-        &:hover,
-        &:focus {
-          .esri-slider__label {
-            text-decoration: underline;
-          }
-
-          .esri-slider__thumb {
-            background-color: $interactive-font-color--hover;
-            border: none;
-            transform: none;
-
-            &:after {
-              border-left-color: $interactive-font-color--hover;
-            }
-            &:before {
-              background-color: $button-color--bright;
-              transform: translate3d(-$smartmapping-slider__thumb-size--offset * 0.25, 0, 0);
-            }
-          }
-        }
-      }
-
-      .esri-slider__thumb {
-        background-color: $smartmapping-slider__thumb-background-color;
-        border-radius: 0;
-        border: none;
-        height: $smartmapping-slider__thumb-size;
-        left: -$smartmapping-slider__thumb-size;
-        top: -$smartmapping-slider__thumb-size--offset;
-        width: $smartmapping-slider__thumb-size--offset;
-
-        &:before {
-          position: absolute;
-          top: 0;
-          left: -$smartmapping-slider__thumb-size--offset * 0.25;
-          width: $smartmapping-slider__thumb-size--offset * 0.5;
-          content: "";
-          height: $smartmapping-slider__thumb-size;
-          background-color: $interactive-font-color;
-          transition: transform 125ms ease-in-out, background-color 125ms ease-in-out;
-        }
-        &:after {
-          position: absolute;
-          top: 0;
-          left: $smartmapping-slider__thumb-size--offset;
-          content: "";
-          border-bottom: $smartmapping-slider__thumb-pointer-size solid #0000;
-          border-left: $smartmapping-slider__thumb-pointer-size solid $interactive-font-color;
-          border-top: $smartmapping-slider__thumb-pointer-size solid #0000;
-          height: 0;
-          width: 0;
-        }
-      }
-
-      .esri-slider__label {
-        left: auto;
-        line-height: 20px;
-        min-width: 50px;
-        right: 50px;
-        text-align: right;
-
-        &:hover {
-          background-color: $background-color--hover;
-        }
-      }
-
-      .esri-slider__segment {
-        &:hover {
-          cursor: default;
-        }
-      }
-
-      .esri-slider__range-input {
-        margin: auto;
-        text-align: center;
-        width: 50%;
-      }
-
-      .esri-slider__label-input {
-        text-align: right;
-        width: 70px;
-      }
-
-      .esri-slider__max,
-      .esri-slider__min {
-        flex: none;
-        margin: $cap-spacing--three-quarters auto;
-        padding: $cap-spacing--three-quarters $cap-spacing;
-        position: relative;
-        width: auto;
-        z-index: 0;
-
-        &:before {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 0;
-          height: 100%;
-          width: 100%;
-          z-index: -1;
-        }
-
-        &.esri-slider__range--active {
-          background-color: $background-color;
-        }
-
-        .esri-slider__range-input {
-          margin: 0 auto;
-        }
-      }
-
-      .esri-slider__extra-content {
-        display: flex;
-        height: 100%;
-      }
-
-      .esri-histogram__svg {
-        overflow: visible;
-      }
-
-      .esri-histogram__label {
-        fill: $font-color;
-        stroke-width: 2;
-      }
-
-      .esri-histogram__average-line,
-      .esri-histogram__label {
-        paint-order: stroke;
-        stroke: $background-color;
-      }
-
-      .zoom-cap--max {
-        position: absolute;
-        top: 0;
-      }
-
-      .zoom-cap--min {
-        position: absolute;
-        bottom: 0;
-      }
-
-      .zoom-cap {
-        height: 11px;
-        width: $smartmapping-slider__ramp-width;
-        stroke-width: 0;
-
-        .zoom-cap--mask {
-          fill: #fff;
-        }
-        .zoom-cap--line {
-          fill: #fff;
-        }
-        .zoom-cap--underline {
-          fill: #323232;
-        }
-
-        &:hover {
-          cursor: pointer;
-
-          .zoom-cap--mask {
-            fill: #fff;
-          }
-          .zoom-cap--line {
-            fill: #0079c1;
-          }
-          .zoom-cap--underline {
-            fill: #fff;
-          }
-        }
-      }
-    }
-  }
-
-  .#{$class}__ramp {
-    display: flex;
-    height: 100%;
-    width: $smartmapping-slider__ramp-width;
-    position: relative;
-
-    svg {
-      height: 100%;
-      width: 100%;
-      position: absolute;
-      stroke: $smartmapping-slider__ramp-stroke-color;
-      stroke-width: $smartmapping-slider__ramp-stroke-width;
-      left: 0;
-
-      rect {
-        height: 100%;
-        width: 100%;
-      }
-
-      path {
-        stroke-width: $smartmapping-slider__ramp-path-stroke-width;
-      }
-    }
-  }
-
-  .#{$class}__histogram-container {
-    display: flex;
-    flex: 1 1 0;
-    height: 100%;
-    width: $smartmapping-slider__histogram-width;
-  }
-
-  .#{$class}.#{$class}--interactive-track {
-    .esri-slider {
-      .esri-slider__content {
-        margin: 0 auto 0 35%;
-      }
-
-      .esri-slider__track {
-        background-color: transparent;
-        width: 12px;
-      }
-    }
-
-    .esri-slider__anchor--active {
-      .esri-slider__label {
-        text-decoration: underline;
-      }
-      .esri-slider__thumb {
-        background-color: $interactive-font-color--hover;
-        border: none;
-        transform: none;
-        &:after {
-          border-left-color: $interactive-font-color--hover;
-        }
-        &:before {
-          background-color: $button-color--bright;
-          transform: translate3d(-$smartmapping-slider__thumb-size--offset * 0.25, 0, 0);
-        }
-      }
-    }
-
-    .esri-slider__segment--interactive {
-      background-size: 12px 100%;
-      background-repeat: no-repeat;
-      background-position: 50% 50%;
-      background-image: url(../base/images/SM-Slider_TrackBackground_idle.svg);
-
-      &.esri-slider__segment--active {
-        background-color: #eee;
-        background-image: url(../base/images/SM-Slider_TrackBackground_hover.svg);
-      }
-
-      &:hover,
-      &:focus {
-        cursor: pointer;
-        background-color: #eee;
-        background-image: url(../base/images/SM-Slider_TrackBackground_hover.svg);
-      }
-    }
-  }
-}
-
-@mixin loopingProgressBar($selector) {
-  #{$selector}:before,
-  #{$selector}:after {
-    content: "";
-    opacity: 1;
-    position: absolute;
-    height: 1px;
-    top: 0;
-    transition: opacity 500ms ease-in-out;
-  }
-  #{$selector}:before {
-    background-color: $border-color;
-    width: 100%;
-    z-index: 0;
-  }
-  #{$selector}:after {
-    background-color: $interactive-font-color;
-    width: $looping-progress-bar-width;
-    z-index: 0;
-    animation: looping-progresss-bar-ani $looping-progress-bar-params;
-  }
-}
-
-/**
- * Adds the base styles for an arrow facing down.
- */
-@mixin arrowButton() {
-  $size: 18px;
-  $icon-size: 10px;
-  $padding: ($size - $icon-size) * 0.5;
-
-  font-size: $icon-size;
-  line-height: $icon-size;
-
-  width: $size;
-  height: $size;
-  padding: $padding;
-
-  cursor: pointer;
-  transition: all 0.1s ease-in-out;
-  text-align: center;
-
-  border: none;
-  background: none;
-
-  appearance: none;
-
-  @each $icomoon-selector in $icomoon-selectors {
-    @extend #{$icomoon-selector};
-  }
-
-  @extend .esri-icon-left;
-
-  &:hover:not(:disabled) {
-    background: $background-color--hover;
-  }
-
-  &:disabled {
-    opacity: 0.4;
-    cursor: default;
-  }
-
-  &.esri-arrow-down {
-    transform: rotate(-90deg);
-  }
-
-  &.esri-arrow-up {
-    transform: rotate(90deg);
-  }
-
-  &.esri-arrow-left {
-    transform: rotate(0deg);
-  }
-
-  &.esri-arrow-right {
-    transform: rotate(180deg);
-  }
-}
-
-/**
-* Styles for Sortable
-*/
-@mixin sortableChosen($selector) {
-  transition: background-color 125ms ease-in-out;
-  &.#{$selector} {
-    background-color: $background-color--active;
-    opacity: $opacity--sortable;
-  }
-}
-
-@mixin timeSlider() {
-  $tick-width: 1px;
-  $focus-ring-width: 2px;
-  $thumb-size: 16px;
-  $tick-padding: 3px;
-  $tick-height: 3px;
-  $tick-height-primary: 6px;
-
-  .esri-slider.esri-slider--horizontal {
-    width: inherit;
-    flex-grow: 1;
-    padding: 30px 13px 28px 13px;
-
-    .esri-widget__anchor,
-    .esri-slider__anchor {
-      outline: none !important;
-      color: inherit;
-    }
-
-    .esri-slider__anchor:focus .esri-slider__thumb {
-      outline: solid $focus-ring-width $border-color--active;
-      outline-offset: $focus-ring-width;
-      overflow: visible;
-    }
-
-    .esri-slider__segment.esri-slider__segment-0 {
-      background-color: unset; // Reset blue first segment
-    }
-
-    .esri-slider__thumb {
-      width: $thumb-size;
-      height: $thumb-size;
-      left: -$thumb-size * 0.5;
-      top: -$thumb-size * 0.5;
-    }
-
-    .esri-slider__tick {
-      width: $tick-width + ($tick-padding * 2);
-      height: 20px;
-      padding: $tick-padding; // Make ticks slightly easier to click on
-      margin: -$tick-padding;
-      background: none;
-
-      &:after {
-        content: "";
-        display: block;
-        width: $tick-width;
-        background: #6e6e6e66;
-      }
-
-      &.secondary-tick:after {
-        height: $tick-height;
-      }
-
-      &.primary-tick {
-        &:after {
-          height: $tick-height-primary;
-        }
-
-        .primary-tick__ampm {
-          font-size: $font-size--tiny;
-        }
-      }
-    }
-
-    .esri-slider__ticks {
-      margin: 0;
-      margin-top: $cap-spacing--half;
-      width: calc(100% - #{$tick-width});
-    }
-
-    .esri-slider__tick-label {
-      font-size: $font-size--tiny-time-slider;
-      line-height: normal;
-      margin-top: $cap-spacing;
-      text-align: center;
-    }
-
-    .esri-slider__label {
-      font-size: $font-size--small;
-    }
-
-    .esri-slider__label-input {
-      font-size: $font-size--tiny-time-slider;
-    }
-  }
-}
+////////////////////////////////////////
+// Widget Common Mixins
+@use "sass:math";
+
+@mixin boxShadow($arguments) {
+  box-shadow: #{$arguments};
+}
+
+@mixin defaultBoxShadow() {
+  @include boxShadow("0 1px 2px rgba(0, 0, 0, 0.3)");
+}
+
+@mixin borderBoxShadow($color: $border-color) {
+  box-shadow: 0 0 0 1px $color;
+}
+
+@mixin cardBoxShadow($color: $border-color) {
+  box-shadow: 0 1px 0 $color;
+}
+
+@mixin pointerStyle($width, $height) {
+  content: "";
+  position: absolute;
+  width: $width + px;
+  height: $height + px;
+}
+
+@mixin outlineStyle() {
+  outline: 2px solid $interactive-font-color;
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+@function sqrt($r) {
+  $x0: 1;
+  $x1: $x0;
+  @for $i from 1 through 10 {
+    $x1: $x0 - math.div($x0 * $x0 - abs($r), 2 * $x0);
+    $x0: $x1;
+  }
+  @return $x1;
+}
+
+@mixin contentMaxHeightDockedSide($contentHeight) {
+  $pageMenuHeight: $contentHeight - 60;
+  .esri-popup--is-docked {
+    &-top-left,
+    &-top-right,
+    &-bottom-left,
+    &-bottom-right {
+      .esri-popup__content {
+        max-height: #{$contentHeight}px;
+      }
+    }
+  }
+}
+
+@mixin popupHeight_BasedOnViewSize($height) {
+  $pageMenuHeight: $height - 50;
+  .esri-popup__main-container {
+    max-height: $height;
+  }
+  &.esri-popup--feature-menu-open {
+    .esri-popup__feature-menu-viewport {
+      max-height: $pageMenuHeight;
+    }
+  }
+}
+
+@mixin wordbreak() {
+  /* For Firefox */
+  white-space: pre-wrap;
+  word-break: break-all;
+  /**
+  * IE should ignore these.
+  * Modern browsers should override break-all.
+  */
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+@mixin measurementWidgetStyles($selector) {
+  .#{$selector} {
+    &__container {
+      position: relative;
+      padding: $cap-spacing 0;
+      overflow-y: auto;
+      a {
+        text-decoration: none;
+      }
+    }
+
+    &__header {
+      position: relative;
+      font-size: $font-size__body;
+      align-items: flex-start;
+      justify-content: space-between;
+      display: flex;
+      flex: 0 0 auto;
+    }
+
+    &__header-title,
+    h1 &__header-title {
+      font: {
+        size: $font-size__header-text;
+        weight: $font-weight--bold;
+      }
+      padding: 8px 0;
+      margin: 0;
+      display: block;
+      flex: 1;
+      word-break: break-word;
+      text-align: left;
+    }
+
+    &__panel--error {
+      color: $font-color--error;
+      padding: 0 $side-spacing;
+      animation: esri-fade-in 250ms ease-in-out;
+    }
+
+    &__hint {
+      padding: 0 $side-spacing;
+      animation: esri-fade-in 250ms ease-in-out;
+
+      &-text {
+        margin: $cap-spacing 0;
+        padding: 0;
+      }
+    }
+
+    &__measurement {
+      padding: $cap-spacing $side-spacing;
+      margin: $cap-spacing 0;
+      background-color: $background-color--offset;
+      animation: esri-fade-in 250ms ease-in-out;
+
+      &-item {
+        display: flex;
+        padding-bottom: $cap-spacing;
+        flex-flow: column;
+
+        &--disabled {
+          display: flex;
+          color: rgba($font-color, $opacity--disabled);
+        }
+
+        &-title {
+          padding-bottom: $cap-spacing--quarter;
+        }
+
+        &-value {
+          font-weight: $font-weight--bold;
+        }
+      }
+    }
+
+    &__settings {
+      display: flex;
+      justify-content: space-between;
+      padding: $cap-spacing--half $side-spacing;
+    }
+
+    &__units {
+      display: flex;
+      flex: 0 1 48%;
+      flex-flow: column;
+      padding: 0;
+      animation: esri-fade-in 250ms ease-in-out;
+      &:only-child {
+        flex: 1 0 100%;
+      }
+    }
+
+    &__units-select {
+      width: 100%;
+      padding: {
+        left: 0.5em;
+        right: 2.7em;
+      }
+
+      &-wrapper {
+        width: 100%;
+      }
+    }
+
+    &__actions {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      padding: 0 $side-spacing;
+    }
+  }
+
+  [dir="rtl"] {
+    .#{$selector}__units-select {
+      padding: {
+        left: 2.7em;
+        right: 0.5em;
+      }
+    }
+  }
+}
+
+// Smart Mapping Sliders
+@mixin smartMappingSlider($class) {
+  .#{$class} {
+    direction: ltr;
+    min-width: $smartmapping-slider__width;
+
+    .esri-slider {
+      font-size: $font-size--small;
+      position: relative;
+      z-index: 1;
+
+      .esri-slider__content {
+        flex-direction: row;
+        height: $smartmapping-slider__base-height;
+        margin: 0 auto 0 40%;
+      }
+
+      .esri-slider__track {
+        background-color: transparent;
+        display: flex;
+        flex: 0 0 auto;
+      }
+
+      .esri-slider__anchor {
+        border-bottom: 1px solid $interactive-font-color;
+        border-top: 1px solid $background-color;
+        width: $smartmapping-slider__ramp-width;
+
+        &:hover,
+        &:focus {
+          .esri-slider__label {
+            text-decoration: underline;
+          }
+
+          .esri-slider__thumb {
+            background-color: $interactive-font-color--hover;
+            border: none;
+            transform: none;
+
+            &:after {
+              border-left-color: $interactive-font-color--hover;
+            }
+            &:before {
+              background-color: $button-color--bright;
+              transform: translate3d(-$smartmapping-slider__thumb-size--offset * 0.25, 0, 0);
+            }
+          }
+        }
+      }
+
+      .esri-slider__thumb {
+        background-color: $smartmapping-slider__thumb-background-color;
+        border-radius: 0;
+        border: none;
+        height: $smartmapping-slider__thumb-size;
+        left: -$smartmapping-slider__thumb-size;
+        top: -$smartmapping-slider__thumb-size--offset;
+        width: $smartmapping-slider__thumb-size--offset;
+
+        &:before {
+          position: absolute;
+          top: 0;
+          left: -$smartmapping-slider__thumb-size--offset * 0.25;
+          width: $smartmapping-slider__thumb-size--offset * 0.5;
+          content: "";
+          height: $smartmapping-slider__thumb-size;
+          background-color: $interactive-font-color;
+          transition: transform 125ms ease-in-out, background-color 125ms ease-in-out;
+        }
+        &:after {
+          position: absolute;
+          top: 0;
+          left: $smartmapping-slider__thumb-size--offset;
+          content: "";
+          border-bottom: $smartmapping-slider__thumb-pointer-size solid #0000;
+          border-left: $smartmapping-slider__thumb-pointer-size solid $interactive-font-color;
+          border-top: $smartmapping-slider__thumb-pointer-size solid #0000;
+          height: 0;
+          width: 0;
+        }
+      }
+
+      .esri-slider__label {
+        left: auto;
+        line-height: 20px;
+        min-width: 50px;
+        right: 50px;
+        text-align: right;
+
+        &:hover {
+          background-color: $background-color--hover;
+        }
+      }
+
+      .esri-slider__segment {
+        &:hover {
+          cursor: default;
+        }
+      }
+
+      .esri-slider__range-input {
+        margin: auto;
+        text-align: center;
+        width: 50%;
+      }
+
+      .esri-slider__label-input {
+        text-align: right;
+        width: 70px;
+      }
+
+      .esri-slider__max,
+      .esri-slider__min {
+        flex: none;
+        margin: $cap-spacing--three-quarters auto;
+        padding: $cap-spacing--three-quarters $cap-spacing;
+        position: relative;
+        width: auto;
+        z-index: 0;
+
+        &:before {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 0;
+          height: 100%;
+          width: 100%;
+          z-index: -1;
+        }
+
+        &.esri-slider__range--active {
+          background-color: $background-color;
+        }
+
+        .esri-slider__range-input {
+          margin: 0 auto;
+        }
+      }
+
+      .esri-slider__extra-content {
+        display: flex;
+        height: 100%;
+      }
+
+      .esri-histogram__svg {
+        overflow: visible;
+      }
+
+      .esri-histogram__label {
+        fill: $font-color;
+        stroke-width: 2;
+      }
+
+      .esri-histogram__average-line,
+      .esri-histogram__label {
+        paint-order: stroke;
+        stroke: $background-color;
+      }
+
+      .zoom-cap--max {
+        position: absolute;
+        top: 0;
+      }
+
+      .zoom-cap--min {
+        position: absolute;
+        bottom: 0;
+      }
+
+      .zoom-cap {
+        height: 11px;
+        width: $smartmapping-slider__ramp-width;
+        stroke-width: 0;
+
+        .zoom-cap--mask {
+          fill: #fff;
+        }
+        .zoom-cap--line {
+          fill: #fff;
+        }
+        .zoom-cap--underline {
+          fill: #323232;
+        }
+
+        &:hover {
+          cursor: pointer;
+
+          .zoom-cap--mask {
+            fill: #fff;
+          }
+          .zoom-cap--line {
+            fill: #0079c1;
+          }
+          .zoom-cap--underline {
+            fill: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  .#{$class}__ramp {
+    display: flex;
+    height: 100%;
+    width: $smartmapping-slider__ramp-width;
+    position: relative;
+
+    svg {
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      stroke: $smartmapping-slider__ramp-stroke-color;
+      stroke-width: $smartmapping-slider__ramp-stroke-width;
+      left: 0;
+
+      rect {
+        height: 100%;
+        width: 100%;
+      }
+
+      path {
+        stroke-width: $smartmapping-slider__ramp-path-stroke-width;
+      }
+    }
+  }
+
+  .#{$class}__histogram-container {
+    display: flex;
+    flex: 1 1 0;
+    height: 100%;
+    width: $smartmapping-slider__histogram-width;
+  }
+
+  .#{$class}.#{$class}--interactive-track {
+    .esri-slider {
+      .esri-slider__content {
+        margin: 0 auto 0 35%;
+      }
+
+      .esri-slider__track {
+        background-color: transparent;
+        width: 12px;
+      }
+    }
+
+    .esri-slider__anchor--active {
+      .esri-slider__label {
+        text-decoration: underline;
+      }
+      .esri-slider__thumb {
+        background-color: $interactive-font-color--hover;
+        border: none;
+        transform: none;
+        &:after {
+          border-left-color: $interactive-font-color--hover;
+        }
+        &:before {
+          background-color: $button-color--bright;
+          transform: translate3d(-$smartmapping-slider__thumb-size--offset * 0.25, 0, 0);
+        }
+      }
+    }
+
+    .esri-slider__segment--interactive {
+      background-size: 12px 100%;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-image: url(../base/images/SM-Slider_TrackBackground_idle.svg);
+
+      &.esri-slider__segment--active {
+        background-color: #eee;
+        background-image: url(../base/images/SM-Slider_TrackBackground_hover.svg);
+      }
+
+      &:hover,
+      &:focus {
+        cursor: pointer;
+        background-color: #eee;
+        background-image: url(../base/images/SM-Slider_TrackBackground_hover.svg);
+      }
+    }
+  }
+}
+
+@mixin loopingProgressBar($selector) {
+  #{$selector}:before,
+  #{$selector}:after {
+    content: "";
+    opacity: 1;
+    position: absolute;
+    height: 1px;
+    top: 0;
+    transition: opacity 500ms ease-in-out;
+  }
+  #{$selector}:before {
+    background-color: $border-color;
+    width: 100%;
+    z-index: 0;
+  }
+  #{$selector}:after {
+    background-color: $interactive-font-color;
+    width: $looping-progress-bar-width;
+    z-index: 0;
+    animation: looping-progresss-bar-ani $looping-progress-bar-params;
+  }
+}
+
+/**
+ * Adds the base styles for an arrow facing down.
+ */
+@mixin arrowButton() {
+  $size: 18px;
+  $icon-size: 10px;
+  $padding: ($size - $icon-size) * 0.5;
+
+  font-size: $icon-size;
+  line-height: $icon-size;
+
+  width: $size;
+  height: $size;
+  padding: $padding;
+
+  cursor: pointer;
+  transition: all 0.1s ease-in-out;
+  text-align: center;
+
+  border: none;
+  background: none;
+
+  appearance: none;
+
+  @each $icomoon-selector in $icomoon-selectors {
+    @extend #{$icomoon-selector};
+  }
+
+  @extend .esri-icon-left;
+
+  &:hover:not(:disabled) {
+    background: $background-color--hover;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  &.esri-arrow-down {
+    transform: rotate(-90deg);
+  }
+
+  &.esri-arrow-up {
+    transform: rotate(90deg);
+  }
+
+  &.esri-arrow-left {
+    transform: rotate(0deg);
+  }
+
+  &.esri-arrow-right {
+    transform: rotate(180deg);
+  }
+}
+
+/**
+* Styles for Sortable
+*/
+@mixin sortableChosen($selector) {
+  transition: background-color 125ms ease-in-out;
+  &.#{$selector} {
+    background-color: $background-color--active;
+    opacity: $opacity--sortable;
+  }
+}
+
+@mixin timeSlider() {
+  $tick-width: 1px;
+  $focus-ring-width: 2px;
+  $thumb-size: 16px;
+  $tick-padding: 3px;
+  $tick-height: 3px;
+  $tick-height-primary: 6px;
+
+  .esri-slider.esri-slider--horizontal {
+    width: inherit;
+    flex-grow: 1;
+    padding: 30px 13px 28px 13px;
+
+    .esri-widget__anchor,
+    .esri-slider__anchor {
+      outline: none !important;
+      color: inherit;
+    }
+
+    .esri-slider__anchor:focus .esri-slider__thumb {
+      outline: solid $focus-ring-width $border-color--active;
+      outline-offset: $focus-ring-width;
+      overflow: visible;
+    }
+
+    .esri-slider__segment.esri-slider__segment-0 {
+      background-color: unset; // Reset blue first segment
+    }
+
+    .esri-slider__thumb {
+      width: $thumb-size;
+      height: $thumb-size;
+      left: -$thumb-size * 0.5;
+      top: -$thumb-size * 0.5;
+    }
+
+    .esri-slider__tick {
+      width: $tick-width + ($tick-padding * 2);
+      height: 20px;
+      padding: $tick-padding; // Make ticks slightly easier to click on
+      margin: -$tick-padding;
+      background: none;
+
+      &:after {
+        content: "";
+        display: block;
+        width: $tick-width;
+        background: #6e6e6e66;
+      }
+
+      &.secondary-tick:after {
+        height: $tick-height;
+      }
+
+      &.primary-tick {
+        &:after {
+          height: $tick-height-primary;
+        }
+
+        .primary-tick__ampm {
+          font-size: $font-size--tiny;
+        }
+      }
+    }
+
+    .esri-slider__ticks {
+      margin: 0;
+      margin-top: $cap-spacing--half;
+      width: calc(100% - #{$tick-width});
+    }
+
+    .esri-slider__tick-label {
+      font-size: $font-size--tiny-time-slider;
+      line-height: normal;
+      margin-top: $cap-spacing;
+      text-align: center;
+    }
+
+    .esri-slider__label {
+      font-size: $font-size--small;
+    }
+
+    .esri-slider__label-input {
+      font-size: $font-size--tiny-time-slider;
+    }
+  }
+}