.lovely-chart--minimap {
  position: relative;

  overflow: hidden;

  margin: 0 10px 10px 10px;
  border-radius: 6px;

  opacity: 1;

  transition: opacity 400ms ease;

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

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

.lovely-chart--minimap-ruler {
  -webkit-user-select: none;
  user-select: none;

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  white-space: nowrap;
}

.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: '';

      position: absolute;
      top: 0;
      right: -5px;
      bottom: 0;

      display: block;

      width: 5px;

      background: var(--minimap-mask);
      // transition: background-color 300ms ease-out;
    }
  }
}

.lovely-chart--minimap-limit-mask {
  pointer-events: none;

  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  border-right: 2px dashed var(--minimap-limit-color);
  border-radius: 6px 0 0 6px;

  color: var(--minimap-limit-color);

  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  &.lovely-chart--state-interactive {
    pointer-events: auto;
    cursor: var(--custom-cursor, pointer);
    transition: opacity 200ms ease;

    &:hover {
      opacity: 0.85;
    }
  }
}

.lovely-chart--minimap-slider {
  display: inline-block;

  box-sizing: border-box;
  width: 33.3%;
  min-width: 16px;
  height: 100%;

  &-inner {
    cursor: var(--custom-cursor, grab);

    float: left;

    box-sizing: border-box;
    width: calc(100% - 16px);
    height: 100%;
    border-top: 1px solid var(--minimap-slider);
    border-bottom: 1px solid var(--minimap-slider);

    background: transparent !important;
    // transition: border-color 300ms ease-out;
  }

  &-handle {
    cursor: var(--custom-cursor, ew-resize);

    position: relative;

    width: 8px;
    height: 100%;

    background: var(--minimap-mask);
    // transition: background-color 300ms ease-out;

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

    &::before {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      background: var(--minimap-slider);
      // transition: background-color 300ms ease-out;
    }

    &-pin {
      pointer-events: none;

      position: absolute;
      top: calc(50% - 4px);
      left: calc(50% - 1px);

      display: block;

      width: 2px;
      height: 8px;

      background: #ffffff;
    }

    &: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 {
        z-index: 1;
        top: -10px;
        bottom: -10px;
      }

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

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