<label class="popup-open-btn" for="settings-popup">Settings</label>

<input type="checkbox" checked data-popup id="settings-popup">
<div class="popup">
	<div class="settings-popup">
		<label for="settings-popup" class="close-popup">
			<img src="img/icon-close.svg" alt="">
			<span>Close</span>
		</label>
		<h3>Settings</h3>
		<ul>
			<li>
				<div class="item">
					<h5>Language</h5>
					<p>
						Let us know which language you’re most comfortable using. You <br> can change it back at any time.
					</p>
					<select name="">
						<option value="">English</option>
						<option value="">Türkçe</option>
						<option value="">Deutch</option>
					</select>
				</div>
			</li>
		</ul>
		<hr>
		<ul>
			<li>
				<div class="item">
					<h5>Autoplay videos</h5>
					<p>
						Choose if you want to autoplay on your browser
					</p>
				</div>
				<label class="checkbox-input">
					<input type="checkbox" checked>
					<span class="checkbox"></span>
				</label>
			</li>
			<li>
				<div class="item">
					<h5>Show profile photos</h5>
					<p>
						Choose whether to show or hide profile photos of other members.
					</p>
				</div>
				<label class="checkbox-input">
					<input type="checkbox">
					<span class="checkbox"></span>
				</label>
			</li>
		</ul>
		<div class="actions">
			<a href="#" class="active">Save</a>
			<a href="#">Cancel</a>
		</div>
	</div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Mulish:[email protected];700;900&display=swap');

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family: 'Mulish', sans-serif;

  &:focus {
    outline: 0;
  }
}

body {
  background: #F2F2F2;
  height: 100vh;
  display: grid;
  place-items: center;
}

.popup-open-btn {
  border: 2px solid #F34B8C;
  border-radius: 5px;
  height: 50px;
  padding: 0 40px;
  font-size: 18px;
  font-weight: 900;
  color: #F34B8C;
  line-height: 46px;
  cursor: pointer;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(#000, .5);
  align-items: center;
  justify-content: center;
  display: none;
}

.settings-popup {
  background: #fff;
  padding: 85px 100px;
  border-radius: 15px;
  width: 912px;
  box-shadow: 0 67px 55px -34px rgba(#551A53, .1);
  position: relative;

  .close-popup {
    position: absolute;
    top: 40px;
    right: 40px;
    text-align: right;
    cursor: pointer;

    span {
      display: block;
      font-size: 16px;
      color: rgba(#242E4C, .5);
    }
  }

  h3 {
    font-size: 28px;
    color: #874285;
    font-weight: 900;
    margin-bottom: 55px;
  }

  ul {
    li {
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &:last-child {
        margin-bottom: 0;
      }

      .item {
        h5 {
          font-size: 20px;
          font-weight: 900;
          color: #874285;
          margin-bottom: 13px;
        }

        select {
          margin-top: 35px;
          width: 330px;
          cursor: pointer;
          height: 50px;
          border-radius: 5px;
          border: 2px solid #D8DBE6;
          font-size: 20px;
          color: #242E4C;
          padding: 0 20px;
          appearance: none;
          background: #ffffff url(../img/select-arrow.svg) no-repeat calc(100% - 20px);

          &:hover {
            border-color: #9298AD;
            color: #9298AD;
          }
        }

        p {
          font-size: 16px;
          color: #242E4C;
          line-height: 22px;
        }
      }

      .checkbox-input {
        .checkbox {
          width: 66px;
          display: block;
          height: 37px;
          border: 2px solid #D8DBE6;
          border-radius: 37px;
          position: relative;
          cursor: pointer;

          &::before {
            content: '';
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #9298AD;
            position: absolute;
            top: 4px;
            left: 4px;
            transition: 300ms left, 300ms background-color;
          }
        }

        input {
          display: none;

          &:checked + .checkbox {
            &::before {
              left: 33px;
              background: #874285;
            }
          }
        }
      }
    }
  }

  hr {
    height: 1px;
    background: #D8DBE6;
    margin: 45px 0;
  }

  .actions {
    margin-top: 55px;
    display: flex;
    align-items: center;

    a {
      border: 2px solid #D8DBE6;
      border-radius: 6px;
      height: 54px;
      width: 161px;
      display: grid;
      place-items: center;
      margin-right: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #9298AD;

      &:hover {
        border-color: #9298AD;
        color: darken(#9298AD, 20%);
      }

      &.active {
        background-color: #F34B8C;
        border-color: #F34B8C;
        color: #fff;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

input[data-popup] {
  display: none;
  &:checked + .popup {
    display: flex;
  }
}