SCSS Sample code

FormField.scss

@use "~@scss/theme" as *;
@use "~@scss/mixins/margin" as *;
@use "~@scss/mixins/flex" as *;
@use "~@scss/mixins/border" as *;
@use "~@scss/mixins/colors" as *;
@use "~@scss/modules/error" as *;


$bwidth: 3px;
$radius: 1em;
$vpadding: $radius / 2;
$hpadding: 1.1 * $radius;

.form-field{
    @include verticalMargin(1em);
    @include gridFlex;

    &, &__label, &__input, &__field{
        display: block;
        width: 100%;
    }

    &__label{
        @include textPrimary;
        margin-bottom: .5em;
    }

    &__field{
        @include borderRadiusTop($radius);
        @include verticalPadding($vpadding);
        @include horizontalPadding($hpadding);
        padding-top: calc(#{$vpadding} + #{$bwidth});

        @include blockAlt;
        border: none;
        border-bottom: $bwidth solid rgba(primary(), $disabledOpacity);
        transition: .3s ease-in-out;
        transition-property: border-color, box-shadow;
        box-shadow: 0 0 0 0 transparent;

        &:focus, &:active{
			outline: none;
            border-color: primary();
            box-shadow: 0 0 2px 1px rgba(#000, 0.15);
        }
	}

	&__error{
		@extend %error-text;
	}

	&--error{
		.form-field{
			&__field{
				&, &:focus, &:active{
					@extend %error;
				}
			}
		}
	}
}