.themePicker {
	&__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
	}

	&__item {
		margin: 0;
	}

	input[type='radio'] {
		@include visually-hidden;
	}

	&__option {
		// either button, or label for radio (like view-mode-switcher)

		border: 1px solid rgba(white, 0.5);
		width: 2rem;
		height: 2rem;
		background: var(--accent, $yellow);
		box-sizing: border-box;
		cursor: pointer;

		&:where([data-theme="blue"]) {
			--accent: #{$blue};
		}

		&:where([data-theme="navy"]) {
			--accent: #{$navy};
		}

		&:where([data-theme="yellow"]) {
			--accent: #{$yellow};
		}

		&:where([data-theme="pink"]) {
			--accent: #{$pink};
		}

		&:where([data-theme="grey"]) {
			--accent: #{$grey};
		}

		&:hover,
		&:focus {
			border-width: 2px;
			border-color: rgba(white, 0.8);
		}

		&[checked],
		&[disabled] {
			border: 2px solid rgba(white, 0.8);
			cursor: not-allowed;
		}
	}
}