@use '@talend/design-tokens/lib/tokens' as tokens;

.rich-radio-button {
	background-color: tokens.$coral-color-accent-background-weak;
	border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
	border-radius: tokens.$coral-radius-m;
	padding: tokens.$coral-spacing-m;
	transition: background-color tokens.$coral-transition-normal, box-shadow tokens.$coral-transition-normal, border-color tokens.$coral-transition-normal;
	width: 100%;

	h4 {
		color: tokens.$coral-color-accent-text;
		font: tokens.$coral-heading-s;
	}

	p {
		color: tokens.$coral-color-neutral-text-weak;
		font: tokens.$coral-paragraph-s;
	}

	&__icon {
		color: tokens.$coral-color-accent-icon;
		min-height: tokens.$coral-sizing-xs;
		min-width: tokens.$coral-sizing-xs;
		transition: color tokens.$coral-transition-normal;
	}

	&__illustration,
	&__logo {
		height: tokens.$coral-sizing-l;
		width: tokens.$coral-sizing-l;
	}

	&__wrapper {
		display: flex;
		flex: 1;
		height: 100%;
		margin: 0;
		max-width: 400px;
		min-height: 77px;
		min-width: 220px;
		position: relative;
		width: 100%;

		input {
			margin: 0;
		}
	}

	&__input {
		cursor: pointer;
		height: 100%;
		left: 0;
		margin: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		width: 100%;

		&:disabled {
			cursor: not-allowed;

			+ .rich-radio-button {
				.rich-radio-button__icon {
					color: tokens.$coral-color-neutral-icon-weak;
				}

				h4 {
					color: tokens.$coral-color-neutral-text-disabled;
				}
			}
		}

		&[readonly] {
			cursor: default;

			+ .rich-radio-button {
				.rich-radio-button__icon {
					color: tokens.$coral-color-neutral-icon-weak;
				}

				h4 {
					color: tokens.$coral-color-neutral-text;
				}
			}
		}

		&:not(:disabled, [readonly]) {
			&:is(:hover, :active) {
				+ .rich-radio-button {
					box-shadow: tokens.$coral-elevation-shadow-neutral-m;
				}
			}

			&:hover {
				+ .rich-radio-button {
					.rich-radio-button__icon {
						color: tokens.$coral-color-accent-icon-hover;
					}

					h4 {
						color: tokens.$coral-color-accent-text-hover;
					}
				}
			}

			&:active {
				+ .rich-radio-button {
					.rich-radio-button__icon {
						color: tokens.$coral-color-accent-icon-active;
					}

					h4 {
						color: tokens.$coral-color-accent-text-active;
					}
				}
			}

			&:focus {
				+ .rich-radio-button {
					outline: tokens.$coral-border-m-solid tokens.$coral-color-assistive-border-focus;

					.rich-radio-button__icon {
						color: tokens.$coral-color-accent-icon;
					}
				}
			}
		}

		&:not(:checked) {
			&:not(:disabled, [readonly]) {
				&:hover {
					+ .rich-radio-button {
						border-color: tokens.$coral-color-neutral-border-weak-hover;
					}
				}

				&:active {
					+ .rich-radio-button {
						border-color: tokens.$coral-color-neutral-border;
					}
				}
			}

			&[readonly] {
				+ .rich-radio-button {
					border-color: transparent;
				}
			}

			&:disabled {
				+ .rich-radio-button {
					background-color: tokens.$coral-color-neutral-background-medium;
				}
			}
		}

		&:checked {
			&:not(:disabled, [readonly]) {
				+ .rich-radio-button {
					background-color: tokens.$coral-color-accent-background-selected;
					border: tokens.$coral-border-m-solid tokens.$coral-color-accent-border;
				}

				&:hover {
					+ .rich-radio-button {
						border-color: tokens.$coral-color-accent-border-hover;
					}
				}

				&:active {
					+ .rich-radio-button {
						border-color: tokens.$coral-color-accent-border-active;
					}
				}

				&:focus {
					+ .rich-radio-button {
						outline-offset: -2px;
					}
				}
			}

			&[readonly] {
				+ .rich-radio-button {
					background-color: tokens.$coral-color-neutral-background;
					border: tokens.$coral-border-m-solid tokens.$coral-color-neutral-border;
				}
			}

			&:disabled {
				+ .rich-radio-button {
					background-color: tokens.$coral-color-neutral-background-disabled;
					border: tokens.$coral-border-m-solid tokens.$coral-color-neutral-border-disabled;
				}
			}
		}
	}
}