@layer components {
  .color-picker__colors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--inline-space-half);

    .btn {
      --btn-border-radius: 0.1em;
      --btn-size: 2em;
      --icon-size: 1.3em;

      inline-size: 100%;
    }

    label {
      cursor: pointer;
      position: relative;

      input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .checked {
        display: none;
        color: var(--color-ink-inverted);
      }

      input[type="radio"]:checked + .checked {
        display: block;
      }
    }
  }
}