/* styles for states */

  input:not(:focus), select:not(:focus), textarea:not(:focus),
  .input:not(:focus), .textarea:not(:focus) {
    border-color: transparent;
    border-bottom-width: 2px;
    border-bottom-color: var(--main-border);
  }

  input:focus, select:focus, textarea:focus,
  .input:focus, .textarea:focus {
    border-color: var(--main-hl);
  }

/* states */

  input:not([type="file"]):not([type="color"]):focus,
  .textarea:focus, textarea:focus, [contenteditable]:focus, select:focus {
    outline: none;
  }

  /* special input type range states and styles */

    input[type="range"] {
      -webkit-appearance: none;
    }

    input[type="range"]::-webkit-slider-runnable-track {
      border-bottom: 2px solid var(--main-border);
    }

    input[type="range"]:focus::-webkit-slider-runnable-track {
      border-bottom-width: 3px;
      border-bottom-color: var(--main-hl);
    }