/// @access private
/// @param {Boolean} $disabled Whether to output disabled state styling
/// @param {Boolean} $invalid Whether to output invalid state styling
/// @param {Boolean} $valid Whether to output valid state styling
/// @output Styling for date inputs
@mixin _oFormsDate($disabled: null) {
	.o-forms-input--date {
		label {
			display: flex;
			float: left;
			flex-direction: column-reverse;
			margin-bottom: 0;
		}

		input[type='text'] {
			@include _oFormsInputBase($disabled);
			display: block;
			margin: $_o-forms-spacing-one $_o-forms-spacing-three 0 0;

			// The pattern attribute used to be used to select the day/month
			// parts of date input. When the day pattern needed to change the
			// class "o-forms-input__day-part" and ".o-forms-input__month-part"
			// was added. For backwards compatibility select on both the patterns.
			// @breaking remove pattern selector
			&.o-forms-input__day-part,
			&.o-forms-input__month-part,
			&[pattern$='{2}'],
			&[pattern$='[012]'] {
				// width plus padding
				width: calc(2ch + #{$_o-forms-spacing-four * 2});
			}

			// The pattern attribute used to be used to select the year part of
			// date input. "o-forms-input__year-part" was added later.
			// For backwards compatibility select on both.
			// @breaking remove pattern selector
			&.o-forms-input__year-part,
			&[pattern$='{4}'] {
				// width plus padding
				width: calc(4ch + #{$_o-forms-spacing-four * 2});
			}
		}

		.o-forms-input__error {
			padding-top: $_o-forms-spacing-one;
			clear: both;
		}
	}
}
///sass-lint:enable no-qualifying-elements