@import '@resources/index.css';

.supt-modal-modules-helper {
	@mixin clamp padding-top, 16, 24, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-right, 24, 32, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-bottom, 20, 24, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-left, 24, 32, $xxs-breakpoint, $lg-breakpoint;

	background-color: $color-pink-light;
	border-radius: 24px;

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;

		position: relative;

		&__button {
			flex-shrink: 0;
			&::after {
				content: '';

				width: 100%;
				height: 100%;

				position: absolute;
				top: 0;
				left: 0;
			}

			&__icon {
				transition: transform $transition-fast ease-in-out;

				&--open {
					transform: scale(-1);
				}
			}
		}

		&__group {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 8px;
			max-width: 512px;

			@media screen and (min-width: $sm-breakpoint) {
				flex-direction: row;
				gap: 16px;
			}
		}

		&__illustration {
			color: $color-pink;
			width: 34px;
			height: 34px;

			@media screen and (min-width: $sm-breakpoint) {
				width: 44px;
				height: 44px;
			}
		}
		&__text {
			@extend %t-s-medium;
		}
	}

	&__content {
		@mixin clamp padding-top, 16, 24, $xxs-breakpoint, $lg-breakpoint;
		@mixin clamp margin-top, 16, 24, $xxs-breakpoint, $lg-breakpoint;
		@mixin clamp gap, 16, 24, $xxs-breakpoint, $lg-breakpoint;

		border-top: 1px solid rgba(255 143 230 / 40%);
		display: flex;
		flex-direction: column;

		&__description {
			@extend %t-s-normal;
			color: $color-interface-grey-100;
		}

		&__radio-group {
			display: flex;
			flex-direction: column;
			gap: 16px;
		}
	}
}