.prpl-suggested-task {
	margin: 0;
	padding: 0.75rem 0.5rem 0.625rem 0.5rem;
	display: grid;
	grid-template-columns: 1.5rem 1fr 3.5rem;
	gap: 0.25rem 0.5rem;
	position: relative;
	line-height: 1;

	&:nth-child(odd) {
		background-color: var(--prpl-background-table);
	}

	.prpl-suggested-task-title-wrapper {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		justify-content: space-between;

		.prpl-task-title {
			width: 100%;
			color: var(--prpl-color-text);
		}
	}

	.prpl-suggested-task-actions-wrapper {
		grid-column: 2 / span 1;
		display: flex;
	}

	.prpl-suggested-task-checkbox {
		flex-shrink: 0; /* Prevent shrinking on mobile */
	}

	/* If task has disabled checkbox it's title should be italic. */
	&:has(.prpl-suggested-task-disabled-checkbox-tooltip) {

		h3 {
			font-style: italic;
		}
	}

	h3 {
		font-size: 1rem;
		margin: 0;
		font-weight: 500;

		span {
			text-decoration: none;
			background-image: linear-gradient(#000, #000);
			background-repeat: no-repeat;
			background-position: center left;
			background-size: 0% 1px;
			transition: background-size 500ms ease-in-out;

			/* Give the span a width so the user can edit the task title */
			&:empty {
				display: inline-block;
				width: 100%;
			}
		}
	}

	input[type="checkbox"][disabled] {
		opacity: 0.5;
		border-color: #0773bf;
		background-color: #effbfe;
	}

	&.prpl-suggested-task-celebrated h3 span {
		background-size: 100% 1px;
		color: inherit;

		/* Accessibility */
		text-decoration: line-through;
		text-decoration-color: transparent;
	}

	.prpl-suggested-task-points-wrapper {
		display: flex;
		gap: 0.5rem;
		align-items: center;
		justify-content: flex-end;
		grid-row-end: span 2;
	}

	.prpl-suggested-task-points {
		font-size: var(--prpl-font-size-xs);
		font-weight: 700;
		color: var(--prpl-text-point);
		background-color: var(--prpl-background-point);
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tooltip-actions {
		visibility: hidden;
		padding-top: 2px;
		gap: 0.4rem;
		align-items: baseline;

		/* Style for "hover" links. */
		.tooltip-action {
			display: inline-flex;
			position: relative;
			text-decoration: none;

			&:not(:last-child) {
				padding-right: 0.4rem; /* same as gap */

				&::after {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 0;

					content: "";
					display: inline-block;
					width: 1px;
					background: var(--prpl-color-text);
					height: 0.75rem;
				}
			}

			.prpl-tooltip-action-text {
				line-height: 1;
				font-size: var(--prpl-font-size-small);
				color: var(--prpl-color-link);
			}

			button,
			a {
				text-decoration: none;
				padding: 0;
				line-height: 1;

				&:hover,
				&:focus,
				&:active {
					text-decoration: underline;
				}
			}

			/* Close and toggle radio group buttons should not have a text decoration. */
			.prpl-tooltip-close,
			.prpl-toggle-radio-group {

				&:hover,
				&:focus,
				&:active {
					text-decoration: none;
				}
			}

		}
	}

	&:hover,
	&:focus-within {

		.tooltip-actions {
			visibility: visible;
		}
	}

	.tooltip-actions:has([data-tooltip-visible]) {
		visibility: visible;
	}

	.prpl-suggested-task-description {
		font-size: 0.825rem;
		color: var(--prpl-color-text);
		margin: 0;
	}

	button {
		padding: 0.1rem;
		line-height: 0;
		margin: 0;
		background: none;
		border: none;
		cursor: pointer;
	}

	.icon {
		width: 1rem;
		height: 1rem;
		display: inline-block;
	}

	.trash,
	.move-up,
	.move-down {
		padding: 0;
		border: 0;
		background: none;
		color: var(--prpl-color-ui-icon);
		cursor: pointer;
		box-shadow: none;
		margin-top: 1px;
	}

	.prpl-move-buttons,
	.prpl-suggested-task-checkbox-wrapper,
	.prpl-suggested-task-checkbox-wrapper label {
		display: flex;
		width: 100%;
		gap: 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.prpl-move-buttons-wrapper {
		position: absolute;
		left: calc(-8px - 0.5rem); /* -7px is the half width of the arrow, -0.5rem is the padding of the widget */
		top: 50%;
		transform: translateY(-50%);
		padding: 10px 10px 10px 0; /* Padding is needed for arrows to be accessible on hover */
	}

	.move-up,
	.move-down {
		height: 0.75rem;

		.dashicons {
			font-size: 0.875rem;
			width: 1em;
			height: 1em;
		}

		&:hover {
			color: var(--prpl-color-ui-icon-hover);
		}
	}

	.prpl-suggested-task-snooze {

		&.prpl-toggle-radio-group-open {

			.prpl-snooze-duration-radio-group {
				display: block;
			}

			.prpl-toggle-radio-group-arrow {
				transform: rotate(270deg);
			}
		}

		legend {
			display: block;
			width: 100%;

			.prpl-toggle-radio-group {
				display: flex;
				justify-content: space-between;
				width: 100%;
				margin-top: 0.5rem;
				padding: 0.5rem;
				background-color: #fff;
				border-radius: var(--prpl-border-radius);
				line-height: 1;
				text-align: start;

				.prpl-toggle-radio-group-arrow {
					transform: rotate(90deg);
				}
			}
		}

		label {
			display: block;
			background-color: #fff;
			padding: 0.5rem;

			&:hover {
				background-color: var(--prpl-color-gauge-remain);
			}

			input[type="radio"] {
				display: none;
			}
		}

		.prpl-snooze-duration-radio-group {
			display: none;
			margin-top: 0.75rem;

			label {
				border-top: 1px solid #dcdcde;

				&:first-child {
					border-top-left-radius: var(--prpl-border-radius);
					border-top-right-radius: var(--prpl-border-radius);
					border-top: none;
				}

				&:last-child {
					border-bottom-left-radius: var(--prpl-border-radius);
					border-bottom-right-radius: var(--prpl-border-radius);
				}
			}

		}
	}

	&[data-task-action="celebrate"] {

		.tooltip-actions {
			pointer-events: none; /* Prevent clicking on actions while celebrating */
		}
	}

	.prpl-suggested-task-info {
		margin-left: -30px;

		p {
			margin-bottom: 0;
		}

		p:first-child {
			margin-top: 0;
		}
	}

	/* Disabled checkbox styles. */
	.prpl-suggested-task-disabled-checkbox-tooltip,
	.tooltip-actions {

		& > button {
			padding: 0;
		}

		.prpl-tooltip {
			transform: translate(-20%, calc(100% + 10px));

			&::after {
				left: 25px;
				right: auto;
				transform: translate(-5px, -10px) rotate(90deg);
			}
		}
	}
}