%textInput {
	@include rem(10);
	height: $default-spacing * 3;
	flex: 1;
	margin-bottom: $default-spacing;
	outline: none;
	border: 1px solid var(--nd-color-border);
	padding: ($default-spacing * .8) ($default-spacing);
	color: var(--nd-color-text);
	background: rgba(0, 0, 0, 0);
	transition: $default-transition;
	border-radius: 0;
	-webkit-appearance: none;

	&:focus {
		border-color: var(--nd-color-link);
	}

	&:hover:not(:disabled) {
		background: rgba(0, 0, 0, 0.02);
	}

	&:disabled {
		cursor: not-allowed;
	}
}

[type="text"] {
	@extend %textInput;
}

[type="url"] {
  @extend %textInput;
}


[type="search"] {
	@extend %textInput;

	&::-webkit-search-cancel-button{
   // TODO: Style the clear button
	}
}


.nd-input-group {
	padding: ($default-spacing * 0.5);
	flex: 1;

	input {
		width: 100%;
	}

	[type="text"] {
		margin-bottom: 0;
	}

	.subtitle {
		text-align: left;
		padding-bottom: $default-spacing * 0.5;
		color: var(--nd-color-text);
	}

	&:first-child {
		padding-left: 0 !important;
	}

	&:last-child {
		padding-right: 0 !important;
	}
}

label {
	@include rem(10);
	font-weight: 700;
}


.checkbox {
  color: var(--nd-color-text);
  padding-left: $default-spacing;

  // Box hover
  &:hover {
    label:before {
      border: 1px solid var(--nd-color-link);
    }
  }

  // Box focus
  &:focus {
    label:before {
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
    }
  }
  [type="checkbox"] {
    position: absolute; // take it out of document flow
    opacity: 0; // hide it
    display: none;

    & + label {
      position: relative;
      cursor: pointer;
      padding: 0;

    }

    // Box.
    & + label:before {
      content: '';
      margin-right: 5px;
      display: inline-block;
      vertical-align: text-top;
      width: 10px;
      height: 10px;
      background: $white;
      border: 1px solid var(--nd-color-text);
      transition: $default-transition;
    }

    &:checked + label{
    	color: var(--nd-color-link);

    }

    // Box checked
    &:checked + label:before {
    	background: var(--nd-color-link);
    	box-shadow: inset 0 0 0 1px white;
  	}

    // Disabled state label.
    &:disabled {
    	label {
      	color: #b8b8b8;
      	cursor: auto;
    	}
    }

    // Disabled box.
    &:disabled {
    	label:before {
      	box-shadow: none;
      	background: #ddd;
    	}
    }
  }
}