/* Общее */

input {
  font-size: large;

  border-radius: var(--radius-md);
  border: solid 1px var(--interactive-input);
  box-shadow: 0 0 0px var(--interactive-input);

  background-color: var(--panel-on-page-background);

  padding: var(--space-3);
  margin: var(--space-3);

  transition: all 0.3s;
}

input:hover {
  border: solid 1px var(--interactive-input-hover);
  box-shadow: 0 0 10px var(--interactive-input-hover);
}

input:active {
  border: solid 1px var(--interactive-input-active);
  box-shadow: 0 0 20px var(--interactive-input-active);
}

input::placeholder {
  color: var(--interactive-a);
}


/* Checkbox-тумблер */

input[type=checkbox] {
  appearance: none;
  background-color: var(--panel-on-page-background);
  box-shadow: 0 0 0px var(--interactive-input);
  
  border-radius: 999px;
  border-style: none;
  
  flex-shrink: 0;
  width: 45px;
  height: 30px;
  margin: var(--space-1);

  position: relative;
  cursor: pointer;
}

input[type=checkbox], input[type=checkbox]::after {
  transition: all 0.3s;
}

input[type=checkbox]::after {
  background-color: var(--interactive-input-checkbox-disc);

  content: "";
  position: absolute;

  width: 21px;
  height: 21px;

  left: 4.5px;
  top: 4.5px;

  border-radius: 50%;
}

input[type=checkbox]:hover {
  box-shadow: 0px 0px 10px var(--interactive-input-hover);

  transition-duration: 0s;
}

input[type=checkbox]:checked {
  background-color: var(--interactive-input);
}

input[type=checkbox]:checked::after {
  left: 19.5px;
}

input[type=checkbox]:checked:not(:disabled):hover {
  background-color: var(--interactive-input-hover);
}

input[type=checkbox]:disabled::after {
  background-color: var(--interactive-input-checkbox-disc-disabled);
}
input[type=checkbox]:disabled {
  cursor: auto;
  box-shadow: 0 0 0px var(--interactive-input);
}


/* Delta input (время) */

/*
<div class="datatime-delta"> <-- контейнер
  <input type="number" min="1" max="100" value="1"> <-- поле ввода
  <select> <-- уровень детализации
    <option value="minute">минут</option>
    <option value="hour" selected>часов</option>
    <option value="day">дней</option>
    <option value="week">недель</option>
    <option value="month">месяцев</option>
  </select>
</div>
*/

.datatime-delta {
  display: flex;
  align-items: center;
}

.datatime-delta > * {
  border-radius: 0;
  margin: 0;
}
.datatime-delta > input {
  width: 45%;

  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.datatime-delta > select {
  width: 55%;

  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}