.lovely-chart--minimap {
  position: relative;
  margin: 0 10px 16px 10px;
  border-radius: 6px;
  overflow: hidden;
  opacity: 1;
  transition: opacity 400ms ease;

  &.lovely-chart--state-hidden {
    display: none;
  }

  &.lovely-chart--state-transparent {
    opacity: 0;
  }
}

.lovely-chart--minimap-ruler {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.lovely-chart--minimap-mask {
  display: inline-block;
  width: 33.3%;
  height: 100%;
  background: var(--minimap-mask);
  // transition: background-color 300ms ease-out;

  &:last-child {
    position: relative;

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      right: -5px;
      width: 5px;
      background: var(--minimap-mask);
      // transition: background-color 300ms ease-out;
    }
  }
}

.lovely-chart--minimap-slider {
  display: inline-block;
  box-sizing: border-box;
  width: 33.3%;
  height: 100%;
  min-width: 16px;

  &-inner {
    box-sizing: border-box;
    border-top: 1px solid var(--minimap-slider);
    border-bottom: 1px solid var(--minimap-slider);
    float: left;
    width: calc(100% - 16px);
    height: 100%;
    background: transparent !important;
    cursor: grab;
    // transition: border-color 300ms ease-out;
  }

  &-handle {
    width: 8px;
    height: 100%;
    position: relative;
    background: var(--minimap-mask);
    cursor: ew-resize;
    // transition: background-color 300ms ease-out;

    &::before, &::after {
      content: '';
      display: block;
      position: absolute;
    }

    &::before {
      background: var(--minimap-slider);
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      // transition: background-color 300ms ease-out;
    }

    &-pin {
      display: block;
      position: absolute;
      background: #ffffff;
      width: 2px;
      height: 8px;
      top: calc(50% - 4px);
      left: calc(50% - 1px);
      pointer-events: none;
    }

    &:first-child {
      float: left;

      &::before {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
      }
    }

    &:last-child {
      float: right;

      &::before {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
      }
    }

    @media (pointer: coarse) {
      &:after {
        top: -10px;
        bottom: -10px;
        z-index: 1;
      }

      &:first-child:after {
        left: -26px;
        right: 0;
      }

      &:last-child:after {
        left: 0;
        right: -26px;
      }
    }
  }
}
