/* ═══════════════════════════════════════════════════════════════════════════
   Input Variants
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Variant: underlined ─────────────────────────────────────────────────── */

.bagel-input.underlined {
	padding-top: 1.1rem;
}

.bagel-input .bagel-input.underlined {
	padding-top: 0rem;
}

.bagel-input.underlined label {
	position: relative;
	display: block;
}

.bagel-input.underlined .label-text {
	position: absolute;
	top: 0.75rem;
	inset-inline-start: 0.25rem;
	font-size: var(--bgl-input-font-size);
	color: var(--bgl-placeholder-color);
	pointer-events: none;
	transition:
		top 0.2s ease,
		font-size 0.2s ease,
		color 0.2s ease,
		opacity 0.2s ease;
	line-height: 1;
}

/* float up: focused (text inputs) or open (select) */
.bagel-input.underlined:focus-within .label-text,
.bagel-input.underlined.open .label-text {
	top: -0.65rem;
	font-size: 0.65rem;
	color: var(--bgl-input-label-active-color);
	opacity: 1;
}

/* Adjust label position when there's a start icon */
.bagel-input.underlined.txtInputIconStart .label-text {
	inset-inline-start: calc(var(--bgl-input-height) / 3 + 1.25rem);
}

/* Adjust label position for DateInput with internal iconStart */
.bagel-input.underlined:has(.txtInputIconStart) .label-text {
	inset-inline-start: calc(var(--bgl-input-height) / 3 + 1.25rem);
}

/* Adjust input padding when there's a start icon in underlined mode */
.bagel-input.underlined.txtInputIconStart input,
.bagel-input.underlined.txtInputIconStart textarea {
	padding-inline-start: calc(var(--bgl-input-height) / 3 + 1.5rem) !important;
}

/* Adjust icon position in underlined mode */
.bagel-input.underlined.txtInputIconStart .iconStart {
	margin-top: calc(var(--bgl-input-height) / 2 + 0.16rem);
}

/* float up: has value */
.bagel-input.underlined label:has(input:not(:placeholder-shown)) .label-text,
.bagel-input.underlined label:has(textarea:not(:placeholder-shown)) .label-text,
.bagel-input.underlined.has-value .label-text {
	top: -0.65rem;
	font-size: 0.65rem;
	opacity: 1;
}

/* focused: color the label */
.bagel-input.underlined:focus-within .label-text,
.bagel-input.underlined.open .label-text {
	color: var(--bgl-input-label-active-color);
	opacity: 1;
}

/* ── input / textarea / select ── */

.bagel-input.underlined input,
.bagel-input.underlined textarea,
.bagel-input.underlined select {
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	border: none !important;
	border-bottom: 1.5px solid var(--bgl-border-color) !important;
	padding-inline: 0.25rem !important;
}

.bagel-input.underlined input:focus,
.bagel-input.underlined select:focus {
	outline: none !important;
	box-shadow: none !important;
}

.bagel-input.underlined > label:not(:has(textarea))::after {
	content: '';
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	width: 0;
	height: 2px;
	background: var(--bgl-input-label-active-color, var(--bgl-primary));
	transition: width 0.6s ease;
	pointer-events: none;
}

.bagel-input.underlined:focus-within > label:not(:has(textarea))::after,
.bagel-input.underlined.open > label:not(:has(textarea))::after {
	width: 100%;
}

/* multiline textarea: full border, label stays inside */
.bagel-input.underlined textarea {
	border: 1.5px solid var(--bgl-border-color) !important;
	border-radius: var(--bgl-input-border-radius) !important;
	padding: 0.9rem !important;
	padding-top: 1.4rem !important;
	background-image: none !important;
	background-size: unset !important;
	transition: border-color 0.25s ease !important;
}

.bagel-input.underlined textarea:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
}

/* label default: sits at placeholder level inside the box */
.bagel-input.underlined label:has(textarea) .label-text {
	top: 1rem;
	inset-inline-start: 0.9rem;
}

/* label floated: moves to top padding area, stays inside border */
.bagel-input.underlined:focus-within label:has(textarea) .label-text {
	top: 0.45rem;
	font-size: 0.65rem;
	color: var(--bgl-input-label-active-color);
	opacity: 1;
}

.bagel-input.underlined
	label:has(textarea:not(:placeholder-shown))
	.label-text {
	top: 0.45rem;
	font-size: 0.65rem;
	color: var(--bgl-input-label-active-color);
	opacity: 1;
}

.bagel-input.underlined:focus-within
	label:has(textarea:not(:placeholder-shown))
	.label-text {
	top: 0.45rem;
	color: var(--bgl-input-label-active-color);
	opacity: 1;
}

/* ── date-input: cascade underlined styles into nested TextInput ── */

.bagel-input.underlined .date-input input {
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	border: none !important;
	border-bottom: 1.5px solid var(--bgl-border-color) !important;
	padding-inline: 0.25rem !important;
}

.bagel-input.underlined .date-input input:focus {
	outline: none !important;
	box-shadow: none !important;
}

.bagel-input.underlined .date-input.txtInputIconStart input {
	padding-inline-start: calc(var(--bgl-input-height) / 3 + 1.5rem) !important;
}