#PanelUI-zen-gradient-generator {
  --panel-width: 300px;
  min-width: var(--panel-width);
}

.zen-theme-picker-gradient {
  position: relative;
  border-radius: var(--zen-border-radius);
  border: 1px solid var(--zen-colors-border);
  background: var(--zen-themed-toolbar-bg);

  min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
  min-width: calc(var(--panel-width) - var(--panel-padding) * 2);

  & .zen-theme-picker-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--zen-theme-picker-dot-color);
    box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
    cursor: pointer;
    border: 3px solid var(--zen-colors-border);
    animation: zen-theme-picker-dot-animation .5s;
    transition: transform .2s;

    &[dragging='true'] {
      transform: scale(1.2);
    }
  }
}