@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/4-elements/_global.elements.scss';
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/7-overrides/_visibility.overrides.scss';

@use '../../styles/fieldsets.scss';
@use '../../styles/labels.scss';
@use '../../styles/text-inputs.scss';
@forward '../../utils/components/error-message/error-message';

$ontario-dropdown-border-width: 0.125rem;

.ontario-dropdown {
	background-color: colours.$ontario-colour-white;
	background-position: right spacing.$spacing-2 center;
	background-repeat: no-repeat;
	background-size: spacing.$spacing-6;
	padding-right: (spacing.$spacing-4 * 2.25);
	cursor: pointer;

	&.ontario-dropdown-hint-expander--true {
		margin-bottom: spacing.$spacing-4;
	}
}

/* These styles are to fix differences in default styling for dropdowns in IE */
.ontario-dropdown::-ms-expand {
	display: none;
}

.ontario-dropdown option {
	font-weight: normal;
}

.ontario-dropdown--error {
	select {
		border: $ontario-dropdown-border-width solid colours.$ontario-colour-alert;
	}
}