.settings {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-bottom: 1rem;
}

.settings:last-child {
  padding-bottom: 0;
}

.setting-option {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.setting-option > * {
  margin: 0.5em clamp(4em, 10vw, 6em) 0 0;
}

.setting-option > *:last-child {
  margin-right: 0;
}

.setting-option > .theme-form {
  height: 42px;
  transition: height 500ms;
}

.setting-option > .theme-form.open {
  height: calc(306px - 8px);
}

.setting-option > .theme-darkmode {
  margin-top: 14px;
}



/* Theme selector */

#app-cover {
  position: relative;
  inset: 0 0 auto 0;
  width: clamp(210px, calc(100vw - 90px), 260px);
  height: 42px;
  z-index: 1;
}

#select-box {  
  height: 100%;
}

#select-button {
  position: relative;
  height: 100%;
  padding: 13px 14px;
  background-color: var(--clr-theme-select-bg);
  color: var(--clr-theme-select-text);
  border-radius: 100px;
  cursor: pointer;
}

#options-view-button {
  position: absolute;
  inset: 0 0 0 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

#selected-value {
  font-size: 1em;
  line-height: 1;
  margin-right: 26px;
}

.option i {
  width: 16px;
  height: 16px;
}

.option,
.label {
  font-size: 1em;
}

.option.mensarate .option,
.option.mensarate .label {
  color: var(--clr-theme-mensarate-label);
}

.option.nord .option,
.option.nord .label {
  color: var(--clr-theme-nord-label);
}

.option.black-white .option,
.option.black-white .label {
  color: var(--clr-theme-black-white-label);
}

.option.theme4 .option,
.option.theme4 .label {
  color: var(--clr-theme-theme4-label);
}

.option.theme5 .option,
.option.theme5 .label {
  color: var(--clr-theme-theme5-label);
}

.option.theme6 .option,
.option.theme6 .label {
  color: var(--clr-theme-theme6-label);
}

#chevrons {
  position: absolute;
  inset: 0 14px 0 auto;
  width: 12px;
  padding: 9px 0;
}

#chevrons i {
  display: block;
  height: 50%;
  color: var(--clr-theme-select-chevrons);
  font-size: 0.75rem;
  text-align: right;
}

#options-view-button:checked + #select-button #chevrons i {
  color: var(--clr-theme-select-chevrons-selected);
}

.options {
  position: absolute;
  left: 0;
  width: 250px;
}

#options {
  position: absolute;
  inset: 42px 0 auto 0;
  width: clamp(210px, calc(100vw - 90px), 260px);
  margin: 8px auto 0;
  border-radius: 4px;
  background-color: var(--clr-theme-select-options-bg);
}

#options-view-button:checked ~ #options {
  border-radius: var(--border-radius);
}

.option {
  position: relative;
  line-height: 1;
  transition: 0.3s ease all;
  z-index: 2;
}

.option i {
  position: absolute;
  left: 14px;
  padding: 0;
  display: none;
}

#options-view-button:checked ~ #options .option i {
  display: block;
  padding: 12px 0 28px;
}

.label {
  display: none;
  padding: 0;
  margin-left: 27px;
}

#options-view-button:checked ~ #options .label {
  display: block;
  padding: 12px 14px;
}

.s-c {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
}

.s-c.top {
  top: 0;
}

.s-c.bottom {
  bottom: 0;
}

