.radio-input {
  width: 250px;
  height: 250px;
  background-color: rgb(0, 0, 0);
  border-radius: 29px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 19px;
  gap: 8px;
  position: relative;
  z-index: -1;
}

.radio-input input {
  display: none;
}

.radio-input .label {
  background: linear-gradient(to bottom, #494949, rgb(156, 156, 156));
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-top: 1.4px solid #ffffff;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 30ms;
  box-shadow: 0px 2px 2px 2.5px rgba(54, 54, 54, 0.349);
}

.label:has(input[type="radio"]:checked) {
  box-shadow: 0px -2px 27px 0.5px rgba(25, 25, 25, 1.905);
  background: linear-gradient(to bottom, #bbbbbb7a, #6e6e6e93);
  border-top: none;
}

.label::before {
  content: "";
  width: 100%;
  height: 100%;
  scale: 1.00805;
  border-radius: 0.1px;
  background: linear-gradient(
      to bottom,
      transparent 10%,
      transparent,
      transparent 90%
    ),
    linear-gradient(to left, transparent 10%, transparent, transparent 90%);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 30ms;
  z-index: -1;
}

.label.html:has(input[type="radio"]:checked)::before {
  background: linear-gradient(
      to bottom,
      transparent 10%,
      #ff29296b,
      transparent 90%
    ),
    linear-gradient(to left, transparent 10%, #ff2e2e75, transparent 90%);
}

.label.css:has(input[type="radio"]:checked)::before {
  background: linear-gradient(
      to bottom,
      transparent 10%,
      #40d2ff79,
      transparent 90%
    ),
    linear-gradient(to left, transparent 10%, #46e9ff8f, transparent 90%);
}

.label.js:has(input[type="radio"]:checked)::before {
  background: linear-gradient(
      to bottom,
      transparent 10%,
      #ffd42a86,
      transparent 90%
    ),
    linear-gradient(to left, transparent 10%, #ffd73659, transparent 90%);
}

.label.view:has(input[type="radio"]:checked)::before {
  background: linear-gradient(
      to bottom,
      transparent 10%,
      #9fb19f69,
      transparent 90%
    ),
    linear-gradient(to left, transparent 10%, #33ff3362, transparent 90%);
}

.label .text {
  color: rgba(255, 255, 255, 0.39);
  font-size: 50px;
  line-height: 29px;
  padding: 0px;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.4s linear;
  text-shadow:
    1px 1px 1px rgba(0, 0, 0, 0.281),
    -0.5px -0.5px 1.5px rgba(255, 255, 255, 0.24);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.label input[type="radio"]:checked + .html {
  color: #ff8282;
  text-shadow: 0px -15px 60px #ffb9b9;
}

.label input[type="radio"]:checked + .css {
  color: #71faff;
  text-shadow: 0px -15px 60px #c5fdff;
}

.label input[type="radio"]:checked + .js {
  color: #fff2a9;
  text-shadow: 0px -15px 60px #ffd700;
}

.label input[type="radio"]:checked + .view {
  color: #7dff93;
  text-shadow: 0px -15px 60px #b2ffbf;
}

.center {
  width: 13px;
  height: 13px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: #242222;
  border-radius: 0.1px;
  border: 0.1px solid #5c5c5c;
  transition: all 0.4s linear;
}

.radio-input:has(.html input:checked) .center {
  border-left: 1.5px solid #ff899db4;
  box-shadow: inset 11px 0px 10px -12px #ff8da0b2;
}

.radio-input:has(.css input:checked) .center {
  border-top: 1.5px solid#7fe5ffb4;
  box-shadow: inset 0px 11px 10px -12px #86edffad;
}

.radio-input:has(.js input:checked) .center {
  border-bottom: 1.5px solid #fff78dbe;
  box-shadow: inset 0px -11px 10px -12px #fff892c0;
}

.radio-input:has(.view input:checked) .center {
  border-right: 1.5px solid #88ff84b9;
  box-shadow: inset -11px 0px 10px -12px #6eff9288;
}