src/scss/components/_forms.scss

.input,
.textarea {
    background-color: color(typography, 1);
    border-width: 1px;
    border-style: solid;
    border-color: color(bg, 3);
	border-radius: 2px;
    color: color(typography, 2);
    max-width: 100%;
    width: 100%;

    &::placeholder {
        color: color(typography, 2);
    }

    &::-ms-input-placeholder {
        color: color(typography, 2);
    }

    &:-ms-input-placeholder {
        color: color(typography, 2);
    }

    &:hover {
        border-color: darken(color(bg, 3), 5%);
    }

    &:active,
    &:focus {
        outline: none;
        border-color: color(bg, 3);
    }

    &[disabled] {
        cursor: not-allowed;
        background-color: color(bg, 2);
        border-color: color(bg, 2);
    }
}

.input {
    -moz-appearance: none;
    -webkit-appearance: none;
    @include font-size(7, mobile, true, false, true);
    @if ( get-font-size(7, desktop) != get-font-size(7, mobile) ) {
        @include media( '>medium' ) {
            @include font-size(7, desktop, true, false, true);
        }
    }
    line-height: 20px;
    padding: 13px 16px;
	height: 48px;
    box-shadow: none;

    .inline-input {
        display: inline;
        width: auto;
    }
}

.textarea {
    display: block;
    min-width: 100%;
    resize: vertical;

    .inline-textarea {
        display: inline;
        width: auto;
    }
}

.field-grouped {

    > .control {

        &:not(:last-child) {
            margin-bottom: 8px;
        }
    }
}

.switch[type="checkbox"] {
	outline: 0;
	user-select: none;
	position: absolute;
	opacity: 0;

	+ label {
		display: inline-flex;
	    position: relative;
		line-height: 36px;
	    padding-left: 78px;
		user-select: none;
	    cursor: pointer;

		&::before,
		&::after {
			content: '';
			position: absolute;
			display: block;
		}

		&::before {
			top: 0;
			left: 0;
			width: 64px;
			height: 36px;
			border-radius: 18px;
			background: color(bg, 3);
		}

		&::after {
			top: 6px;
			left: 6px;
			width: 24px;
			height: 24px;
			border-radius: 12px;
			background: color(bg, 1);
			transition: all .15s ease-out;
		}
	}

	&:checked {

		+ label {

			&::before {
				background: color(primary, 1);
			}

			&::after {
				left: 34px;
			}
		}
	}
}

@include media( '>medium' ) {

    .field-grouped {
        display: flex;

        > .control {
            flex-shrink: 0;

            &.control-expanded {
                flex-grow: 1;
                flex-shrink: 1;
            }

            &:not(:last-child) {
                margin-bottom: 0;
                margin-right: 8px;
            }
        }
    }
}