input[type="radio"] {
  position: absolute;
  right: 0;
  left: 0;
  width: 100%;
  height: 50%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.mensarate .s-c:hover ~ i {
  color: var(--clr-theme-mensarate-icon-hover);
  opacity: 0;
}

.nord .s-c:hover ~ i {
  color: var(--clr-theme-nord-icon-hover);
  opacity: 0;
}

.black-white .s-c:hover ~ i {
  color: var(--clr-theme-black-white-icon-hover);
  opacity: 0;
}

.theme4 .s-c:hover ~ i {
  color: var(--clr-theme-theme4-icon-hover);
  opacity: 0;
}

.theme5 .s-c:hover ~ i {
  color: var(--clr-theme-theme5-icon-hover);
  opacity: 0;
}

.theme6 .s-c:hover ~ i {
  color: var(--clr-theme-theme6-icon-hover);
  opacity: 0;
}

.s-c:hover {
  height: 100%;
  z-index: 1;
}

.s-c.bottom:hover + i {
  bottom: -25px;
  animation: moveup 0.3s ease 0.1s forwards;
}

.s-c.top:hover ~ i {
  top: -25px;
  animation: movedown 0.3s ease 0.1s forwards;
}

@keyframes moveup {
  0% {
    bottom: -25px;
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes movedown {
  0% {
    top: -25px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

.label {
  transition: 0.3s ease all;
}

.opt-val {
  position: absolute;
  left: 14px;
  width: 150px;
  height: 21px;
  opacity: 0;
  transform: scale(0);
  background-color: var(--clr-theme-select-bg);
  color: var(--clr-theme-select-text);
  display: flex;
  align-items: center;
}

.option input[type="radio"]:checked ~ .opt-val {
  opacity: 1;
  transform: scale(1);
}

.option input[type="radio"]:checked ~ i {
  top: 0;
  bottom: auto;
  opacity: 1;
  animation: unset;
}

.option input[type="radio"]:checked ~ .label {
  color: var(--clr-theme-label-selected);
}

.option.mensarate input[type="radio"]:checked ~ i {
  color: var(--clr-theme-icon-selected);
}

.option.nord input[type="radio"]:checked ~ i {
  color: var(--clr-theme-icon-selected);
}

.option.black-white input[type="radio"]:checked ~ i {
  color: var(--clr-theme-icon-selected);
}

.option.theme4 input[type="radio"]:checked ~ i {
  color: var(--clr-theme-icon-selected);
}

.option.theme5 input[type="radio"]:checked ~ i {
  color: var(--clr-theme-icon-selected);
}

.option.theme6 input[type="radio"]:checked ~ i {
  color: var(--clr-theme-icon-selected);
}

.option input[type="radio"]:checked ~ .label:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

#options-view-button:not(:checked)
  ~ #options
  .option
  input[type="radio"]:checked
  ~ .opt-val {
  top: -40px;
}

.option.mensarate input[type="radio"]:checked ~ .label:before {
  background-color: var(--clr-theme-bg-selected);
}

.option.mensarate input[type="radio"]:checked ~ .opt-val {
  top: -40px;
}

.option.nord input[type="radio"]:checked ~ .label:before {
  background-color: var(--clr-theme-bg-selected);
}

.option.nord input[type="radio"]:checked ~ .opt-val {
  top: -80px;
}

.option.black-white input[type="radio"]:checked ~ .label:before {
  background-color: var(--clr-theme-bg-selected);
}

.option.black-white input[type="radio"]:checked ~ .opt-val {
  top: -120px;
}

.option.theme4 input[type="radio"]:checked ~ .label:before {
  background-color: var(--clr-theme-bg-selected);
}

.option.theme4 input[type="radio"]:checked ~ .opt-val {
  top: -160px;
}

.option.theme5 input[type="radio"]:checked ~ .label:before {
  background-color: var(--clr-theme-bg-selected);
}

.option.theme5 input[type="radio"]:checked ~ .opt-val {
  top: -200px;
}

.option.theme6 input[type="radio"]:checked ~ .label:before {
  background-color: var(--clr-theme-bg-selected);
}

.option.theme6 input[type="radio"]:checked ~ .opt-val {
  top: -240px;
}

.option:nth-child(1) input[type="radio"]:checked ~ .label:before {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.option:nth-last-child(2) input[type="radio"]:checked ~ .label:before {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.option .fa-codepen {
  color: var(--clr-theme-mensarate-icon);
}

.option .fa-snowflake {
  color: var(--clr-theme-nord-icon);
}

.option .fa-adjust {
  color: var(--clr-theme-black-white-icon);
}

.option .fa-hackerrank {
  color: var(--clr-theme-theme4-icon);
}

.option .fa-stack-overflow {
  color: var(--clr-theme-theme5-icon);
}

.option .fa-free-code-camp {
  color: var(--clr-theme-theme6-icon);
}

#option-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 40px;
  transition: 0.3s ease all;
  z-index: 1;
  display: none;
}

#options-view-button:checked ~ #options #option-bg {
  display: block;
}

.option.mensarate:hover .label {
  color: var(--clr-theme-mensarate-label-hover);
}

.option.nord:hover .label {
  color: var(--clr-theme-nord-label-hover);
}

.option.black-white:hover .label {
  color: var(--clr-theme-black-white-label-hover);
}

.option.theme4:hover .label {
  color: var(--clr-theme-theme4-label-hover);
}

.option.theme5:hover .label {
  color: var(--clr-theme-theme5-label-hover);
}

.option.theme6:hover .label {
  color: var(--clr-theme-theme6-label-hover);
}

.option.mensarate:hover ~ #option-bg {
  top: 0;
  background-color: var(--clr-theme-mensarate-bg-hover);
}

.option.nord:hover ~ #option-bg {
  top: 40px;
  background-color: var(--clr-theme-nord-bg-hover);
}

.option.black-white:hover ~ #option-bg {
  top: 80px;
  background-color: var(--clr-theme-black-white-bg-hover);
}

.option.theme4:hover ~ #option-bg {
  top: 120px;
  background-color: var(--clr-theme-theme4-bg-hover);
}

.option.theme5:hover ~ #option-bg {
  top: 160px;
  background-color: var(--clr-theme-theme5-bg-hover);
}

