.outcome-trade {
	@media @breakpoint-mobile {
		background-color: @color-gray-extra-light;
		padding: 1em 0;
	}

	h3 {
		@media @breakpoint-mobile {
			display: none;
		}
	}

	.outcome-trade-input-error-message {
		color: @color-red-light;
		padding: 0 0 0.5em;
	}

	& > span {
		margin-left: 1em;
	}

	.outcome-trade-inputs {
		display: flex;
		flex-direction: column;

		.outcome-trade-inputs-sides {
			display: flex;
			flex-direction: row;

			& > * {
				flex: 1;

				.link {
					flex: 1;

					&.selected {

						.border(true, @border-bottom, @color-purple, @border-width-3);
					}

					&:hover:not(.selected) {

						.border(true, @border-bottom, @color-purple, @border-width-2);
					}

					li {
						display: flex;
						justify-content: center;
						margin: 0;

						&.selected {

							.border(false);
						}

						&:hover:not(.selected) {

							.border(false);
						}
					}
				}
			}
		}

		.outcome-trade-inputs-fields {
			align-items: center;
			display: flex;
			flex-direction: row;
			padding: 1em;

			.input {
				flex: 3;
			}

			span {
				display: flex;
				flex: 1;
				justify-content: center;
			}
		}
	}

	.outcome-trade-actions {
		display: flex;
		justify-content: center;
		margin: 1em 0;
	}
}