/* wrapper for "color" inputs */
label[data-type="text"],
label[data-type="number"]{
  input{
    cursor: text;
    padding: 5px;
    border-radius: 3px;
    color: var(--textColor);
    outline: none;
    border: 0;
    background: var(--opaqueColor-15);

    &:focus{
      box-shadow: 0 0 0 1px HSL(var(--base-color), calc(var(--base-color-l) + 22%));
    }

    &:invalid{
      box-shadow: 0 0 0 1px #d75d4a inset;
    }
  }
}