@component OpalSignButton {
	display: inline-block;
	line-height: 0;

	@el control {
		position: relative;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
		white-space: nowrap;
		font: inherit;
		cursor: pointer;
		user-select: none;

		&:focus {
			outline: none;

			body:not(._noFocusHighlight) &::after {
				position: absolute;
				top: -1px;
				right: 0;
				bottom: 1px;
				left: -3px;
				border: 1px solid hsl(208,94%,54%);
				border-radius: 3px;
				content: '';
				pointer-events: none;
			}
		}

		&:active {
			top: 1px;
		}
	}
		@el sign {
			position: relative;
			top: -1px;
			display: inline-block;
			box-sizing: border-box;
			margin: 3px 3px 3px 0;
			width: 28px;
			height: 28px;
			border: 2px solid;
			border-radius: 50%;
			vertical-align: middle;
			transition: border-color .1s linear;

			&::before,
			&::after {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				width: 12px;
				height: 2px;
				transition: background .1s linear;
			}

			&::after {
				transform: rotate(90deg);
			}
		}

		@el contentSlot {
		}

	@mod sign=plus {
		@el control {
			&:hover,
			&:active {
				@el sign {
					border-color: hsl(208,100%,60%);

					&::before,
					&::after {
						background: hsl(208,100%,60%);
					}
				}
			}
		}
			@el sign {
				border-color: hsl(208,86%,46%);

				&::before,
				&::after {
					background: hsl(208,86%,46%);
					content: '';
				}
			}
	}

	@mod sign=minus {
		@el control {
			&:hover,
			&:active {
				@el sign {
					border-color: hsl(348,98%,64%);

					&::before {
						background: hsl(348,98%,64%);
					}
				}
			}
		}
			@el sign {
				border-color: hsl(348,84%,50%);

				&::before {
					background: hsl(348,84%,50%);
					content: '';
				}
			}
	}

	@mod viewType=primary {
		@el control {
			&:hover,
			&:active {
				@el sign {
					border-color: hsl(208,100%,60%);

					&::before {
						background: hsl(208,100%,60%);
					}
				}
			}
		}
			@el sign {
				border-color: hsl(208,86%,46%);

				&::before {
					background: hsl(208,86%,46%);
				}
			}
	}

	@mod viewType=danger {
		@el control {
			&:hover,
			&:active {
				@el sign {
					border-color: hsl(348,98%,64%);

					&::before,
					&::after {
						background: hsl(348,98%,64%);
					}
				}
			}
		}
			@el sign {
				border-color: hsl(348,84%,50%);

				&::before,
				&::after {
					background: hsl(348,84%,50%);
				}
			}
	}

	@mod checked {
		@el control {
			top: 1px;
		}
	}

	@mod disabled {
		opacity: .5;
		pointer-events: none;

		@el control {
			cursor: default;
		}
	}
}