@import '../../variables.scss';

.account-subscription {
	&-plan {
		& .badge {
			border: 2px solid $medium-grey;
			border-radius: 5px;
			color: $medium-grey;
			padding: 0 5px;
			float: right;
			font-size: 12px;
			text-transform: uppercase;
			margin: 3px 0;
			font-weight: 700;
			letter-spacing: 0.08em;

			&.danger {
				border-color: $red;
				color: $red;
			}
		}
	}
}

.account-subscription-card {
	display:flex;
	justify-content:space-between;

	&-buttons {
		display:flex;
		flex:0 0 55px;

		&-button {
			width: 24px;
			height:24px;
			cursor:pointer;
		}

		&-make-default {
			background-image: url("../../../images/icon-checked.svg");
			margin-right: 7px;

			&:hover {
				background-image: url("../../../images/icon-checked-active.svg");
			}
		}

		&-delete {
			background-image: url("../../../images/icon-delete.svg");

			&:hover {
				background-image: url("../../../images/icon-delete-hover.svg");
			}
		}
	}
}
