@import '../../../../_common/scss/main';

.PaymentMethodChoices {
	&__Arrow {
		padding: $gutter-large $gutter-small;
		top: -9px;
	}

	&__ChoiceList {
		&__Choice {
			padding: $gutter-small $gutter-large;
			margin: 0 -#{$gutter-large};

			&--Disabled {
				.PaymentMethodChoiceLabel__Label {
					color: $disabled-color;
				}
			}

			&:hover, &:active, &:focus {
				background: $secondary-color-lighter;

				.PaymentPromoCallout__Terms {
					background: transparent;
				}
				.FlagLabel--HasRightInnerArrow:before{
					border-left-color: $secondary-color-lighter;
				}
			}
		}
	}

	&__Saved,
	&__Unsaved {
		&__Title {
			&__Icon {
				color: $gray-stroke;
				margin-left: $gutter-small;
			}
		}
	}

	&__Saved {
		.Accordion__Header {
			padding: 0;
			margin-bottom: $gutter;
		}

		&__Title {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			color: $primary-color;
			user-select: none;
			margin: $gutter-large 0 0 0;
			white-space: nowrap;

			&:hover, &:active, &:focus {
				cursor: pointer;
			}

			&__IconToggle {
				margin: 0 $gutter-small 0 $gutter-extra-small;

				&--Collapse {
					display: none;
				}
			}

			&__Line {
				flex: 1;
				border: 1px solid rgba($gray-stroke, 0.5);
				margin: 0 calc(#{$gutter-large + $gutter}) 0 $gutter;
			}
		}
	}

	&__Unsaved {
		&__Title {
			&__Icon,
			&__Title {
				vertical-align: middle;
			}
			&__HardPayment {
				margin: 0 0 $gutter $gutter-small;

				&__container {
					display: flex;
					flex-direction: row;
				}

				&__icon {
					font-size: 18px;
					color: $error-color;
				}
			}
		}
	}

	&__UseButton {
		&__container {
			margin-top: $gutter;
			display: inline-block;
		}

		&__subtext {
			text-align: center;
			margin: $gutter-small 0 0;
		}
	}
}

.Accordion--Visible {
	.PaymentMethodChoices {
		&__Saved {
			&__Title {
				&__IconToggle {
					&--Expand {
						display: none;
					}

					&--Collapse {
						display: inline;
					}
				}
			}
		}
	}
}