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