// ============================================================================
// :: SLDS Input
// ============================================================================
/**
 * Scope with overwrites for the inputfield in the Salesforce Lightning Design
 * System.
 */

// ============================================================================
// :: Root
// ============================================================================
// .s-slds-input-calendar {}

// ============================================================================
// :: Elements
// ============================================================================

// Remove styling from their wrapper
.s-slds-input-calendar .a-input__field {
	padding: 0;

	border: 0;
}

// Make their input look like our a-input__field
.s-slds-input-calendar .slds-input {
	@extend %__input__field;

	// remove the box-shadow on focus
	&:focus {
		box-shadow: none;
	}
}

// Position the input correctly
.s-slds-input-calendar .slds-input__icon {
    display: flex;
    align-items: center;
    justify-content: center;
	width: 4rem;
	height: 4rem;
	margin: 0;

	transform: translateY(-50%);
}

// Fix the color & size of the icon
.s-slds-input-calendar .slds-input__icon .slds-button_icon-bare {
	font-size: 2rem;

	color: $text-color-base;
}

// add icon-calendar button to the button
.s-slds-input-calendar .slds-button {
	@extend %__icon-calendar;

	// remove the svg which holds their icon
	svg {
		display: none;
	}
}