/* Input */
input{
    border:0px;
    background-color: var(--color-secondary-700);
    border-radius: var(--radius-md);
    color: var(--color-third-100);
    border: 1px solid var(--color-secondary-700);
    transition:0.3s;
}
input:focus{
    outline: none;
    border: 1px solid var(--color-third-500);
    transition:0.3s;
}
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;        /* sblocca lo stile */
  width: 16px;
  height: 16px;
  margin-right: 6px;               /* distanzia dal bordo destro */
  cursor: pointer;

  /* usa una mask SVG così puoi colorarla via `color` */
  background: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\">\
  <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\"/>\
</svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
textarea:focus{
    outline: none;
}
select{
    outline: none;
}
select:focus{
    outline: none;
}
option{
    background-color: var(--color-secondary);
}
.input-clean{
    border:0;
    background-color: unset;
}
.input-clean:focus{
    border:0;
}
.input-secondary{
    border:0px;
    background-color: var(--color-third-200);
    border-radius: var(--radius-md);
    color: var(--color-secondary-950);
    border: 1px solid var(--color-third-200);
    transition:0.3s;
}
.input-secondary:focus{
    outline: none;
    border: 1px solid var(--color-primary-500);
    transition:0.3s;
}
.input-secondary::placeholder{
    color: var(--color-third-800);
}
.input-third{
    border:0px;
    background-color: var(--color-secondary-900);
    border-radius: var(--radius-md);
    color: var(--color-third-300);
    border: 1px solid var(--color-secondary-500);
    transition:0.3s;
}
.input-third:focus{
    outline: none;
    border: 1px solid var(--color-secondary-300);
    transition:0.3s;
}
.textarea-third{
    border:0px;
    resize: none;
    background-color: var(--color-secondary-900);
    border-radius: var(--radius-md);
    color: var(--color-third-300);
    border: 1px solid var(--color-secondary-500);
    transition:0.3s;
    height:150px;
}
.textarea-third:focus{
    outline: none;
    border: 1px solid var(--color-secondary-300);
    transition:0.3s;
}