.card-select-color {
  width: 20em;
  height: 15em;
  background: white;
  border-radius: 1em;
  overflow: hidden;
  --cyan: #62faed;
  --yellow: #fad962;
  --purple: #d462fa;
  --pink: #fa62c4;
  border: solid 0.2em white;
  position: relative;
  box-shadow: 0em 0.5em rgb(0, 0, 0, 0.25);
}

.card-select-color-title {
  width: 100%;
  height: 5em;
  background-color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease-in-out;
}

.card-select-color-title p {
  color: rgb(0, 0, 0, 0.5);
  font-size: 20px;
}

.card-select-color-title p::after {
  content: " color theme";
  font-weight: bold;
}

.card-select-color-colors {
  width: 100%;
  height: 8em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.card-select-color-colors input[type="radio"] + label {
  width: 2.65em;
  height: 2.65em;
  border-radius: 0.5em;
  box-shadow:
    inset 0em 0.25em 0.25em rgb(255, 255, 255, 0.25),
    inset 0em -0.25em rgb(0, 0, 0, 0.25);
  margin: 1em;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}

.card-select-color-colors input[type="radio"]:hover + label {
  transform: scale(1.35);
}

.card-select-color-colors input[type="radio"]:checked + label {
  box-shadow:
    inset 0em 0.25em 0.25em rgb(255, 255, 255, 0.25),
    inset 0em -0.25em rgb(0, 0, 0, 0.25),
    0em 0em 0em 0.1em rgb(0, 0, 0, 0.25),
    0em 0em 0.5em rgb(0, 0, 0, 0.5);
  transform: scale(1.25);
}

#cyan + label {
  background-color: var(--cyan);
}

#yellow + label {
  background-color: var(--yellow);
}

#purple + label {
  background-color: var(--purple);
}

#pink + label {
  background-color: var(--pink);
}

.card-select-color:has(#cyan:checked) .card-select-color-title {
  background-color: var(--cyan);
}

.card-select-color:has(#yellow:checked) .card-select-color-title {
  background-color: var(--yellow);
}

.card-select-color:has(#purple:checked) .card-select-color-title {
  background-color: var(--purple);
}

.card-select-color:has(#pink:checked) .card-select-color-title {
  background-color: var(--pink);
}

.card-select-color:has(#cyan:checked) {
  border: solid 0.2em var(--cyan);
}

.card-select-color:has(#yellow:checked) {
  border: solid 0.2em var(--yellow);
}

.card-select-color:has(#purple:checked) {
  border: solid 0.2em var(--purple);
}

.card-select-color:has(#pink:checked) {
  border: solid 0.2em var(--pink);
}

.button-next {
  position: absolute;
  bottom: 0em;
  right: 0em;
  background-color: rgb(0, 0, 0, 0.25);
  width: 7.5em;
  border-top-left-radius: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
  color: rgb(255, 255, 255, 0.75);
  transition: all 0.25s ease-in-out;
}

.button-next:hover {
  width: 100%;
  border-top-left-radius: 0em;
}

.button-next:active {
  transform: scale(1.25);
}

.card-select-color:has(#cyan:checked) .button-next {
  background-color: var(--cyan);
  color: rgb(0, 0, 0, 0.5);
  cursor: pointer;
}

.card-select-color:has(#yellow:checked) .button-next {
  background-color: var(--yellow);
  color: rgb(0, 0, 0, 0.5);
  cursor: pointer;
}

.card-select-color:has(#purple:checked) .button-next {
  background-color: var(--purple);
  color: rgb(0, 0, 0, 0.5);
  cursor: pointer;
}

.card-select-color:has(#pink:checked) .button-next {
  background-color: var(--pink);
  color: rgb(0, 0, 0, 0.5);
  cursor: pointer;
}