/* == Input == */
.wojo.input {
   position: relative;
   display: flex;
   flex-flow: row wrap;
   border-radius: var(--radius);
   border: 0 solid var(--grey-color-100);
   background-color: var(--white-color);
   box-shadow: 0 0 0 1px var(--grey-color-500);
   align-items: stretch;
   transition: all 0.2s ease-in-out;
}
.wojo.input input,
.wojo.form .wojo.input input,
.wojo.form .wojo.input textarea {
   flex: 1 1 0;
   min-width: 0;
   border: 0;
   line-height: normal;
   vertical-align: middle;
   border-radius: var(--radius);
   box-shadow: none;
   height: calc(1.875rem + 1rem - 2px);
}
/* == Icon == */
.wojo.icon.input > i.icon,
.wojo.input .tag.label {
   line-height: 1rem;
   padding: 0 1rem;
   -ms-grid-row-align: center;
   align-self: center;
}
.wojo.action.input > .button,
.wojo.icon.input > .button {
   padding: 0 1.875rem;
   flex: 0 1 auto;
   align-self: auto;
   margin: 1px;
}
.wojo.action.input > .icon.button,
.wojo.icon.input > .icon.button {
   padding: 0 1rem;
   border: 0;
   margin: 1px;
}
.wojo.action.input > .buttons {
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: var(--grey-color-100);
}
.wojo.action.input > .buttons .wojo.button {
   padding: 0 1rem;
}
.wojo.input > select {
   width: auto;
   min-width: 8rem;
   box-shadow: none;
}
/* == Selection == */
.wojo.selection.input {
   align-items: center;
}
.wojo.selection.input .icon {
   padding: 0 1.875rem;
   flex: 0 1 auto;
   align-self: center;
}
.wojo.selection.input div {
   flex: 1 1 0;
}
.wojo.selection.input select {
   width: 100%;
   box-shadow: 0 0 0 0 var(--grey-color-500);
}
/* == Basic == */
.wojo.basic.input {
   background: rgba(255, 255, 255, 0);
   box-shadow: 0 2px 0 0 var(--grey-color-500);
   border-radius: 0;
}
.wojo.basic.input input,
.wojo.form .wojo.basic.input input,
.wojo.form .wojo.basic.input textarea {
   background: rgba(255, 255, 255, 0);
   padding: 1rem 0;
}
/* == Transparent == */
.wojo.transparent.input {
   background: rgba(255, 255, 255, 0.05);
   box-shadow: 0 0 0 1px var(--light-color-shadow);
}
.wojo.transparent.input input {
   color: rgba(255, 255, 255, 0.8);
}
.wojo.transparent.input input,
.wojo.form .wojo.transparent.input input,
.wojo.form .wojo.transparent.input textarea {
   background: rgba(255, 255, 255, 0.05);
}
.wojo.input.transparent.focus {
   border-color: var(--primary-color);
   box-shadow: 0 0 1rem 0 var(--shadow-color), 0 0 0 1px var(--light-color-shadow);
}
.wojo.transparent.input .icon {
   color: rgba(255, 255, 255, .5);
}
/* == Placeholder == */
.wojo.form .wojo.input.transparent ::-webkit-input-placeholder {
   color: var(--grey-color-300);
}
.wojo.form .wojo.input.transparent :-ms-input-placeholder {
   color: var(--grey-color-300);
}
.wojo.form .wojo.input.transparent ::-moz-placeholder {
   color: var(--grey-color-300);
}
.wojo.form .wojo.input.transparent.focus :focus::-webkit-input-placeholder {
   color: var(--grey-color-300);
}
.wojo.form .wojo.input.transparent.focus :focus:-ms-input-placeholder {
   color: var(--grey-color-300);
}
.wojo.form .wojo.input.transparent.focus :focus::-moz-placeholder {
   color: var(--grey-color-300);
}
.wojo.form .wojo.input.transparent.focus input:-webkit-autofill {
   box-shadow: 0 0 0 100px #fff inset;
   border-color: var(--white-color);
}
.wojo.inline.input {
   display: inline-flex;
}
.wojo.input.stacked {
   display: flex;
   flex-direction: column;
}
/* == Tags == */
.wojo.input .tag.label {
   background-color: var(--primary-color);
   padding: 0.5rem .75rem;
   line-height: .750rem;
   font-weight: 500;
   color: var(--primary-color-inverted);
   white-space: nowrap;
   border-radius: var(--radius);
   margin-right: .250rem;
}
.wojo.input .tag [data-role="remove"] {
   margin-left: .5rem;
   cursor: pointer;
}
.wojo.input .tag [data-role="remove"]::after {
   content: "x";
   font-weight: 700;
}
/* == Focus == */
.wojo.input.focus {
   border-color: var(--primary-color);
   /*box-shadow:  0 0 0 2px var(--primary-color);*/
   box-shadow: var(--shadow-color) 0 0 2px 0, var(--shadow-color) 0 12px 24px -4px, 0 0 0 1px var(--primary-color);
}
.wojo.basic.input.focus {
   box-shadow: 0 2px 0 0 var(--primary-color);
}
.wojo.basic.input.focus input:focus {
   box-shadow: none;
}
.wojo.transparent.input input:focus {
   color: rgba(255, 255, 255, 0.8);
}
/* == Placeholder == */
.wojo.input ::placeholder {
   color: var(--grey-color-700);
}
.wojo.input :focus::placeholder {
   color: var(--grey-color);
}
.wojo.input input:-webkit-autofill,
.wojo.input input:autofill {
   box-shadow: 0 0 0 100px #fff inset;
   border-color: var(--white-color);
}
.wojo.input input:-webkit-autofill:focus,
.wojo.input input:autofill:focus {
   box-shadow: 0 0 0 100px #fff inset;
   border-color: var(--white-color);
}
/* == Ajax Search == */
.wojo.ajax.input {
   z-index: 2;
}
.wojo.ajax.input .results {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 5;
   background: var(--white-color);
   margin-top: 1px;
   width: 100%;
   border-radius: 1rem;
   border: 1px solid var(--grey-color-300);
   box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);
}
/* == Size == */
.wojo.mini.basic.input input {
   padding: .875rem 0;
}
.wojo.form .wojo.mini.input input,
.wojo.mini.input input {
   line-height: .750rem;
   padding: .5rem 1rem;
   font-size: .750rem;
   height: calc(1rem + 1rem);
}
.wojo.small.basic.input input {
   padding: .875rem 0;
}
.wojo.form .wojo.small.input input,
.wojo.small.input input {
   line-height: .875rem;
   padding: .875rem 1.5rem;
   font-size: .875rem;
   height: calc(1.5rem + 1rem + 2px);
}
.wojo.form .wojo.small.color.input input,
.wojo.small.color.input input {
   padding: 875rem 1.5rem 875rem 3.5rem;
}
.wojo.form .wojo.input input,
.wojo.input input {
   line-height: 1rem;
   padding: 1rem 1.5rem;
   border-radius: var(--radius);
   font-size: 1rem;
   height: calc(3rem + 2px);
}
.wojo.form .wojo.color.input input,
.wojo.color.input input {
   padding: 1rem 1.5rem 1rem 3.5rem;
}
.wojo.form .wojo.large.input input,
.wojo.large.input input {
   line-height: 1rem;
   padding: 1rem 1.5rem;
   font-size: 1.5rem;
   height: calc(1.75rem + 1rem + 2px);
}
.wojo.form .wojo.large.basic.input input,
.wojo.large.basic.input input {
   padding: 1rem 0;
   font-weight: 300;
}