/* -----------------------------------------------------------------------------
   Bond Activity Poll Cards
   ----------------------------------------------------------------------------- */

.bond-bp-content {
	& #buddypress {
		& .activity-list.bp-list {
			& > li.bond-activity-entry--poll.activity-item:not(.activity-popup) {
				& .bond-activity-card__title h2 {
					margin: 0;
					color: var(--color-text-main);
					font-size: 20px;
					line-height: 28.5px;
				}

				& .bond-activity-card__content {
					padding-bottom: 24px;
				}

				& .bond-activity-card__content-inner {
					display: flex;
					flex-direction: column;
					gap: 20px;

					& > :not(.bb-poll-view),
					& > :not(.bb-poll-view) p,
					& > :not(.bb-poll-view) li {
						color: var(--color-text-main);
						font-size: 17px;
						font-weight: 400;
						line-height: 25.5px;
					}

					& > :not(.bb-poll-view) {
						margin: 0;
					}

					& > .bb-poll-view {
						margin: 0;
					}
				}

				& .bb-poll-view,
				& .bb-activity-poll_block,
				& .bb-activity-poll_content {
					width: 100%;
				}

				& .bb-activity-poll-options {
					display: flex;
					flex-direction: column;
					gap: 12px;
				}

				& .bb-activity-poll-option {
					position: relative;
					display: flex;
					align-items: center;
					margin-bottom: 0;
					padding: 0;
					border: 1px solid var(--color-border);
					border-radius: 6px;
					background: var(--color-background-body);
					overflow: hidden;
					isolation: isolate;
					transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;

					&[data-bond-poll-selected="true"] {
						border-color: var(--color-bond-red-darker);
					}

					&[data-bond-poll-interactive="true"] {
						cursor: pointer;

						&:hover,
						&:focus-within {
							border-color: var(--color-bond-red-darker);
							background: #b6002d1a;
							box-shadow: none;
						}
					}

					&[data-bond-poll-interactive="false"] {
						cursor: default;
					}
				}

				& .bb-poll-option-fill {
					position: absolute;
					inset: 0 auto 0 0;
					z-index: 0;
					background: #b6002d1a;
					pointer-events: none;
				}

				& .bb-option-field-wrap {
					position: relative;
					z-index: 1;
					display: flex;
					flex: 1 1 auto;
					min-width: 0;
				}

				& .bb-option-input-wrap {
					position: absolute;
					width: 1px;
					height: 1px;
					margin: 0;
					padding: 0;
					opacity: 0;
					pointer-events: none;
				}

				& .bond-activity-poll__option-label {
					display: flex;
					flex: 1 1 auto;
					align-items: flex-start;
					gap: 12px;
					min-width: 0;
					margin: 0;
					padding: 12px 14px;
					color: var(--color-text-main);
					font-size: 14px;
					font-weight: 400;
					line-height: 21px;
					text-decoration: none;
					cursor: inherit;
				}

				& .bond-activity-poll__option-control {
					position: relative;
					flex: 0 0 16px;
					width: 16px;
					height: 16px;
					margin-top: 2px;
					border: 1px solid var(--color-border);
					border-radius: 999px;
					background: var(--color-background-body);
					box-sizing: border-box;

					&::after {
						content: "";
						position: absolute;
						inset: 3px;
						border-radius: 999px;
						background: var(--wp--preset--color--bond-red-two, var(--color-bond-red-darker));
						transform: scale(0);
						transition: transform 0.2s ease;
					}
				}

				& .bb-option-input-wrap:checked + .bond-activity-poll__option-label .bond-activity-poll__option-control,
				& .bb-activity-poll-option[data-bond-poll-selected="true"] .bond-activity-poll__option-control {
					border-color: var(--color-bond-red-darker);
				}

				& .bb-option-input-wrap:checked + .bond-activity-poll__option-label .bond-activity-poll__option-control::after,
				& .bb-activity-poll-option[data-bond-poll-selected="true"] .bond-activity-poll__option-control::after {
					transform: scale(1);
				}

				& .bb-poll-view[data-bond-poll-closed="true"] .bond-activity-poll__option-control {
					display: none;
				}

				& .bond-activity-poll__option-copy {
					display: flex;
					flex: 1 1 auto;
					flex-direction: column;
					min-width: 0;
				}

				& .bond-activity-poll__option-text {
					display: block;
					word-break: break-word;
				}

				& .bb-activity-poll_block .bb-activity-poll-option label > span,
				& .bb-activity-poll-option label > span {
					line-height: normal;
				}

				& .bb-activity-poll-option-note {
					display: block;
					margin-top: 4px;
					color: var(--color-link);
					font-size: 12px;
					line-height: 18px;

					& a {
						color: inherit;
						text-decoration: underline;
						text-underline-offset: 2px;
					}
				}

				& .bond-activity-poll__option-meta {
					position: relative;
					z-index: 1;
					flex: 0 0 auto;
					padding-right: 4px;
					color: var(--color-text-main);
					font-size: 14px;
					line-height: 21px;
					white-space: nowrap;
				}

				& .bb-poll-option-state {
					display: inline-flex;
					align-items: center;
					min-height: 21px;
				}

				& .bond-activity-poll__state-link {
					position: relative;
					z-index: 1;
					display: inline-flex;
					flex: 0 0 28px;
					align-items: center;
					justify-content: center;
					margin: 0 10px;
					color: var(--color-text-main);
					text-decoration: none;
					background: transparent;
					transition: background-color 0.2s ease, color 0.2s ease;

					&.bb-poll-option-view-state {
						color: var(--color-bond-red-darker);
					}

					& i {
						color: inherit;
						transition: color 0.2s ease;
					}

					&:hover,
					&:focus {
						background: var(--color-bond-red-darker);
						color: #fff;
					}

					&.is-disabled,
					&.bb-poll-no-vote {
						visibility: hidden;
						pointer-events: none;
					}
				}

				& .bb-poll-option_remove {
					position: relative;
					z-index: 2;
					display: inline-flex;
					flex: 0 0 28px;
					align-items: center;
					justify-content: center;
					align-self: stretch;
					color: var(--color-text-main);
					text-decoration: none;

					&:hover,
					&:focus {
						color: var(--color-bond-red-darker);
					}
				}

				& .bb-activity-poll-new-option {
					display: flex;
					align-items: center;
					gap: 12px;
					min-height: 0;
					padding: 12px 14px;
					border-style: solid;
					background: var(--color-background-body);
					cursor: text;
					border-color: var(--color-border);

					&:hover,
					&:focus-within {
						border-color: var(--color-border);
						background: var(--color-background-body);
					}

					& .bb-activity-poll-new-option-input {
						flex: 1 1 auto;
						min-width: 0;
						padding: 0;
						border: 0;
						background: transparent;
						box-shadow: none;
						color: var(--color-text-main);
						font-size: 14px;
						line-height: 21px;
						font-weight: 400;

						&::placeholder {
							color: var(--color-text-main);
							opacity: 0.7;
						}
					}

					& .bb-activity-option-submit {
						display: inline-flex;
						flex: 0 0 28px;
						align-items: center;
						justify-content: center;
						align-self: stretch;
						padding: 0;
						border: 0;
						border-radius: 4px;
						background: transparent;
						box-shadow: none;
						color: var(--color-bond-red-darker);
						text-decoration: none;
						transition: background-color 0.2s ease, color 0.2s ease;

						& .bb-icon-plus {
							color: inherit;
						}

						&:hover,
						&:focus {
							background: var(--color-bond-red-darker);
							color: #fff;
						}
					}
				}

				& .bb-activity-poll-new-option.is-visible {
					display: flex;
				}

				& .bb-activity-poll-new-option.is-invalid {
					box-shadow: none !important;
					border-color: var(--color-bond-red-darker) !important;
				}

				& .bb-poll-view[data-bond-poll-closed="true"] .bb-activity-poll-new-option,
				& #bb-poll-view[data-bond-poll-closed="true"] .bb-activity-poll-new-option {
					display: none;
				}

				& .bb-poll-error,
				& .bb-activity-poll-see-more-link,
				& .bb-activity-poll-footer {
					color: var(--color-text-main);
					font-size: 14px;
					line-height: 21px;
				}

				& .bb-poll-error {
					color: var(--color-bond-red-darker);
					margin-top: -4px;
				}

				& .bb-activity-poll-see-more {
					margin-top: -2px;
				}

				& .bb-activity-poll-see-more-link {
					color: var(--color-link);
					text-decoration: underline;
					text-underline-offset: 2px;
				}

				& .bb-activity-poll-footer {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					gap: 8px;
					padding-top: 4px;
				}

				& .bb-activity-poll_duration {
					display: inline-flex;
					align-items: center;
					gap: 8px;
				}

				& .bb-activity-poll-options-wrap {
					display: flex;
					justify-content: flex-end;
					margin-bottom: 8px;
				}
			}
		}
	}
}

