@import "../../../assets/scss/variables";

.rolebox {

	border-radius: 5px;
	margin-bottom: 1.2rem;
	background-color: $rolebox-background;

	&-head {
		cursor: pointer;
		min-height: 66px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding: 0 25px;

		&--inner-container {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 1rem;

			.rolebox-dot {
				width: 1rem;
				height: 1rem;
				border-radius: 50%;
				background-color:$success-color ;
				margin: 0;
			}

			p {
				font-size: 1.6rem;
				color: $title-color;
				font-weight: $bold;
				margin: 0;
			}
		}
	}

	&-body {
		overflow: hidden;
		transition: all 0.5s;
		height: 100%;
		padding: 0 2.4rem;
	}

	&.open {

		& .rolebox-body {
			padding-bottom: 25px;
			max-height: 300px;
			overflow: auto;
		}
	}

	&.closed {
		& .rolebox-head {
		}
		& .rolebox-body {
			max-height: 0;
		}
	}

	img, svg{
		filter: $svg-default;
	}
}