@import '../root.css';
@import '../font_definitions.css';

/** INPUTS */
/* TEXT */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
form select,
textarea {
    padding: 10px 16px;
    background-color: var( --white-color );
    border: 2px solid var( --gray-light-color );
    border-radius: 8px;
    color: var( --purple-dark-color );
    outline: none;
    font-size: 16px;
    line-height: 20px;
    font-family: LatoRegular, sans-serif;
    width: 100%;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
form select:hover,
textarea:hover  { border: 2px solid var( --purple-highlight-color ); }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
form select:focus,
textarea:focus { border: 2px solid var( --purple-color ); }

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder { color: var( --light-gray-color ); }

textarea { resize: vertical; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
  }

/* CHECKBOX / RADIO */
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    border: 2px solid var( --gray-light-color );
    border-radius: 4px;
    background-color: var( --white-color );
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
input[type="checkbox"]:hover,
input[type="radio"]:hover {
    appearance: none;
    border: 2px solid var( --purple-highlight-color );
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    appearance: none;
    border: 2px solid var( --purple-color );
    background: var( --purple-color );
}

form select option {
    color: var( --purple-dark-color );
    padding: 4px;
    border-radius: 4px;
}

form select option:hover {
    color: var( --white-color );
    background-color: var( --purple-highlight-color );
}

/* custom range input*/
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background-color: var( --gray-light-color );
    border-radius: 4px;
    -webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
    height: 16px;
    width: 16px;
    border-radius: 16px;
    background: var( --purple-light-color );
    cursor: pointer;
    margin-top: -5px;
    -webkit-appearance: none;
}

input[type=range]::-webkit-progress-value {
    background-color: var( --purple-highlight-color );
    outline: none;
    border: none;
    box-shadow: none;
}

input[type="range"]::-moz-range-progress {
    background-color:  var( --purple-highlight-color );
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: var( --gray-light-color );
    border-radius: 4px;
}
input[type=range]::-moz-range-thumb {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    height: 16px;
    width: 16px;
    border-radius: 16px;
    background: var( --purple-light-color );
    cursor: pointer;
}
input[type=range]::-ms-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: var( --gray-light-color );
    border-radius: 4px;
}
input[type=range]::-ms-fill-lower {
    background-color: var( --purple-highlight-color );
    border: 0.2px solid #010101;
    border-radius: 2.6px;
}
input[type=range]::-ms-fill-upper {
    border-radius: 4px;
}
input[type=range]::-ms-thumb {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    height: 16px;
    width: 16px;
    border-radius: 16px;
    background: var( --purple-light-color );
    cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
    /*background: #3071a9;*/
    background-color: var( --purple-highlight-color );
}
input[type=range]:focus::-ms-fill-upper {
    /*background: #367ebd;*/
}

/** FORM GROUPS
 *
 */
.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 10px;
    position: relative;
}

.form-group-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.form-group-horizontal .form-group {
    margin: 0 8px;
}

.form-group-horizontal .form-group:first-of-type {
    margin-left: 0;
}

.form-group-horizontal .form-group:last-of-type {
    margin-right: 0;
}

.form-group > label, .form-group > #label {
    font-family: ZillaSlabBold, sans-serif;
    font-size: 16px;
    color: var( --purple-dark-color );
    margin: 0 4px 0 0;
}

.form-group.sm > label, .form-group.sm > #label {
    font-size: 14px;
}

.form-group.sm input[type="text"],
.form-group.sm input[type="email"],
.form-group.sm input[type="password"],
.form-group.sm select {
    font-size: 14px;
    padding: 8px 12px;
}


.form-radio-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.form-group #widget-with-error {
    width: 100%;
}

.form-group #widget-with-error input {
    width: 100%;
    background-color: var( --light-warning-color );
}