@layer components {
  :root {
    --control-pip-size: 12px;
    --control-pip-active-width: 36px;
    --control-pip-gap: 8px;
    --control-pip-ring-width: 2px;
    --control-pip-ring-offset: 2px;
    --control-pip-scale: 1.1;
    --control-pip-mobile-size: 10px;
    --control-pip-mobile-active-width: 30px;
    --control-pip-transition: var(--duration-speed-default);
    --control-pip-swap-transition: var(--duration-speed-slow);
  }

  .control-pip-wrapper {
    display: flex;
    gap: var(--control-pip-gap);
    align-items: center;
    background: transparent;
  }

  .control-pip-label {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .control-pip {
    appearance: none;
    -webkit-appearance: none;
    width: var(--control-pip-size);
    height: var(--control-pip-size);
    border-radius: calc(var(--control-pip-size) / 2);
    background-color: color-mix(
      in oklch,
      var(--color-foreground) 20%,
      var(--color-background)
    );
    cursor: pointer;
    transition: var(--control-pip-transition);
  }

  .control-pip:focus-visible,
  .control-pip:hover {
    outline: var(--control-pip-ring-width) solid var(--color-foreground);
    outline-offset: var(--control-pip-ring-offset);
    background-color: var(--color-foreground);
    transform: scale(var(--control-pip-scale));
  }

  .control-pip:checked {
    width: var(--control-pip-active-width);
    background-color: var(--color-foreground);
    transition: var(--control-pip-swap-transition);
  }

  .control-pip:disabled {
    cursor: not-allowed;
  }

  @media (max-width: 640px) {
    .control-pip {
      width: var(--control-pip-mobile-size);
      height: var(--control-pip-mobile-size);
    }

    .control-pip:checked {
      width: var(--control-pip-mobile-active-width);
    }
  }
}