.modal {
  position: fixed;
  width: 290px;
  box-shadow: 0px 12px 28px 0px rgba(0, 0, 0, 0.32);
  border-radius: 8px;
  padding: 12px 16px;
  background-color: #24262f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  .header {
    display: flex;
    justify-content: space-between;
    .icon {
      color: #757881;
      cursor: pointer;
      span {
        margin-right: 4px;
      }
    }
    .headerTab {
      display: flex;
      gap: 12px;
      color: #757881;
      .active {
        color: #fff;
        font-weight: 500;
      }
      div {
        cursor: pointer;
        :hover {
          color: #fff;
        }
      }
    }
  }
  .range {
    color: #b4b7c1;
    display: flex;
    margin-top: 12px;
    height: 28px;
    .labelTag {
      min-width: 80px;
    }
    :global {
      .easyv-gui-slider-dot {
        width: 1px;
        height: 6px;
        background: rgba(255, 255, 255, 0.32);
        border: none;
        border-radius: 0;
      }
      .easyv-gui-slider-rail {
        height: 2px;
      }
      .easyv-gui-input-number {
        border-radius: 4px;
      }
      .easyv-gui-slider-handle {
        top: 3px;
        background-color: #fff;
      }
      .easyv-gui-slider-handle:hover {
        box-shadow: 0 0 0 5px rgba(36, 145, 247, 0.5) !important;
      }
      .easyv-gui-slider-handle:focus {
        box-shadow: none;
      }
      .easyv-gui-slider-handle-dragging {
        box-shadow: 0 0 0 5px rgba(36, 145, 247, 0.5) !important;
      }
      .easyv-gui-slider-track {
        top: 4px;
        height: 2px;
      }
    }
  }
  .haveChanged {
    :global {
      .easyv-gui-slider-handle {
        background-color: #3a89fe !important;
      }
    }
  }
  .hue {
    :global {
      .easyv-gui-slider-rail {
        background: linear-gradient(
          90deg,
          #fa2506 0%,
          #ff8a10 13.34%,
          #6bff0c 28.47%,
          #13fdfe 46.42%,
          #053cff 65.57%,
          #a212ff 80.52%,
          #fc0d08 100%
        );
      }
      .easyv-gui-slider-track {
        display: none;
      }
    }
  }
  .saturation {
    :global {
      .easyv-gui-slider-rail {
        background: linear-gradient(90deg, #888 0%, #e71404 100%);
      }
      .easyv-gui-slider-track {
        display: none;
      }
    }
  }
  .lightness {
    :global {
      .easyv-gui-slider-rail {
        background: linear-gradient(90deg, #000 0%, #fff 100%);
      }
      .easyv-gui-slider-track {
        display: none;
      }
    }
  }
  .cyanRed {
    :global {
      .easyv-gui-slider-rail {
        background: linear-gradient(90deg, #91f6f3 0%, #e0463e 100%);
      }
      .easyv-gui-slider-track {
        display: none;
      }
    }
  }
  .magentaGreen {
    :global {
      .easyv-gui-slider-rail {
        background: linear-gradient(90deg, #b32cc7 0%, #45d621 100%);
      }
      .easyv-gui-slider-track {
        display: none;
      }
    }
  }
  .yellowBlue {
    :global {
      .easyv-gui-slider-rail {
        background: linear-gradient(90deg, #e9e93a 0%, #2726f4 100%);
      }
      .easyv-gui-slider-track {
        display: none;
      }
    }
  }
}