@layer plone-components.base {
  .react-aria-ColorThumb {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow:
      0 0 0 1px black,
      inset 0 0 0 1px black;

    &[data-focus-visible] {
      width: 24px;
      height: 24px;
    }
  }

  .react-aria-ColorWheel {
    &[data-disabled] {
      .react-aria-ColorWheelTrack {
        background: gray !important;
      }

      .react-aria-ColorThumb {
        background: gray !important;
        opacity: 0.5;
      }
    }
  }
}