widenarrow-ui 0.1.2

package/src/styles/mixins.scss

@@ -0,0 +1,1300 @@
+@import 'variables';
+@import 'colors';
+
+/**
+* Media Queries
+*/
+@mixin breakpoint($min, $max: null) {
+	@if $max {
+		@media (min-width: $min) and (max-width: $max) {
+			@content;
+		}
+	} @else {
+		@media (min-width: $min) {
+			@content;
+		}
+	}
+}
+
+@mixin coarse() {
+	@media (hover: none) and (pointer: coarse) {
+		@content;
+	}
+}
+
+@mixin mobile-only() {
+	@include breakpoint(1px, $md - 1px) {
+		@content;
+	}
+}
+
+@mixin internet-explorer-11() {
+	@media screen and (-ms-high-contrast: none) {
+		@content;
+	}
+}
+
+@mixin edge() {
+	@supports (-ms-ime-align: auto) {
+		@content;
+	}
+}
+
+@mixin focus-visible($width: 2px, $color: $blue) {
+	box-shadow: 0 0 0 $width $color;
+}
+
+@mixin focus-visible-inset() {
+	box-shadow: inset 0 0 0 2px $blue;
+}
+
+@mixin heading-1($color: $text-grey, $font-weight: 300) {
+	font-size: $font-size-xxxxxl; // 44px
+	font-weight: $font-weight;
+	color: $color;
+}
+
+@mixin heading-2($color: $text-grey, $font-weight: 400) {
+	font-size: $font-size-xxxl;
+	font-weight: $font-weight;
+	color: $color;
+}
+
+@mixin heading-3($color: $text-grey, $font-weight: 600) {
+	font-size: $font-size-xxl;
+	font-weight: $font-weight;
+	color: $color;
+}
+
+@mixin heading-4($color: $text-grey, $font-weight: 700) {
+	font-size: $font-size-xl;
+	font-weight: $font-weight;
+	color: $color;
+}
+
+@mixin heading-5($color: $text-grey, $font-weight: 600) {
+	font-size: $font-size-m;
+	font-weight: $font-weight;
+	line-height: normal;
+	color: $color;
+}
+
+@mixin heading-6($color: $text-grey, $font-weight: 600) {
+	font-size: $font-size-s;
+	font-weight: $font-weight;
+	color: $color;
+}
+
+@mixin body-text($color: $text-grey, $font-size: $font-size-m) {
+	font-size: $font-size;
+	font-weight: 400;
+	letter-spacing: $letter-spacing-text;
+	color: $color;
+}
+
+@mixin meta-text($font-size: $font-size-s, $color: $meta-text-grey) {
+	font-size: $font-size;
+	color: $color;
+}
+
+@mixin overflow-ellipsis() {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+// PRINT
+@mixin pdf-heading-1 {
+	// cover page header
+	font-size: $pdf-font-size-xxl;
+	font-weight: 400;
+	margin: 0 0 2rem 0;
+	line-height: 3rem;
+	word-break: break-word;
+}
+
+@mixin pdf-heading-2 {
+	// first page header
+	font-size: $pdf-font-size-xl;
+	font-weight: 700;
+	margin: 2rem 0;
+	line-height: 2.2rem;
+	word-break: break-word;
+}
+
+@mixin pdf-heading-3 {
+	// following pages header
+	font-size: 1.6rem;
+	font-weight: 600;
+	margin: 0;
+	letter-spacing: -0.02rem;
+	line-height: 2rem;
+	word-break: break-word;
+}
+
+@mixin pdf-heading-4 {
+	// Report post titles
+	font-size: $pdf-font-size-l;
+	font-weight: 600;
+	margin: 0;
+	letter-spacing: -0.02rem;
+	line-height: 1.8rem;
+	word-break: break-word;
+}
+
+@mixin pdf-heading-5 {
+	// field/strategy titles & matrix titles
+	font-size: $pdf-font-size-m;
+	font-weight: 600;
+	margin: 0;
+	line-height: 1.2rem;
+	word-break: break-word;
+}
+
+@mixin pdf-heading-6 {
+	// post title square name
+	font-size: $pdf-font-size-s;
+	font-weight: 400;
+	color: $pdf-text-color-2;
+	line-height: 1.2rem;
+	margin: 0;
+	word-break: break-word;
+}
+
+@mixin pdf-bread-text {
+	font-size: $pdf-font-size-m;
+	line-height: 1.4rem;
+	letter-spacing: $letter-spacing-text-rem;
+	word-break: break-word;
+	word-wrap: break-word;
+
+	p {
+		line-height: 1.4;
+		margin-bottom: 1rem;
+	}
+
+	ol,
+	ul {
+		margin-bottom: 1rem;
+	}
+}
+
+/**
+* Flex grid
+*/
+@mixin flex-row() {
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+}
+
+@mixin flex-gtr-col($columns, $gutter, $margin-bottom: $gutter) {
+	$percentage: percentage(1 / $columns);
+	$width: (($columns - 1) * $gutter) / $columns;
+	flex-basis: calc(#{$percentage} - #{$width});
+	margin-bottom: $margin-bottom;
+	margin-left: $gutter/2;
+	margin-right: $gutter/2;
+	min-width: 0; // Needed to work with trunkated text and overflow hidden
+	@if $columns != 1 {
+		&:nth-of-type(#{$columns}n + 1) {
+			margin-right: $gutter/2;
+			margin-left: 0;
+		}
+		&:nth-of-type(#{$columns}n + #{$columns}) {
+			margin-left: $gutter/2;
+			margin-right: 0;
+		}
+	} @else if $columns == 1 {
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+	}
+}
+
+/**
+|--------------------------------------------------
+| Heavily inspired of http://flexboxgrid.com/.
+| Use when having cols of different width with gutter
+|--------------------------------------------------
+*/
+@mixin flex-grid-row($gutter: 0) {
+	$half-gutter: $gutter/2;
+
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	margin: -$half-gutter;
+}
+
+@mixin flex-grid-column($span, $columns, $gutter: 0) {
+	$percentage: percentage($span/$columns);
+	$half-gutter: $gutter/2;
+
+	flex-basis: calc(#{$percentage});
+	max-width: calc(#{$percentage});
+	padding-left: $half-gutter;
+	padding-right: $half-gutter;
+}
+
+/**
+* Modals
+*/
+@mixin modal-padding() {
+	padding: $two-base-size;
+
+	@include breakpoint($md) {
+		padding: $four-base-size;
+	}
+}
+
+@mixin modal-footer() {
+	display: flex;
+	padding-top: $two-base-size;
+	border-top: 1px solid $grey-2;
+	justify-content: flex-end;
+}
+
+/**
+* Headings
+*/
+
+// Used on entrypoints, lists, etc.
+@mixin section-heading-container() {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: $two-base-size 0 $base-size;
+	min-height: $heading-height;
+
+	@include breakpoint($md) {
+		padding: $four-base-size 0 $base-size;
+	}
+}
+
+@mixin section-heading() {
+	margin: 0;
+	color: $text-grey;
+	font-size: $font-size-m;
+	padding: 0;
+	font-weight: 600;
+}
+
+@mixin modal-heading-container() {
+	position: relative;
+	top: 0;
+	z-index: $z-index-one;
+	background-color: $modal-background;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: $base-size 0;
+	border-bottom: 1px solid $border-grey;
+	margin-bottom: $two-base-size;
+
+	@include breakpoint($md) {
+		padding-bottom: 10px;
+	}
+}
+
+@mixin modal-heading() {
+	margin: 0;
+	font-size: $font-size-xl;
+	padding: 0;
+	font-weight: 400;
+
+	@include breakpoint($md) {
+		font-size: $font-size-xxl;
+	}
+}
+
+// Card headings
+@mixin card-heading-container() {
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid $border-light-grey;
+	justify-content: space-between;
+	min-height: $three-base-size;
+	padding-bottom: $base-size;
+	margin-bottom: $half-base-size;
+}
+
+@mixin card-heading() {
+	font-size: $font-size-xl;
+	min-height: $three-base-size;
+	margin: 0;
+	font-weight: bold;
+}
+
+// Cards with no bg (widgets such as Post List)
+@mixin card-heading-container-no-bg() {
+	display: flex;
+	align-items: center;
+	border-bottom: none;
+	justify-content: space-between;
+	min-height: $three-base-size;
+	padding-bottom: $base-size;
+	margin-bottom: $half-base-size;
+}
+
+// Report Card headings, E.g source reports.
+@mixin report-heading-container {
+	width: 100%;
+	border-bottom: 1px solid transparent;
+	padding-bottom: $base-size;
+}
+
+@mixin report-heading() {
+	font-size: $font-size-s;
+	margin: 0;
+	font-weight: bold;
+}
+
+/**
+* Readability
+*/
+@mixin readability-container {
+	margin: 0 auto;
+	max-width: $text-max-width;
+}
+
+/**
+* Positioning
+*/
+@mixin absolute-center() {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+@mixin flex-center() {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+/**
+* Resetting
+*/
+@mixin reset-btn {
+	appearance: none;
+	display: inline;
+	background: none;
+	outline: 0;
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+
+	&:hover {
+		background: none;
+		border: none;
+		box-shadow: none;
+	}
+}
+
+@mixin reset-list() {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+/**
+* Scroll wheel
+* NOTE only works on webkit browsers (chrome and safari)
+*/
+@mixin scrollBar() {
+	::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	::-webkit-scrollbar-thumb {
+		border-radius: 4px;
+		background-color: $grey-1;
+	}
+
+	::-webkit-scrollbar-track {
+		width: 4px;
+		background-color: $grey-5;
+	}
+}
+
+/**
+* Aspect ratio
+*/
+@mixin aspect-ratio-16-9-wrapper() {
+	position: relative;
+	overflow: hidden;
+	height: 0;
+	padding-bottom: 56.25%;
+}
+
+@mixin aspect-ratio-golden-ratio-wrapper() {
+	position: relative;
+	overflow: hidden;
+	height: 0;
+	padding-bottom: 61.8%;
+}
+
+@mixin aspect-ratio-4-3-wrapper() {
+	position: relative;
+	overflow: hidden;
+	height: 0;
+	padding-bottom: 75%;
+}
+
+/**
+* Badges
+*/
+@mixin badge($background-color: $grey-2, $color: $white) {
+	display: inline-block;
+	min-width: 20px;
+	padding: 2px;
+	font-size: $font-size-xs;
+	font-weight: 300;
+	color: $color;
+	line-height: 1;
+	vertical-align: middle;
+	white-space: nowrap;
+	text-align: center;
+	background-color: $background-color;
+	border-radius: 4px;
+}
+
+/**
+* Form elements
+*/
+@mixin form-label() {
+	display: block;
+	height: $two-base-size;
+	font-weight: 600;
+	white-space: nowrap;
+	color: $text-grey;
+	font-size: $font-size-s;
+	margin-bottom: $base-size;
+}
+
+@mixin input-field() {
+	border: 1px solid $border-grey;
+	color: $text-grey;
+	height: $form-component-height;
+	border-radius: $border-radius;
+	font-size: $font-size-s;
+	background-color: $white;
+	padding: 6px 12px;
+	outline: none;
+	transition: border 100ms ease;
+	-webkit-appearance: none;
+
+	&:focus {
+		border-color: $blue;
+	}
+	&:focus-visible {
+		@include focus-visible(1px);
+	}
+}
+
+@mixin form-helperText {
+	color: $grey-4;
+	font-size: $font-size-s;
+	letter-spacing: 0;
+	margin: $half-base-size 0 0;
+
+	&_disabled {
+		opacity: $disabled-opacity;
+	}
+}
+
+/**
+* Menu
+*/
+
+// The menu separator. Screen, refine, report, app.
+@mixin menu-section-heading {
+	font-size: $font-size-m;
+	padding: 28px 10px 16px 20px;
+	color: $text-on-dark-background-grey;
+	letter-spacing: $letter-spacing-heading;
+	font-weight: 600;
+	margin: 0;
+}
+
+// The links to base routes. e.g Inboxes, Dashboard etc.
+@mixin menu-link {
+	cursor: pointer;
+	padding: 18px 10px 18px 20px;
+	color: $text-on-dark-background-grey;
+	font-weight: 600;
+	letter-spacing: $letter-spacing-heading;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	transition: background 100ms ease;
+}
+
+// The droppable "buttons" in the menu
+@mixin menu-drop-items {
+	line-height: $line-height;
+
+	@include breakpoint(1px, $md - 1) {
+		width: calc(100% - 40px); // Necessary due to scroll wheel
+		margin: $base-size auto 0;
+	}
+
+	@include breakpoint($md) {
+		padding: 0 20px 20px 20px;
+		width: 100%;
+	}
+	@include breakpoint($lg) {
+		padding: 0 32px 20px 40px;
+		width: 100%;
+	}
+}
+
+@mixin menu-footer {
+	width: 100%;
+	letter-spacing: $letter-spacing-heading;
+	color: $text-on-dark-background-grey;
+	font-size: $font-size-s;
+	font-weight: 400;
+	padding: 16px 20px;
+}
+
+/**
+* Cards
+*/
+@mixin card-base($padding: $two-base-size) {
+	background: $white;
+	padding: $padding;
+	border-radius: $border-radius;
+}
+
+@mixin card-base-hoverable($padding: $two-base-size) {
+	@include card-base(0);
+
+	// show shadow on hover
+	&:after {
+		content: '';
+		position: absolute;
+		z-index: $z-index-negative;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		opacity: 0;
+		border-radius: 6px;
+		box-shadow: $card-hover-shadow;
+		transition: opacity 150ms ease-in-out;
+	}
+
+	@include breakpoint($md) {
+		&:hover {
+			&::after {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+/**
+* Sidebar on SearchPage and InboxPage
+*/
+@mixin sticky-sidebar {
+	display: none;
+	top: $two-base-size;
+	width: 100%;
+
+	@include breakpoint($lg) {
+		width: calc(100% - #{$content-with-sidebar});
+		display: flex;
+		flex-direction: column;
+	}
+
+	@media screen and (min-height: 1000px) {
+		position: sticky;
+	}
+}
+
+@mixin spinnerBorder($primaryColor, $secondaryColor) {
+	border-left-color: $primaryColor;
+	border-right-color: $primaryColor;
+	border-top-color: $primaryColor;
+	border-bottom-color: $secondaryColor;
+}
+
+@mixin spinner {
+	content: '';
+	border: solid 2px $icon-grey;
+	@include spinnerBorder($icon-grey, $grey-1);
+	box-sizing: border-box;
+	position: absolute;
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	top: 50%;
+	transform: translate(-0%, -50%);
+	margin-top: -12px;
+	animation: spin 2s infinite linear;
+}
+
+/**
+* Post
+*/
+@mixin post {
+	background: $white;
+	border-radius: $border-radius;
+
+	position: relative;
+	border: 1px solid $white;
+	margin-bottom: $base-size;
+
+	box-shadow: none;
+	padding: 28px 0 16px 0;
+
+	// show shadow on hover
+	&_hoverable {
+		&:after {
+			content: '';
+			position: absolute;
+			z-index: -1;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			right: 0;
+			opacity: 0;
+			border-radius: 6px;
+			box-shadow: $card-hover-shadow;
+			transition: opacity 0.2s ease-in-out;
+		}
+
+		&:hover::after {
+			opacity: 1;
+		}
+	}
+
+	&_isDraggable {
+		cursor: grab;
+	}
+
+	&_isDragging {
+		opacity: 0;
+		cursor: grabbing;
+	}
+
+	&_isGhosting {
+		opacity: 0;
+	}
+
+	&_canDrop {
+		border: 1px dashed $blue;
+		background: $drag-n-drop-droppable-area;
+	}
+
+	&_isOver {
+		background: $drag-n-drop-hover;
+	}
+
+	&_isProcessing {
+		background-color: rgba(255, 255, 255, 0.3);
+		border-color: rgba(255, 255, 255, 0.3);
+		box-shadow: none;
+		&:before {
+			@include spinner;
+			margin-left: 16px;
+		}
+	}
+}
+
+@mixin reportTabHeader {
+	display: flex;
+	height: 60px;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 $two-base-size;
+	// cursor: pointer;
+	border-bottom: 1px solid $grey-2;
+}
+
+// 1. Fix IE11 & Edge issue where bottom of tab disappears below container
+@mixin reportTab {
+	background-color: $report-tab-background;
+	height: 100%;
+	// IE11
+	@include internet-explorer-11 {
+		height: auto;
+		margin-bottom: 40px;
+	}
+
+	@include edge {
+		height: auto;
+		margin-bottom: 40px;
+	}
+
+	min-height: 1px;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	transition: width 200ms ease-in-out;
+	border-right: 1px solid $border-light-grey;
+
+	$sizes: 0, 7, 10, 20, 23, 25, 30, 50, 60, 65, 70, 100;
+
+	@each $size in $sizes {
+		&_#{$size} {
+			width: calc(#{$size} * 1%);
+
+			@if $size >= 60 {
+				background-color: $report-tab-selected-background;
+			}
+		}
+	}
+}
+
+@mixin facetItem {
+	margin: 0 $half-base-size $half-base-size 0;
+	max-width: 100%;
+}
+
+@mixin tableCell($cellHeight: 42px) {
+	display: flex;
+	align-items: center;
+	min-height: $cellHeight;
+	font-size: $font-size-s;
+
+	&_05 {
+		flex-basis: percentage(0.5/12);
+		max-width: percentage(0.5/12);
+	}
+
+	&_1 {
+		flex-basis: percentage(1/12);
+		max-width: percentage(1/12);
+	}
+
+	&_15 {
+		flex-basis: percentage(1.5/12);
+		max-width: percentage(1.5/12);
+	}
+
+	&_2 {
+		flex-basis: percentage(2/12);
+		max-width: percentage(2/12);
+	}
+
+	&_25 {
+		flex-basis: percentage(2.5/12);
+		max-width: percentage(2.5/12);
+	}
+
+	&_3 {
+		flex-basis: percentage(3/12);
+		max-width: percentage(3/12);
+	}
+
+	&_35 {
+		flex-basis: percentage(3.5/12);
+		max-width: percentage(3.5/12);
+	}
+
+	&_4 {
+		flex-basis: percentage(4/12);
+		max-width: percentage(4/12);
+	}
+
+	&_5 {
+		flex-basis: percentage(5/12);
+		max-width: percentage(5/12);
+	}
+
+	&_6 {
+		flex-basis: percentage(6/12);
+		max-width: percentage(6/12);
+	}
+
+	&_7 {
+		flex-basis: percentage(7/12);
+		max-width: percentage(7/12);
+	}
+
+	&_8 {
+		flex-basis: percentage(8/12);
+		max-width: percentage(8/12);
+	}
+
+	&_9 {
+		flex-basis: percentage(9/12);
+		max-width: percentage(9/12);
+	}
+
+	&_10 {
+		flex-basis: percentage(10/12);
+		max-width: percentage(10/12);
+	}
+
+	&_11 {
+		flex-basis: percentage(11/12);
+		max-width: percentage(11/12);
+	}
+
+	&_auto {
+		flex-grow: 1;
+		flex-basis: auto;
+		max-width: 100%;
+	}
+
+	&_fullWidth {
+		flex-basis: 100%;
+		max-width: 100%;
+	}
+
+	&_hidden {
+		display: none;
+	}
+}
+
+@mixin tableCellContent($padding: 0 $base-size) {
+	font-weight: 400;
+	display: flex;
+	padding: $padding;
+	width: 100%;
+	justify-content: flex-start;
+
+	&_alignCenter {
+		align-items: center;
+	}
+
+	&_justifyRight {
+		justify-content: flex-end;
+		text-align: right;
+	}
+
+	&_justifySpaceBetween {
+		justify-content: space-between;
+	}
+
+	&_justifyCenter {
+		justify-content: center;
+	}
+
+	&_thin {
+		padding-top: 0;
+		padding-bottom: 4px;
+	}
+
+	&_wrap {
+		flex-wrap: wrap;
+	}
+
+	&_truncateText {
+		display: block;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&_normalTextWeight {
+		font-weight: 400;
+	}
+}
+
+/**
+* Margin
+*/
+@mixin margin($number: 8) {
+	.marginBottom_025 {
+		margin-bottom: 2px;
+	}
+
+	.marginBottom_05 {
+		margin-bottom: $half-base-size;
+	}
+
+	.marginBottom_15 {
+		margin-bottom: 12px;
+	}
+
+	.marginBottom_25 {
+		margin-bottom: 20px;
+	}
+
+	.marginTop_05 {
+		margin-top: $half-base-size;
+	}
+
+	.marginTop_15 {
+		margin-top: 12px;
+	}
+
+	.marginTop_25 {
+		margin-top: 20px;
+	}
+
+	.marginLeft_05 {
+		margin-left: $half-base-size;
+	}
+
+	.marginLeft_15 {
+		margin-left: 12px;
+	}
+
+	.marginLeft_25 {
+		margin-left: 18px;
+	}
+
+	.marginLeft_auto {
+		margin-left: auto;
+	}
+
+	.marginRight_05 {
+		margin-right: $half-base-size;
+	}
+
+	.marginRight_15 {
+		margin-right: 12px;
+	}
+
+	.marginRight_25 {
+		margin-right: 18px;
+	}
+
+	.marginRight_auto {
+		margin-right: auto;
+	}
+
+	@for $i from 0 through $number {
+		.margin_#{$i} {
+			margin: calc(#{$i} * #{$base-size});
+		}
+
+		.marginX_#{$i} {
+			margin-left: calc(#{$i} * #{$base-size});
+			margin-right: calc(#{$i} * #{$base-size});
+		}
+
+		.marginY_#{$i} {
+			margin-top: calc(#{$i} * #{$base-size});
+			margin-bottom: calc(#{$i} * #{$base-size});
+		}
+
+		.marginBottom_#{$i} {
+			margin-bottom: calc(#{$i} * #{$base-size});
+		}
+
+		.marginTop_#{$i} {
+			margin-top: calc(#{$i} * #{$base-size});
+		}
+
+		.marginLeft_#{$i} {
+			margin-left: calc(#{$i} * #{$base-size});
+		}
+
+		.marginRight_#{$i} {
+			margin-right: calc(#{$i} * #{$base-size});
+		}
+	}
+}
+
+@mixin padding($number: 8) {
+	.paddingBottom_025 {
+		padding-bottom: 2px;
+	}
+
+	.paddingBottom_05 {
+		padding-bottom: $half-base-size;
+	}
+
+	.paddingBottom_15 {
+		padding-bottom: 12px;
+	}
+
+	.paddingBottom_25 {
+		padding-bottom: 20px;
+	}
+
+	.paddingTop_05 {
+		padding-top: $half-base-size;
+	}
+
+	.paddingTop_15 {
+		padding-top: 12px;
+	}
+
+	.paddingTop_25 {
+		padding-top: 20px;
+	}
+
+	.paddingLeft_05 {
+		padding-left: $half-base-size;
+	}
+
+	.paddingLeft_15 {
+		padding-left: 12px;
+	}
+
+	.paddingLeft_25 {
+		padding-left: 20px;
+	}
+
+	.paddingRight_05 {
+		padding-right: $half-base-size;
+	}
+
+	@for $i from 0 through $number {
+		.padding_#{$i} {
+			padding: calc(#{$i} * #{$base-size});
+		}
+
+		.paddingX_#{$i} {
+			padding-left: calc(#{$i} * #{$base-size});
+			padding-right: calc(#{$i} * #{$base-size});
+		}
+
+		.paddingY_#{$i} {
+			padding-top: calc(#{$i} * #{$base-size});
+			padding-bottom: calc(#{$i} * #{$base-size});
+		}
+
+		.paddingBottom_#{$i} {
+			padding-bottom: calc(#{$i} * #{$base-size});
+		}
+
+		.paddingTop_#{$i} {
+			padding-top: calc(#{$i} * #{$base-size});
+		}
+
+		.paddingLeft_#{$i} {
+			padding-left: calc(#{$i} * #{$base-size});
+		}
+
+		.paddingRight_#{$i} {
+			padding-right: calc(#{$i} * #{$base-size});
+		}
+	}
+}
+
+@mixin backgroundColor($prefix) {
+	.#{$prefix}_orange {
+		background-color: $orange;
+	}
+	.#{$prefix}_green {
+		background-color: $green;
+	}
+	.#{$prefix}_red {
+		background-color: $red;
+	}
+	.#{$prefix}_white {
+		background-color: $white;
+	}
+	.#{$prefix}_grey1 {
+		background-color: $grey-1;
+	}
+	.#{$prefix}_grey2 {
+		background-color: $grey-2;
+	}
+	.#{$prefix}_grey3 {
+		background-color: $grey-3;
+	}
+	.#{$prefix}_grey4 {
+		background-color: $grey-4;
+	}
+	.#{$prefix}_grey5 {
+		background-color: $grey-5;
+	}
+}
+
+@mixin borderColor {
+	.borderColor_green {
+		border-color: $green;
+	}
+	.borderColor_red {
+		border-color: $red;
+	}
+	.borderColor_white {
+		border-color: $white;
+	}
+	.borderColor_grey1 {
+		border-color: $grey-1;
+	}
+	.borderColor_grey2 {
+		border-color: $grey-2;
+	}
+	.borderColor_grey3 {
+		border-color: $grey-3;
+	}
+	.borderColor_grey4 {
+		border-color: $grey-4;
+	}
+	.borderColor_grey5 {
+		border-color: $grey-5;
+	}
+	.borderColor_grey6 {
+		border-color: $grey-6;
+	}
+}
+
+@mixin width {
+	@for $i from 0 through 20 {
+		$percentage: $i * 5;
+
+		.width_#{$percentage} {
+			width: #{$percentage}#{'%'};
+		}
+		.minWidth_#{$percentage} {
+			min-width: #{$percentage}#{'%'};
+		}
+		.maxWidth_#{$percentage} {
+			max-width: #{$percentage}#{'%'};
+		}
+	}
+}
+
+@mixin flexRules {
+	.displayFlex {
+		display: flex;
+	}
+
+	.displayFlexCenter {
+		@include flex-center;
+	}
+
+	.displayFlexCenterSpaceBetween {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.alignItems_center {
+		align-items: center;
+	}
+
+	.alignItems_flexStart {
+		align-items: flex-start;
+	}
+
+	.alignItems_flexEnd {
+		align-items: flex-end;
+	}
+
+	.flexWrap_wrap {
+		flex-wrap: wrap;
+	}
+
+	.flexWrap_noWrap {
+		flex-wrap: nowrap;
+	}
+
+	.flexWrap_wrapReverse {
+		flex-wrap: wrap-reverse;
+	}
+
+	.flexDirection_row {
+		flex-direction: row;
+	}
+
+	.flexDirection_rowReverse {
+		flex-direction: row-reverse;
+	}
+
+	.flexDirection_column {
+		flex-direction: column;
+	}
+
+	.flexDirection_columnReverse {
+		flex-direction: column-reverse;
+	}
+
+	.justifyContent_center {
+		justify-content: center;
+	}
+
+	.justifyContent_spaceAround {
+		justify-content: space-around;
+	}
+
+	.justifyContent_spaceBetween {
+		justify-content: space-between;
+	}
+
+	.justifyContent_flexStart {
+		justify-content: flex-start;
+	}
+
+	.justifyContent_flexEnd {
+		justify-content: flex-end;
+	}
+
+	@for $i from 0 through 4 {
+		.flexGrow_#{$i} {
+			flex-grow: #{$i};
+		}
+	}
+}
+
+@mixin buttonColors($backgroundColor, $borderColor, $textColor) {
+	background-color: $backgroundColor;
+	border-color: $borderColor;
+	color: $textColor;
+
+	.icon,
+	svg {
+		fill: $textColor;
+	}
+}
+
+@mixin showHideOnBreakPointRules($flexOrBlock) {
+	.showOnBreakpoint_sm {
+		display: none;
+
+		@include breakpoint($sm) {
+			display: #{$flexOrBlock};
+		}
+	}
+	.showOnBreakpoint_md {
+		display: none;
+
+		@include breakpoint($md) {
+			display: #{$flexOrBlock};
+		}
+	}
+	.showOnBreakpoint_lg {
+		display: none;
+
+		@include breakpoint($lg) {
+			display: #{$flexOrBlock};
+		}
+	}
+	.showOnBreakpoint_xl {
+		display: none;
+
+		@include breakpoint($xl) {
+			display: #{$flexOrBlock};
+		}
+	}
+}
+
+@mixin searchDropDownItem {
+	position: relative;
+	cursor: pointer;
+	display: flex;
+	justify-content: space-between;
+	padding: $base-size;
+	border-bottom: 1px solid $border-light-grey;
+
+	&:hover {
+		background-color: $grey-1;
+	}
+	&:active {
+		background-color: $grey-2;
+	}
+	&:focus {
+		border-bottom: 1px solid $blue;
+	}
+
+	&_keyBoardFocused {
+		background-color: $grey-1;
+	}
+	&_disabled {
+		pointer-events: none;
+		opacity: $disabled-opacity;
+	}
+}