<div class="uyari">Tarayıcınız CSS :has() ebeveyn seçicisini desteklemiyor</div>

<input type="checkbox" id="toggle"/>
<label for="toggle"></label>

<table>
  <thead>
    <tr>
      <th>Elemanlar</th>
      <th>Tarayıcının atadığı</th>
      <th>Özelleştirilen</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>&#60;input type="checkbox"&#62;</code></td>
      <td>
        <input type="checkbox" name="checkbox1" checked>
        <input type="checkbox" name="checkbox1">
        <input type="checkbox" name="checkbox1">
      </td>
      <td>
        <input type="checkbox" name="checkbox2" class="custom" checked>
        <input type="checkbox" name="checkbox2" class="custom">
        <input type="checkbox" name="checkbox2" class="custom">
      </td>
    <tr>
      <td><code>&#60;input type="radio"&#62;</code></td>
      <td>
        <input type="radio" name="radio1">
        <input type="radio" name="radio1" checked>
        <input type="radio" name="radio1">
      </td>
      <td>
        <input type="radio" name="radio2" class="custom">
        <input type="radio" name="radio2" class="custom" checked>
        <input type="radio" name="radio2" class="custom">
      </td>
    </tr>
    <tr>
      <td><code>&#60;input type="range"&#62;</code></td>
      <td><input type="range"></td>
      <td><input type="range" class="custom"></td>
    </tr>
    <tr>
      <td><code>&#60;progress&#62;</code></td>
      <td><progress min="1" max="100" value="60"></progress></td>
      <td><progress min="1" max="100" value="60" class="custom"></progress></td>
    </tr>
  </tbody>
</table>

body {
  --brand: #005451;
  --bg: #f5f5f5;
  --text: #121212;
  
  &:has(#toggle:checked){
    --brand: pink;
    --bg: #1c1b22;
    --text: #fff;
  }
}

label {
	position: relative;
  left: 272px;
	display: block;
	width: 70px;
	height: 32px;
	border-radius: 100px;
	background-color: #000839;
	overflow: hidden;
	cursor: pointer;
	&:before,
	&:after {
		display: block;
		position: absolute;
		content: "";		
		width: 24px;
		height: 24px;
		border-radius: 50%;
		top: 4px;
		left: 4px;
		transition: .5s ease;
	}
	&:before {
		background-color: #ffa41b;

	}

	&:after {
		background-color: #000839;
		left: -58px;
		transform: scale(0.00001);
	}
}

input[type="checkbox"]#toggle {
	display: none;
	&:checked + label {
		&:before {
			background-color: #FFF;
			transform: translateX(37px);
		}
		
		&:after {
			transform: translateX(92px) scale(1);
		}
	}
}

table {
  min-width: 600px;
  margin-top: 50px;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid rgb(200, 200, 220);
  padding: 0.2em 0.5em;
  padding: 10px;
  color: var(--text);
}

.custom {
    accent-color: var(--brand);
}




















@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:300,800');

body {
  font-family: 'Merriweather Sans', sans-serif;
  width: 700px;
  margin-inline: auto;
  background-color: var(--bg);
}

.uyari {
  margin-inline: auto;
  margin-block: 20px;
  width: 550px;
  background-color: #fff;
  padding: 20px;
  border: 4px solid #e6b31a;
}

@supports(selector(:has(+ *))) {
  .uyari {
    display: none;
  }
}

// swicth source
// https://codepen.io/havardob/pen/MWawKVy