MaterialSellerUI {
	position: absolute;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-family: 'Baloo 2';

	.frame {
		align-items: center;
		justify-content: center;
		border-radius: 0 25px 0 25px;
		font-weight: bold;
		flex-direction: column;
		font-size: 25px;
		backdrop-filter-blur: 18px;
		cursor: default;
		max-height: 60%;
		height: 60%;
		position: relative;
		overflow: hidden;
		background-color: rgba(32, 34, 39, 0.95);
	}

	.header {
		border-radius: 0 25px 0 0;
		display: flex;
		width: 100%;
		padding: 1.5rem 2.5rem;
		background-color: rgba(32, 34, 39, 0.99);
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 36px;
		gap: 1rem;
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
		flex-shrink: 0;

		.header-child {
			align-items: center;
			gap: 1rem;
		}

		.close-btn {
			pointer-events: all;
			cursor: pointer;

			&:hover {
				color: red;
			}
		}

		.title {
			font-weight: 400;
			text-transform: uppercase;
			letter-spacing: 0.25rem;
		}
	}

	.container {
		background-color: rgba(32, 34, 39, 0.95);
		flex-direction: column;
		padding: 2rem 3rem;
		gap: 2px;
		overflow-y: scroll;
		overflow-x: hidden;
		flex: 1;
		min-height: 0;
		pointer-events: all;
		width: 100%;
	}

	.scrollbar-track {
		position: absolute;
		right: 4px;
		top: 110px; /* hauteur du header */
		bottom: 110px; /* hauteur du sell-all */
		width: 6px;
		background-color: rgba(255, 255, 255, 0.05);
		border-radius: 10px;
		overflow: hidden;
	}

	.scrollbar-thumb {
		position: absolute;
		width: 6px;
		background-color: rgba(223, 169, 53, 0.5);
		border-radius: 10px;

		&:hover {
			background-color: rgba(223, 169, 53, 0.9);
		}
	}

	.item {
		width: 100%;
		justify-content: space-between;
		font-weight: 500;
		padding: 5px 5px 5px 12px;
		border-radius: 0 20px 0 20px;
		font-size: 25px;
		align-items: center;
		min-width: 650px;
		flex-shrink: 0;

		&:nth-child(odd) {
			background-color: rgba(220, 220, 220, 0.01);
		}

		.col {
			flex: 0 0 100px;
			display: flex;
			min-width: 0;
		}

		.prefix {
			flex: 0 0 150px;
			align-items: center;
			justify-content: flex-start;
			gap: 12px;

			.name {
				color: white;
				gap: 8px;
				white-space: nowrap;
			}
		}

		.amount {
			flex: 0 0 100px;
			margin-right: 1rem;
			color: gray;
			justify-content: flex-end;
			font-weight: 400;
		}

		.per-piece {
			flex: 0 0 65px;
			color: white;
			font-weight: 400;
		}

		.price {
			flex: 0 0 120px;
			font-weight: 800;
			color: white;
			margin-right: 2rem;
			justify-content: flex-end;
		}
	}

	.small {
		font-size: 20px;
	}

	.super-small {
		font-size: 18px;
	}

	.sell-btn {
		border-radius: 0 15px 0 15px;
		color: #dfa935;
		background-color: #1b1d22;
		justify-content: center;
		text-transform: uppercase;
		flex: 0.5;
		cursor: pointer;
		pointer-events: all;

		&:hover {
			color: #1b202c;
			background-color: #dfa935;
		}
	}

	.sell-all {
		font-weight: 500;
		border-radius: 0 25px 0 25px;
		flex-shrink: 0;
		flex: none;
		background-color: rgba(32, 34, 39, 0.95);
		padding: 0.75rem 2rem;
		margin: 1rem 3rem;
	}
}