_components.form-input-denote.scss

// The form input denote component simply adds a visual box treatment before
// or after an input.
// ---------------------------------------

// Predefine the variables below in order to alter and enable specific
// features.
$form-input-denote-background:            $grey-3 !default;
$form-input-denote-background--error:     $red !default;
$form-input-denote-text--error:           $white !default;
$form-input-denote-border:                $grey-1 !default;
$form-input-denote-border-width:          2px !default;
$form-input-denote-padding:               12px !default;
$form-input-denote-padding--small:        4px !default;
$form-input-denote-padding--large:        ($form-input-denote-padding * 2) !default;





.c-form-input-denote {
	position: absolute;
	margin: $form-input-denote-border-width 0 0 $form-input-denote-border-width;
	padding: 6px $form-input-denote-padding;
	background-color: $form-input-denote-background;
	line-height: 1;

	@include media(tablet) {
		padding: 7px $form-input-denote-padding;
	}

	// 1. Magic number from the width of the currency denote (11px)
	//    with cursor padding on input (4px). 11px+4px gives total 15px.
	&__input {
		margin: 0;
		padding-left: ($form-input-denote-padding--large + 15px); // [1]
	}

	// Account for additional 2px offset caused by error state.
	.error & {
		margin-top: ($form-input-denote-border-width * 2);
		margin-left: ($form-input-denote-border-width * 2);
		padding: 6px $form-input-denote-padding;
		background-color: $form-input-denote-background--error;
		color: $form-input-denote-text--error;

		@include media(tablet) {
			padding: 8px $form-input-denote-padding;
		}
	}
}