.activity-form {
	& .bb-activity-poll_block .bond-activity-poll__option-control {
		display: none;
	}

	& .bb-activity-poll_block .bs-styled-radio.bb-option-input-wrap,
	& .bb-activity-poll_block .bs-styled-checkbox.bb-option-input-wrap {
		display: none;
	}

	& .bb-activity-poll_block .bs-styled-radio.bb-option-input-wrap + .bond-activity-poll__option-label::before,
	& .bb-activity-poll_block .bs-styled-radio.bb-option-input-wrap + .bond-activity-poll__option-label::after,
	& .bb-activity-poll_block .bs-styled-checkbox.bb-option-input-wrap + .bond-activity-poll__option-label::before,
	& .bb-activity-poll_block .bs-styled-checkbox.bb-option-input-wrap + .bond-activity-poll__option-label::after {
		display: none;
		content: none;
	}
}

.bb-poll-form {
	& .modal-mask {
		background: rgba(55, 50, 46, 0.32);
	}

	& .modal-wrapper {
		max-width: 760px;
		padding: 24px;
	}

	& .modal-container {
		border: 1px solid var(--color-border);
		border-radius: 6px;
		background: var(--color-background-body);
		box-shadow: none;
		overflow: hidden;
	}

	& .bb-model-header,
	& .bb-model-footer {
		padding: 20px 28px;
		border-color: var(--color-border);
		background: var(--color-background-body);
	}

	& .bb-model-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	& .bb-model-header h4 {
		margin: 0;
		color: var(--color-text-main);
		font-size: 19px;
		font-weight: 400;
		line-height: 28.5px;
	}

	& .bb-model-close-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border-radius: 4px;
		color: var(--color-text-main);
		text-decoration: none;

		&:hover,
		&:focus {
			background: #f4f4f2;
			color: var(--color-bond-red-darker);
		}
	}

	& .bb-model-close-button span {
		font-size: 24px;
		line-height: 1;
	}

	& .bb-action-popup-content {
		padding: 24px 28px 28px;
		max-height: calc(100vh - 220px);
		overflow: auto;
	}

	& #message-feedabck {
		position: static;
		width: auto;
		margin: 0 0 20px;
	}

	& .bond-poll-form__label,
	& .bond-poll-form__sub-label {
		display: block;
		margin: 0 0 10px;
		color: var(--color-text-main);
		font-size: 17px;
		font-weight: 400;
		line-height: 25.5px;
	}

	& .bond-poll-form__sub-label {
		margin-bottom: 8px;
		font-size: 14px;
		line-height: 21px;
	}

	& .bond-poll-form__field,
	& .bond-poll-form__option-action,
	& .bond-poll-form__setting {
		margin: 0;
	}

	& .bond-poll-form__options {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	& .bb-poll-question_options {
		width: calc(100% + 20px);
		margin-left: 0;
	}

	& .bond-poll-form__option-action {
		margin-top: 12px;
	}

	& .bb-poll-question-field,
	& .bb-poll-question_option,
	& .bb-poll_duration {
		width: 100%;
		min-height: 52px;
		padding: 13px 16px;
		border: 1px solid var(--color-border);
		border-radius: 6px;
		background: var(--color-background-body);
		box-shadow: none;
		color: var(--color-text-main);
		font-size: 17px;
		font-weight: 400;
		line-height: 25.5px;
	}

	& .bb-poll-question-field::placeholder,
	& .bb-poll-question_option::placeholder {
		color: #797667;
		opacity: 1;
	}

	& .bb-poll-question-field:focus,
	& .bb-poll-question_option:focus,
	& .bb-poll_duration:focus {
		border-color: var(--color-bond-red-darker);
		outline: 0;
		box-shadow: none;
	}

	& .bb-poll_option_draggable {
		position: relative;
		margin: 0;
		padding: 0;
	}

	& .bb-poll_option_draggable::before {
		cursor: move;
		content: "\e9fd";
		font-family: bb-icons;
		font-weight: 400;
		font-size: 16px;
		color: #333;
		position: absolute;
		top: 50%;
		left: -22px;
		transform: translateY(-50%);
		opacity: 0;
		visibility: hidden;
	}

	& .bb-poll-edit-option_remove {
		position: absolute;
		top: 50%;
		right: 16px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		transform: translateY(-50%);
		color: var(--color-text-main);
		text-decoration: none;
		opacity: 0.4;
	}

	& .bb-poll-edit-option_remove:hover,
	& .bb-poll-edit-option_remove:focus {
		opacity: 1;
		color: var(--color-bond-red-darker);
	}

	& .bb-poll-question_option {
		padding-right: 48px;
	}

	& .bb-poll-option_add {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		height: 36px;
		padding: 0 14px;
		border: 1px solid var(--color-border);
		border-radius: 4px;
		background: var(--color-background-body);
		box-shadow: none;
		color: var(--color-text-main);
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;
	}

	& .bb-poll-option_add:hover,
	& .bb-poll-option_add:focus {
		border-color: var(--color-bond-red-darker);
		background: #f4f4f2;
		color: var(--color-bond-red-darker);
	}

	& .bb-poll-option_add .bb-icon-plus {
		font-size: 18px;
		line-height: 1;
	}

	& .bond-poll-form__settings {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin-top: 4px;
	}

	& .bond-poll-form__setting {
		width: 100%;
		min-width: 0;
	}

	& .bond-poll-form__checkbox {
		display: grid;
		grid-template-columns: 18px minmax(0, 1fr);
		align-items: start;
		column-gap: 12px;
		width: 100%;
		min-width: 0;
	}

	& .bond-poll-form__checkbox .bs-styled-checkbox {
		position: static;
		opacity: 1;
		appearance: auto;
		-webkit-appearance: checkbox;
		width: 18px;
		height: 18px;
		margin: 2px 0 0;
		accent-color: var(--color-bond-red-darker);
	}

	& .bond-poll-form__checkbox .bs-styled-checkbox::before,
	& .bond-poll-form__checkbox .bs-styled-checkbox::after {
		display: none;
	}

	& .bond-poll-form__checkbox .bs-styled-checkbox + label {
		display: block;
		width: auto;
		max-width: none;
		padding: 0;
		line-height: 21px;
		cursor: pointer;
	}

	& .bond-poll-form__checkbox .bs-styled-checkbox + label::before,
	& .bond-poll-form__checkbox .bs-styled-checkbox + label::after {
		display: none;
		content: none;
	}

	& .bond-poll-form__checkbox label {
		margin: 0;
		color: var(--color-text-main);
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;
		min-width: 0;
	}

	& .bond-poll-form__setting--duration {
		padding-top: 2px;
	}

	& .bb-poll_duration {
		appearance: none;
		-webkit-appearance: none;
		background-image: linear-gradient(45deg, transparent 50%, var(--color-text-main) 50%), linear-gradient(135deg, var(--color-text-main) 50%, transparent 50%);
		background-position: calc(100% - 24px) calc(50% - 3px), calc(100% - 17px) calc(50% - 3px);
		background-size: 7px 7px, 7px 7px;
		background-repeat: no-repeat;
		padding-right: 42px;
	}

	& .bb-model-footer {
		display: flex;
		justify-content: flex-end;
		gap: 12px;
	}

	& .bb-activity-poll-cancel,
	& .bb-activity-poll-submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 96px;
		height: 36px;
		padding: 0 16px;
		border-radius: 4px;
		box-shadow: none;
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;
		text-decoration: none;
	}

	& .bb-activity-poll-cancel {
		border: 1px solid var(--color-border);
		background: var(--color-background-body);
		color: var(--color-text-main);
	}

	& .bb-activity-poll-cancel:hover,
	& .bb-activity-poll-cancel:focus {
		border-color: var(--color-bond-red-darker);
		color: var(--color-bond-red-darker);
	}

	& .bb-activity-poll-submit {
		border: 1px solid var(--color-bond-red-darker);
		background: var(--color-bond-red-darker);
		color: #fff;
	}

	& .bb-activity-poll-submit:hover,
	& .bb-activity-poll-submit:focus {
		border-color: var(--color-bond-red-darkest);
		background: var(--color-bond-red-darkest);
		color: #fff;
	}

	& .bb-activity-poll-submit[disabled] {
		opacity: 0.55;
		pointer-events: none;
	}
}

@media (max-width: 640px) {
	.bond-bp-content #buddypress .activity-list.bp-list > li.bond-activity-entry--poll.activity-item:not(.activity-popup) {
		& .bond-activity-card__title h2 {
			font-size: 17px;
			line-height: 25.5px;
		}

		& .bond-activity-card__content-inner > :not(.bb-poll-view),
		& .bond-activity-card__content-inner > :not(.bb-poll-view) p,
		& .bond-activity-card__content-inner > :not(.bb-poll-view) li {
			font-size: 15px;
			line-height: 22.5px;
		}

		& .bond-activity-poll__option-label {
			padding: 11px 12px;
		}
	}

	.bb-poll-form {
		& .modal-wrapper {
			padding: 12px;
		}

		& .bb-model-header,
		& .bb-model-footer,
		& .bb-action-popup-content {
			padding-left: 18px;
			padding-right: 18px;
		}

		& .bb-model-footer {
			flex-wrap: wrap;
		}
	}
}