@use "../kit-deps" as *;
@use "typography" as *;

.repeater {
	.repeater-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: $space-2;
		margin-bottom: $space-3;
	}

	.repeater-title {
		font-size: $font-size-base;
		font-weight: $font-weight-semibold;
		color: $color-text-light;
	}

	.repeater-list {
		display: grid;
		gap: $space-2;
	}

	.repeater-item {
		@include hard_panel($border-color-muted);
		padding: $space-3;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: $space-3;
		align-items: start;
	}

	.repeater-item-body {
		width: 100%;
	}

	.repeater-item-actions {
		display: flex;
		align-items: center;
		gap: $space-2;
		padding-top: $space-6;
	}

	&.repeater-disabled {
		opacity: 0.6;
		pointer-events: none;
	}
}