// Fieldset
fieldset {
  font-family: inherit;
  border: 1px solid rgba(0, 0, 0, .1);
  padding: 2rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
}
legend {
	font-weight: bold;
	font-size: calc(var(--font-size-smaller));
	text-transform: uppercase;
	padding: 0 1rem;
	margin-left: -1rem;
	top: 2px;
	position: relative;
	line-height: 0;
}
input,
textarea,
select {
  display: block;
  width: 100%;
	font-family: inherit;
	font-size: var(--input-font-size);
	height: var(--input-height);
  outline: none;
  vertical-align: middle;
	background-color: var(--input-background-color);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  box-shadow: var(--input-box-shadow);
  padding: 0 var(--input-padding-rl);
}

// Sizing
input.small,
textarea.small,
select.small {
  height: var(--input-height-small);
  font-size: calc(var(--input-font-size-small));
  padding: 0 var(--input-padding-small-rl);
  border-radius: var(--input-border-radius);
}
input.big,
textarea.big,
select.big {
  height: var(--input-height-big);
  font-size: calc(var(--input-font-size-big));
  padding: 0 var(--input-padding-big-rl);
  border-radius: var(--input-border-radius);
}
// States
input,
textarea,
select {
  &:focus {
  	outline: none;
  	background-color: var(--input-focus-background-color);
  	border-color: var(--input-focus-border-color);
    box-shadow: var(--input-focus-box-shadow);
  }
  &.error {
    background-color: var(--input-error-background-color);
  	border: var(--input-border-width) solid var(--input-error-border-color);
  	&:focus {
      border-color: var(--input-error-border-color);
      box-shadow: var(--input-error-focus-box-shadow);
  	}
	}
  &.success  {
  	background-color: var(--input-success-background-color);
  	border: var(--input-border-width) solid var(--input-success-border-color);
  	&:focus {
      border-color: var(--input-success-border-color);
      box-shadow: var(--input-success-focus-box-shadow);
  	}
  }
  &:disabled,
  &.disabled {
  	resize: none;
  	opacity: var(--input-disabled-opacity);
  	cursor: default;
  	font-style: italic;
  	color: var(--input-disabled-color);
	}
}
select {
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12"><path fill="#5e6c75" d="M0.722,4.823L-0.01,4.1,4.134-.01,4.866,0.716Zm7.555,0L9.01,4.1,4.866-.01l-0.732.726ZM0.722,7.177L-0.01,7.9,4.134,12.01l0.732-.726Zm7.555,0L9.01,7.9,4.866,12.01l-0.732-.726Z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
select[multiple] {
  background-image: none;
  height: auto;
  padding: .5rem .75rem;
}
textarea {
  height: auto;
  padding: var(--input-textarea-padding-tb) var(--input-padding-rl);
  line-height: var(--textarea-base-line);
  vertical-align: top;
}
input[type="file"] {
  width: auto;
  border: none;
  padding: 0;
  height: auto;
  background: none;
  box-shadow: none;
  display: inline-block;
}
input[type="search"],
input.search {
  background-repeat: no-repeat;
  background-position: 8px 53%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#000" fill-opacity="0.4" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>');
  padding-left: 32px;
}
input[type="radio"],
input[type="checkbox"] {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0;
}
label {
  display: block;
  color: var(--color-darkgray);
  margin-bottom: 4px;
  font-size: calc(var(--font-size) - 1px);
  &.checkbox,
  & .desc,
  & .success,
  & .error {
  	text-transform: none;
  	font-weight: normal;
  }
  &.checkbox {
    font-size: var(--font-size);
    line-height: var(--base-line);
  	cursor: pointer;
  	color: inherit;
    & input {
      margin-top: 0;
    }
  }
}
.form-checkboxes {
  & label.checkbox {
    display: inline-block;
    margin-right: 16px;
	}
}
.req {
  position: relative;
  top: 1px;
	font-weight: bold;
	color: var(--color-error);
	font-size: 110%;
}
.desc {
  color: var(--color-gray);
  font-size: calc(var(--font-size-smaller));
  line-height: var(--base-line-smaller);
}
span.desc {
  margin-left: 4px;
}
div.desc {
  margin-top: 4px;
  margin-bottom: -8px;
}
.form-buttons {
  & button,
  & .button {
    margin-right: 8px;
  }
}
form,
.form-item {
  margin-bottom: 2rem;
}
.form {
  & > .form-item:last-child {
    margin-bottom: 0;
  }
  & .row:last-child {
    & .form-item {
      margin-bottom: 0;
    }
  }
  & span.success,
  & span.error {
    font-size: calc(var(--font-size-smaller));
    line-height: var(--base-line-smaller);
    margin-left: 4px;
  }
}
.form-inline {
  & input,
  & textarea,
  & select {
    display: inline-block;
    width: auto;
  }
}

// Append & Prepend
.append,
.prepend {
	@include flex;
	& input {
		@include flex-item-one;
	}
	& .button,
	& span {
		@include flex-item-shrink;
  }
	& span {
    @include flex;
    @include flex-items-column;
    @include flex-items-center;
		font-weight: normal;
		border: var(--input-border-width) solid var(--input-border-color);
		background-color: var(--color-aluminum);
		padding: 0 .875rem;
		color: rgba(0, 0, 0, .5);
		font-size: calc(var(--font-size-smaller));
		white-space: nowrap;
	}
}
.prepend {
  & input {
    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
  }
  & .button {
    margin-right: -1px;
    border-radius: var(--input-border-radius) 0 0 var(--input-border-radius) !important;
  }
  & span {
    border-right: none;
    border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
  }
}
.append {
  & input {
    border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
  }
  & .button {
    margin-left: -1px;
    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0 !important;
  }
  & span {
    border-left: none;
    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
  }
}