@use '../assets/styles/variables' as *;

.detail {
	border: 1px solid gainsboro;
	border-radius: 20px;

	flex-basis: 50%;
	margin-top: 24px;
	padding: 20px;

	display: flex;
	flex-direction: column;

	.stats {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-top: 24px;
		padding-bottom: 20px;

		border-bottom: 1px solid gainsboro;
		div {
			display: flex;
			align-items: center;
			justify-content: space-between;

			p {
				color: gray;
				font-size: 20px;
			}

			span {
				font-size: 20px;
				font-weight: bold;
			}
		}
	}

	.total {
		display: flex;
		align-items: center;
		justify-content: space-between;

		p {
			color: gray;
			font-size: 20px;
		}

		span {
			font-size: 20px;
			font-weight: bold;
			margin-top: 20px;
		}
	}

	button {
		outline: 0;
		border: 0;
		font-size: 16px;
		padding: 20px;
		border-radius: 62px;
		background-color: $primary-color;
		color: $white-color;
		cursor: pointer;
		margin-top: 24px;
	}
}