/** Zoom Bar (portrait)
 ---------------------------------------------------------*/

.zoom-bar {
  position: absolute;
  top: 12.5rem;
  right: 4rem;
  bottom: 12.5rem;
  width: 0.2rem; /* 0.2rem (spec) */
  height: auto;
  min-height: 16.4rem; /* 16.4rem (spec) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/**
 * zooming
 */

.zoom-bar.zooming {
  opacity: 1;
  pointer-events: auto;
}

/**
 * deg90 (landscape)
 */

body.deg90 .zoom-bar {
  top: 13.5rem;
  right: 3rem;
  bottom: auto;
  height: calc(100vw - 6rem);
  transform-origin: 0 0;
  transform:
    rotate(-90deg)
    translate(0px, -100%);
}

/**
 * deg180 (upside-down portrait)
 */

body.deg180 .zoom-bar {
  top: 12.5rem;
  right: auto;
  bottom: 12.5rem;
  left: 4rem;
  transform: rotate(180deg);
}

/**
 * deg270 (landscape)
 */

body.deg270 .zoom-bar {
  top: auto;
  right: auto;
  bottom: 16rem;
  left: 3rem;
  height: calc(100vw - 6rem);
  transform-origin: 0 100% 0;
  transform:
    translate(0%, 0%)
    rotate(90deg);
}

/** Zoom Bar Max Indicator
 ---------------------------------------------------------*/

.zoom-bar-max-indicator {
  position: absolute;
  top: 0;
  left: -0.4rem; /* -(width / 2) + (bar-width / 2) */
  width: 1rem;
  height: 1rem;
  z-index: 1;
  opacity: 0.75;
  border-radius: 50%;
  background-color: #719198;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease;
}

/**
 * Expanded Touch Target (4rem x 4rem)
 */

.zoom-bar-max-indicator:before {
  content: '';
  display: block;
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  bottom: -1.5rem;
  left: -1.5rem;
}

/**
 * active
 */

.zoom-bar-max-indicator.active {
  background-color: #ffffff;
  opacity: 1;
}

/** Zoom Bar Min Indicator
 ---------------------------------------------------------*/

.zoom-bar-min-indicator {
  position: absolute;
  bottom: 0;
  left: -0.15rem; /* -(width / 2) + (bar-width / 2) */
  width: 0.5rem;
  height: 0.5rem;
  z-index: 1;
  opacity: 0.75;
  border-radius: 50%;
  background-color: #ffffff;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease;
}

/**
 * Expanded Touch Target (4rem x 4rem)
 */

.zoom-bar-min-indicator:before {
  content: '';
  display: block;
  position: absolute;
  top: -1.75rem;
  right: -1.75rem;
  bottom: -1.75rem;
  left: -1.75rem;
}

/**
 * active
 */

.zoom-bar-min-indicator.active {
  background-color: #ffffff;
  opacity: 1;
}

/** Zoom Bar Inner
 ---------------------------------------------------------*/

.zoom-bar-inner {
  position: absolute;
  top: 2.8rem; /* max-indicator-height + 1.8rem(spec) */
  right: 0;
  bottom: 2.8rem; /* min-indicator-height + 2.3rem(spec) */
  left: 0;
  z-index: 2;
  background-color: rgba(113, 145, 152, 0.75);
}

/** Zoom Bar Track
 ---------------------------------------------------------*/

.zoom-bar-track {
  position: absolute;
  top: 100%; /* 100% - 0% */
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  transition: top 0.08s linear;
}

/** Zoom Bar Scrubber
 ---------------------------------------------------------*/

.zoom-bar-scrubber {
  position: absolute;
  bottom: 0; /* 0% - 100% */
  left: -0.7rem; /* -(width / 2) + (bar-width / 2) - border-width */
  width: 1.3rem;
  height: 1.3rem;
  box-sizing: padding-box;
  margin-bottom: -0.7rem; /* -(width / 2) + (bar-width / 2) - border-width */
  border-radius: 50%;
  border: 0.15rem solid #ffffff;
  background-color: #93bac2;
  transition: background-color 0.15s ease, bottom 0.08s linear;
}

/**
 * Expanded touch target (5.3rem x 4.3rem)
 */

.zoom-bar-scrubber:before {
  content: '';
  display: block;
  position: absolute;
  top: -1.5rem;
  right: -2rem;
  bottom: -1.5rem;
  left: -2rem;
}

/**
 * active
 */

.zoom-bar-scrubber.active {
  background-color: #008eab;
}