.designer-lens-config-common {
  :global {
    .designer-lens-config-common:hover .ant-slider-track {
      background-color: transparent;
    }
    .ant-slider-track {
      background-color: transparent !important;
    }
    .ant-slider-handle {
      border-color: white !important;
    }
  }
}

.designer-lens-config-hue-rotate {
  :global {
    .ant-slider-rail {
      background-image: linear-gradient(
        -90deg,
        #ff0000,
        #ff00ff,
        #0000ff,
        #00ffff,
        #00ff00,
        #ffff00,
        #ff0000
      );
    }
  }
}
.designer-lens-config-saturate {
  :global {
    .ant-slider-rail {
      background-image: linear-gradient(90deg, #6d6d6d, #ff0000);
    }
  }
}
.designer-lens-config-brightness {
  :global {
    .ant-slider-rail {
      background-image: linear-gradient(90deg, #000000, #ffffff);
    }
  }
}
.designer-lens-config-contrast {
  :global {
    .ant-slider-rail {
      background-color: #393b4a;
    }
  }
}
.designer-lens-config-opacity {
  :global {
    .ant-slider-rail {
      background-image: linear-gradient(
          45deg,
          #969696 25%,
          transparent 0,
          transparent 75%,
          #969696 0
        ),
        linear-gradient(
          45deg,
          #969696 25%,
          transparent 0,
          transparent 75%,
          #969696 0
        );
      background-size: 6px 6px;
      background-color: #818181 !important;
      background-position: 0 0, 3px 3px;
    }
  }
}
.designer-lens-config-grayscale {
  :global {
    .ant-slider-rail {
      background-color: #393b4a;
    }
  }
}
