.flex {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	width: 100%;
	@include gap-size();
	gap: $panel-gap-y $panel-gap-x;
	&.nowrap {
		overflow: hidden;
		> :not(.nowrap) {
			flex-wrap: nowrap;
			flex-shrink: 0;
			display: inline-block;
			overflow: hidden;
			&:last-child {
				flex-shrink: 1;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	.noshrink,
	.singleline {
		flex-shrink: 0;
	}
	&.wrap {
		flex-wrap: wrap;
	}
	&.vertical {
		flex-direction: column;
		gap: $panel-gap-x $panel-gap-y;
		> div {
			width: 100%;
		}
	}

	@media screen and (max-width: $screen-xs-max) {
		&.vertical-xs {
			flex-direction: column;
			align-items: center;
		}
	}
	@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
		&.vertical-sm {
			flex-direction: column;
			align-items: center;
		}
	}
	@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
		&.vertical-md {
			flex-direction: column;
			align-items: center;
		}
	}
	@media screen and (min-width: $screen-lg-min) {
		&.vertical-lg {
			flex-direction: column;
			align-items: center;
		}
	}
	&.left {
		justify-content: flex-start;
	}
	&.right {
		justify-content: flex-end;
	}
	&.center {
		justify-content: center;
	}
	&.space-around {
		justify-content: space-around;
	}
	&.space-between {
		justify-content: space-between;
	}
	&.top {
		align-items: flex-start;
	}
	&.middle {
		align-items: center;
	}
	&.baseline {
		align-items: baseline;
	}
	&.bottom {
		align-items: flex-end;
	}
}