.color-picker {
  --panel-border-color: var(--card-color);
  --panel-border-radius: 2em;
  --panel-border-size: 2px;
  --panel-padding: 0.5em;
  --panel-size: auto;

  inline-size: auto !important;
  inset: 50% auto auto calc(-1 * var(--panel-padding));
  max-inline-size: var(--panel-size) !important;
  position: absolute;
  translate: 0 -50%;
  z-index: var(--z-popup);

  &[open] {
    display: flex;
  }
}