.x-control {
  > :where(input) {
    &::-webkit-color-swatch-wrapper {
      inline-size: var(--x-control-color-swatch-inline-size);
      block-size: var(--x-control-color-swatch-block-size);
      padding: 0;
    }

    &::-moz-color-swatch {
      inline-size: var(--x-control-color-swatch-inline-size);
      block-size: var(--x-control-color-swatch-block-size);
      border-radius: var(--x-control-color-swatch-border-radius);
      margin: 0;
    }

    &::-webkit-color-swatch {
      border-radius: var(--x-control-color-swatch-border-radius);
    }

    &[type="color"] ~ label {
      margin-inline-start: calc(var(--x-control-padding-inline) + var(--x-control-color-swatch-inline-size));
    }
  }
}