/* stylelint-disable color-hex-case */
/* stylelint-disable selector-no-qualifying-type */
@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

@import '../../shared/styles/mixins';

.time-picker {
	display: flex;
	flex-direction: column;
	align-items: center;

	legend {
		border: none;
		font-size: inherit;
		text-align: center;
		text-transform: none;

		.utc {
			color: tokens.$coral-color-neutral-text;
			font-size: 0.75rem;
		}
	}

	hr {
		width: 100%;
		border-color: tokens.$coral-color-neutral-border;
		margin: $padding-small 0;
	}

	> input.time-input {
		border: 1px solid tokens.$coral-color-neutral-border;
		height: 1.875rem;
		text-align: center;
		width: 100%;

		&:focus {
			border-color: tokens.$coral-color-accent-border;
		}

		&.time-error {
			box-shadow: inset 0 -2px 0 #e96065;
			border-bottom: none;
		}
	}
}