/*

Payment Module

	The payment module adds functionality to the ChoiceBox component that allows users to
	select, edit, and delete payment options.

	Reqs: ChoiceBox Component

	Usage:
	<div class="Payment-container">
		<ul>
			<li class="Payment Payment--autopay ChoiceBox">
				<input type="radio" class="ChoiceBox__radio"
					name="example" id="example" value="example" />
				<label for="example" class="ChoiceBox__label">
					<div class="ChoiceBox__title">
						Example Title
					</div>
					<div class="ChoiceBox__content">
						This is one of two choice boxes that appear
						next to each other.

						<div class="Payment__actions">
							<button class="Button Button--text Payment__actions--primary" data-remodal-target="test-modal">Edit</button>
						</div>
					</div>
				</label>
			</li>
		</ul>
	</div>

*/

.Payment-container {

	.ChoiceBox__label {
		padding: 1.5rem;
	}

	.Payment--autopay .ChoiceBox__title:after {
		content: "(Autopay)";
		color: $c-o300;
	}

	.ChoiceBox {
		position: relative;
	}

	.ChoiceBox__title,
	.ChoiceBox__content {
		text-align: left;
		padding-right: 10rem;
	}

	.Payment__actions--primary,
	.Payment__actions--secondary,
	.Payment__actions--danger {
		margin-bottom: 0.5rem;
		font-size: $t-1;
		line-height: $t-h-2;
		color: $c-g300;
	}

	.Payment:hover {
		.Payment__actions--primary {
			color: $c-b300;
		}

		.Payment__actions--secondary {
			color: $c-g400;

			&:hover {
				color: $c-b300;
			}
		}

		.Payment__actions--danger {
			color: $c-r300;
		}
	}
}

.Payment__actions {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	text-align: right;
}