:root {
  --selected0-color: #333333;
  --rgb1-color: color-mix(in srgb, var(--selected0-color), white 20%);
  --rgb2-color: color-mix(in srgb, var(--selected0-color), white 40%);
  --rgb3-color: color-mix(in srgb, var(--selected0-color), white 60%);
  --rgb4-color: color-mix(in srgb, var(--selected0-color), white 80%);
  --oklab1-color: color-mix(in oklab, var(--selected0-color), white 20%);
  --oklab2-color: color-mix(in oklab, var(--selected0-color), white 40%);
  --oklab3-color: color-mix(in oklab, var(--selected0-color), white 60%);
  --oklab4-color: color-mix(in oklab, var(--selected0-color), white 80%);
}
.colors {
  > label {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
    cursor: pointer;

    span:has(input) {
      height: 2.4rem;
      width: 4.8rem;
      border: 0.1rem solid var(--default-color);
      border-radius: 1.2rem;
      background-color: var(--default2-color);

      &::before {
        content: "";
        display: block;
        height: 2rem;
        width: 2rem;
        margin: 0.1rem 2.5rem 0.1rem 0.1rem;
        border: 0.1rem solid var(--default-color);
        border-radius: 50%;
        background-color: var(--default1-color);
        transition: all 0.2s ease-in-out;
      }
      &:has(:checked)::before {
        margin: 0.1rem 0.1rem 0.1rem 2.5rem;
        background-color: var(--default-color);
      }
      input {
        position: fixed;
        z-index: -1;
        height: 0;
        width: 0;
        margin-top: -2.4rem;
        opacity: 0;
      }
    }
    ~ #c1 {
      background-color: var(--rgb1-color);
    }
    ~ #c2 {
      background-color: var(--rgb2-color);
    }
    ~ #c3 {
      background-color: var(--rgb3-color);
    }
    ~ #c4 {
      background-color: var(--rgb4-color);
    }
    &:has(input:checked) ~ #c1 {
      background-color: var(--oklab1-color);
    }
    &:has(input:checked) ~ #c2 {
      background-color: var(--oklab2-color);
    }
    &:has(input:checked) ~ #c3 {
      background-color: var(--oklab3-color);
    }
    &:has(input:checked) ~ #c4 {
      background-color: var(--oklab4-color);
    }
  }
  > input {
    height: 3.2rem;
    width: 100%;
    border-color: var(--selected0-color);
    border-radius: 0.4rem;
    background-color: var(--selected0-color);
    cursor: pointer;

    &:focus {
      outline: none;
    }
  }
  > span {
    display: block;
    min-height: 3.2rem;
    border-radius: 0.4rem;
  }
}