.option.theme6:hover ~ #option-bg {
  top: 200px;
  background-color: var(--clr-theme-theme6-bg-hover);
}

.option:nth-child(1):hover ~ #option-bg {
  border-radius: calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px) 0 0;
}

.option:nth-last-child(2):hover ~ #option-bg {
  border-radius: 0 0 calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px);
}



/* Darkmode toggle button */

label.darkmode-label {
  width: 50px;
  height: 20px;
  position: relative;
  display: block;
  background: #ebebeb;
  border-radius: 20px;
  box-shadow: inset 0px 5px 15px rgba(0,0,0,0.4), inset 0px -5px 15px rgba(255,255,255,0.4);
  cursor: pointer;
  margin-left: 8px;
  margin-right: 25px;
  transform: scale(1.3);
}

label.darkmode-label:after {
  content: "";
  width:18px;
  height: 18px;
  position: absolute;
  top:1px;
  left:1px;
  background: linear-gradient(180deg,#ffcc89,#d8860b);
  border-radius: 18px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}

input.darkmode-input {
  width: 0;
  height: 0;
  visibility: hidden;
}

input.darkmode-input:checked + label.darkmode-label {
  background: #242424;
}

input.darkmode-input:checked + label.darkmode-label:after {
  left:49px;
  transform: translateX(-100%);
  background: linear-gradient(180deg,#777,#3a3a3a);
}

label.darkmode-label, label.darkmode-label:after {
  transition: 0.3s
}

label.darkmode-label:active:after{ 
  width: 26px; 
}

label.darkmode-label svg {
  position: absolute;
  width: 12px;
  top:4px;
  z-index: 10;
}
label.darkmode-label svg.sun {
  left:4px;
  fill:#fff;
  transition: 0.3s;
}
label.darkmode-label svg.moon {
  left:34px;
  fill:#7e7e7e;
  transition: 0.3s;
}
input.darkmode-input:checked + label.darkmode-label svg.sun {
  fill:#7e7e7e;
}
input.darkmode-input:checked + label.darkmode-label svg.moon {
  fill:#fff;
}