@import '../../../styles/mixins';
@import '../../../styles/fills';
@import '../../../styles/definitions/forms';

.domainApp {
	&_wrapper {
		margin-bottom: 24px;
	}

	&_form {
		display: flex;
		border: $form-control-border;
		border-radius: $form-control-border-radius;
	}
	&_search {
		flex-grow: 1;

		.input_control {
			border: 0;
		}
	}
	&_submit {
		&Icon {
			width: 14px;
			fill: $white;
		}
		&Text {
			@extend %sr-only;
		}
	}
	&_result {
		&Item {
			margin-top: $grid-gutter-height-large;

			@include media-lg-up {
				@include grid-item();
				@include grid-width(6);
			}
		}

		@include media-lg-up {
			display: flex;
			@include grid-row();
		}
	}
	&_table {
		$table-border-color: $mid-gray;

		width: 100%;
		margin: 0;
		padding: 0;
		border-spacing: 0;
		border: 1px solid $table-border-color;

		&Cell {
			@include text-5;
			padding: 10px 12px;
			text-align: left;

			&--placeholder {
				padding: 22px 12px;
			}

			&--heading {
				background-color: $light-gray;
				border: 0;
			}

			&--name {
				@include media-md-up {
					width: 75%;
				}
			}

			&--price {
				@include media-md-up {
					width: 25%;
				}
			}
			
			border-top: 1px solid $table-border-color;
		}

		&Title {
			@include title-6;
			display: block;
			margin: 0;
			text-transform: uppercase;
		}
		&Content {
			@include media-md-down {
				@include grid-row;
				display: flex;
				flex-wrap: wrap;
			}
		}
	}
	&_name,
	&_price {
		@include media-md-down {
			@include grid-item;
		}
	}
	&_price,
	&_action {
		white-space: nowrap;
	}
	&_name {
		font-weight: 700;
		word-break: break-word;

		@include media-md-down {
			flex-grow: 1;
			@include grid-width(7);
		}
	}
	&_price {
		@include media-md-down {
			text-align: right;
			@include grid-width(5);
		}
	}
	&_action {
		display: flex;

		&Button {
			// Prevent size of 'action' column, need to set min-width for button based on largest label
			min-width: 145px;

			@include media-sm-down {
				margin-top: 11px;
				padding-top: 8px;
				padding-bottom: 8px;
			}
			@include media-sm-up {
				width: 100%;
			}
		}
		&Icon {
			&--check {
				circle {
					fill: $emphasis-color;
				}
				path {
					@include fill-white;
				}
			}
		}
			
		@include media-md-down {
			@include grid-item;
			@include column-width;
		}
			
		@include media-md-up {
			justify-content: flex-end;
		}
	}
	
	&_iconAddToCart {
		width: 20px;
		path {
            @include fill-white;
        }
	}

	&_footer {
		@include grid-row;
		margin-top: $grid-gutter-height-large;

		&Item {
			@include grid-item;
			margin-top: 10px;
		}

		&Button {
			@include media-md-down {
				width: 100%;
			}
		}

		@include media-md-up {
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;
		}
	}
}
