tsmd/_text-input.scss

## _text-input.scss
@charset "UTF-8";

.TextInput {
  @at-root {
    & {
      width: 100%;
      height: rem(40px);
      padding: 0 rem(14px);
      border: 0;
      color: inherit;
      border-radius: 4px;
      background-color: #fff;
      font: inherit;
      font-size: rem(16px);
      appearance: none;
    }

    &::placeholder {
      // コントラスト比確保したいので…
      //color: $color-gray40;
    }

    // ------------------------------------------------------
    // Colors
    //

    &.-color-gray5 {
      background-color: $color-gray5;
    }

    &.-color-pale {
      background-color: rgba(#fff, 0.6);
    }

    // ------------------------------------------------------
    // Sizes
    //

    &.-size-large {
      height: rem(50px);
      padding-right: rem(16px);
      padding-left: rem(16px);
      font-size: rem(20px);
    }

    &.-size-small {
      height: rem(28px);
      padding-right: rem(12px);
      padding-left: rem(12px);
      font-size: rem(16px);
    }

    // ------------------------------------------------------
    // Rounded
    //

    &.-rounded {
      border-radius: rem(100px);
    }

    // ------------------------------------------------------
    // Bordered
    //

    &.-bordered {
      border: 1px solid $color-gray30;
    }

    // ------------------------------------------------------
    // States
    //

    &:invalid {
      outline: 0; // ブラウザ規定の invalid スタイルを打ち消し
      box-shadow: none; // ブラウザ規定の invalid スタイルを打ち消し

      .-invalid & {
        border: 1px solid $color-alert;
      }
    }

    &.-invalid {
      border: 1px solid $color-alert;
    }

    &:read-only {
      color: $color-gray40;

      &:focus {
        box-shadow: none;
      }
    }

    &:disabled {
      color: $color-gray40;
      border: 0;
      background-color: $color-gray10;
    }

    &:focus {
      background-color: #fff;
      box-shadow: 0 0 0 4px $color-primary-10;
      outline: 0;
    }
  }
}

## text-input.html
<!DOCTYPE html>
<html lang="ja">
<title>TextInput</title>

<input class="TextInput" type="text">
	@charset "UTF-8";

	.TextInput {
	@at-root {
	& {
	width: 100%;
	height: rem(40px);
	padding: 0 rem(14px);
	border: 0;
	color: inherit;
	border-radius: 4px;
	background-color: #fff;
	font: inherit;
	font-size: rem(16px);
	appearance: none;
	}

	&::placeholder {
	// コントラスト比確保したいので…
	//color: $color-gray40;
	}

	// ------------------------------------------------------
	// Colors
	//

	&.-color-gray5 {
	background-color: $color-gray5;
	}

	&.-color-pale {
	background-color: rgba(#fff, 0.6);
	}

	// ------------------------------------------------------
	// Sizes
	//

	&.-size-large {
	height: rem(50px);
	padding-right: rem(16px);
	padding-left: rem(16px);
	font-size: rem(20px);
	}

	&.-size-small {
	height: rem(28px);
	padding-right: rem(12px);
	padding-left: rem(12px);
	font-size: rem(16px);
	}

	// ------------------------------------------------------
	// Rounded
	//

	&.-rounded {
	border-radius: rem(100px);
	}

	// ------------------------------------------------------
	// Bordered
	//

	&.-bordered {
	border: 1px solid $color-gray30;
	}

	// ------------------------------------------------------
	// States
	//

	&:invalid {
	outline: 0; // ブラウザ規定の invalid スタイルを打ち消し
	box-shadow: none; // ブラウザ規定の invalid スタイルを打ち消し

	.-invalid & {
	border: 1px solid $color-alert;
	}
	}

	&.-invalid {
	border: 1px solid $color-alert;
	}

	&:read-only {
	color: $color-gray40;

	&:focus {
	box-shadow: none;
	}
	}

	&:disabled {
	color: $color-gray40;
	border: 0;
	background-color: $color-gray10;
	}

	&:focus {
	background-color: #fff;
	box-shadow: 0 0 0 4px $color-primary-10;
	outline: 0;
	}
	}
	}
	<!DOCTYPE html>
	<html lang="ja">
	<title>TextInput</title>

	<input class="TextInput" type="text">