.delta {
	align-items: center;
	display: flex;
	flex-direction: row;
	margin: 0 auto;

	&.is-favorable {
		.delta__icon {
			&.gridicon {
				fill: var(--color-success);
			}
		}
		.delta__labels {
			.delta__value,
			.delta__suffix {
				color: var(--color-success);
			}
		}
	}

	&.is-unfavorable {
		.delta__icon {
			&.gridicon {
				fill: var(--color-error);
			}
		}
		.delta__labels {
			.delta__value,
			.delta__suffix {
				color: var(--color-error);
			}
		}
	}

	&.is-neutral {
		.delta__icon {
			&.gridicon {
				fill: var(--color-neutral-light);
			}
		}
		.delta__labels {
			.delta__value {
				color: var(--color-neutral-light);
			}
		}
	}

	.delta__icon {
		width: 20px;
		height: 20px;
		border-radius: 2px;
		min-width: 15px;

		&.gridicon {
			fill: var(--studio-white);
			padding: 3px 1px;
			margin: 0;
		}
	}

	.delta__labels {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;

		.delta__suffix,
		.delta__value {
			color: var(--color-neutral-light);
			display: inline-block;
			font-size: $font-body-small;
			font-weight: 400;
			line-height: 13px;
			text-align: left;
		}
		.delta__value {
			margin-right: 6px;
		}
	}
}
