// ==========================================================================
// Add / Edit Keyword — right-side drawer specifics.
// Reuses the `.bl-drawer` + `.link-options` shell from _link-drawer.scss
// (content is portaled to <body>, so these rules live at root level too).
// ==========================================================================
$kd-border: #e6e8ee;
$kd-text: #1a2233;
$kd-muted: #6b7280;
$kd-blue: #2f6bff;
$kd-surface: #f7f8fa;

.bl-kw-drawer {
	// Header icon badge (T)
	&__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 10px;
		background: rgba($kd-blue, 0.1);
		color: $kd-blue;
	}

	// Helper + error text under fields
	&__hint {
		margin-top: 7px;
		font-size: 12px;
		color: $kd-muted;

		&.is-error {
			color: #ef4444;
		}
	}
	&__error {
		display: block;
		margin-top: 6px;
		font-size: 12px;
		color: #ef4444;
	}
	&__pro-note {
		display: block;
		margin-bottom: 10px;
		font-size: 12px;
		font-weight: 500;
		color: #9199a6;
	}

	// Post Type + Post Category side by side
	&__row {
		display: flex;
		gap: 16px;

		.btl-modal-form-group {
			flex: 1;
			min-width: 0;
		}
		@media (max-width: 560px) {
			flex-direction: column;
			gap: 0;
		}
	}

	// Leading icon inside a right-column card head
	&__card-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		border-radius: 8px;
		background: $kd-surface;
		color: $kd-muted;
		flex: none;
	}

	// Toggle rows (HTML Options)
	&__toggles {
		display: flex;
		flex-direction: column;
	}

	// Footer: left-aligned, natural-width buttons
	.bl-drawer__footer {
		justify-content: flex-start;
	}
	.bl-drawer__publish,
	.bl-drawer__cancel {
		flex: 0 0 auto;
		min-width: 118px;
		height: 46px;
		padding: 0 22px;
		font-size: 14px;
	}
}

// Keyword chips input (replaces the old comma textarea). Each keyword renders as
// a removable pill; the trailing text field grows to fill the row.
.bl-kw-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 8px 10px;
	border: 1px solid $kd-border;
	border-radius: 10px;
	background: #fff;
	cursor: text;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;

	&:focus-within {
		border-color: $kd-blue;
		box-shadow: 0 0 0 3px rgba($kd-blue, 0.12);
	}

	&__item {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		max-width: 100%;
		height: 28px;
		padding: 0 5px 0 10px;
		border-radius: 7px;
		background: rgba($kd-blue, 0.1);
		color: $kd-text;
		font-size: 13px;
		font-weight: 500;
		line-height: 1;
		cursor: default;
		user-select: none;
	}
	&__text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	&__remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		padding: 0;
		border: none;
		border-radius: 5px;
		background: transparent;
		color: $kd-muted;
		cursor: pointer;
		transition: background 0.15s ease, color 0.15s ease;

		svg {
			width: 9px;
			height: 9px;
		}
		&:hover {
			background: rgba(#ef4444, 0.12);
			color: #ef4444;
		}
	}
	&__input {
		flex: 1 1 100px;
		min-width: 100px;
	}
	&__input,
	&__edit {
		height: 28px;
		margin: 0;
		padding: 0 2px;
		border: none;
		outline: none;
		background: transparent;
		font-size: 14px;
		color: $kd-text;
		box-shadow: none;

		&::placeholder {
			color: #9aa1ad;
		}
	}
	// Inline edit box for a double-clicked chip — sized to its content via `size`.
	&__edit {
		flex: 0 0 auto;
		width: auto;
		padding: 0 8px;
		border-radius: 7px;
		background: #fff;
		box-shadow: 0 0 0 2px rgba($kd-blue, 0.45) inset;
		font-weight: 500;
	}
}

body.betterlinks-dark-mode .bl-kw-chips {
	background: #252f47;
	border-color: #36405a;

	&__item {
		background: rgba($kd-blue, 0.22);
		color: #e6e9ef;
	}
	&__input,
	&__edit {
		color: #e6e9ef;
	}
	&__edit {
		background: #2c3650;
	}
}

// Toggle switch
.bl-kw-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	margin: 0;
	cursor: pointer;

	&:not(:last-child) {
		border-bottom: 1px solid $kd-border;
	}
	&__icon {
		display: inline-flex;
		flex: none;
		color: $kd-muted;
	}
	&__label {
		flex: 1;
		min-width: 0;
		font-size: 14px;
		font-weight: 500;
		color: $kd-text;
	}
	&__switch {
		position: relative;
		flex: none;
		width: 40px;
		height: 22px;

		input {
			position: absolute;
			opacity: 0;
			width: 0;
			height: 0;
			margin: 0;
		}
	}
	&__slider {
		position: absolute;
		inset: 0;
		background: #d1d5db;
		border-radius: 22px;
		transition: background 0.2s ease;

		&::before {
			content: '';
			position: absolute;
			width: 16px;
			height: 16px;
			left: 3px;
			top: 3px;
			background: #fff;
			border-radius: 50%;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
			transition: transform 0.2s ease;
		}
	}
	input:checked + &__slider {
		background: $kd-blue;
	}
	input:checked + &__slider::before {
		transform: translateX(18px);
	}
}

// Dark-mode parity with the link drawer.
body.betterlinks-dark-mode .bl-kw-drawer {
	&__badge {
		background: rgba($kd-blue, 0.18);
	}
	&__card-icon {
		background: rgba(#fff, 0.06);
		color: #aeb6c2;
	}
}
body.betterlinks-dark-mode .bl-kw-toggle {
	&:not(:last-child) {
		border-color: rgba(#fff, 0.08);
	}
	&__label {
		color: #e6e9ef;
	}
}