@import '../../admin/assets/vendors/ds-core/css/variables';
@import '../../admin/assets/vendors/ds-core/css/functions';

body {
	#dsdi-wrapper {
		background: $white;
		font-family: inherit;
		padding: 30px;

		* {
			text-decoration: none;
			box-sizing: border-box;
			-webkit-font-smoothing: antialiased;

			&:focus {
				outline: none;
			}
		}

		> .entry-header,
		> .entry-content {
			margin: 0 auto;
		}

		input[type="submit"],
		.ds-button,
		button {
			transition: all 0.2s;
			display: block;
			cursor: pointer;
			border: 0;
			@include ds-dimensions( 100%, auto );
			background-color: $white;
			border-width: 1px;
			border-style: solid;
			border-color: $ds-grey;
			color: $ds-grey-dark;
			text-transform: uppercase;
			text-align: center;
			font-weight: normal;
			padding: 13px 10px;
			font-size: 14px;
			line-height: 1.2;
			letter-spacing: 1px;
			@include ds-border-radius( 0 );

			&.active,
			&:hover {
				color: $white;
				background-color: $ds-grey-dark;
			}
		}

		.taxonomy-description,
		.dsdi-directory-container {
			max-width: 1260px;
			margin: 0 auto;

			.dsdi-directory-header {
				position: relative;
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 35px;

				.dsdi-directory-list-nav-container {
					@include ds-dimensions( 100%, auto );
					position: static;

					> .dsdi-directory-list-nav {
						position: absolute;
						max-width: 100%;
						@include ds-dimensions( 100%, auto );
						z-index: 9999;
						background: $white;
						display: flex;
						list-style: none;
						padding: 0;
						margin: 0;
						border: 1px solid #efefef;
						flex-wrap: wrap;
						@include ds-box-shadow( 1px 1px 5px -2px rgba( 0, 0, 0, 0.2 ) );
						border-top: 2px solid $ds-grey-dark;
						margin-top: 5px;

						> li {
							margin: 0;
							@include ds-dimensions( 100%, auto );

							&:not( :last-child ) {
								border-bottom: 1px solid #efefef;
							}

							> a {
								display: block;
								padding: 10px 15px;
								color: $ds-grey-dark;

								&:hover {
									background-color: #f9f9f9;
									color: $ds-grey-dark;
								}
							}
						}
					}
				}

				.dsdi-directory-list-search-container {
					@include ds-dimensions( 100%, 100% );
					text-align: right;
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					align-items: center;
					justify-content: flex-end;
					margin-top: 35px;

					.dsdi-directory-search-form {
						@include ds-dimensions( 100%, 100% );
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						justify-content: flex-end;

						input[type="text"] {
							@include ds-dimensions( 100%, 42px );
							margin: 0 0 5px;
							color: $ds-grey-dark;
							border-color: $ds-grey;
						}
					}

					a {
						color: $ds-grey-dark;
						font-weight: bold;
						border-bottom: 2px solid $ds-grey-dark;
						margin: 0 0 15px 0;
					}
				}
			}

			.dsdi-directory-body {
				.dsdi-directory-list {
					list-style: none;
					padding: 0;
					margin: 0;

					> .dsdi-directory-list-header {
						font-weight: bold;
						position: sticky;
						top: 0;
						background: $white;
					}

					> .dsdi-directory-list-header,
					> .dsdi-item {
						@include ds-dimensions( 100%, 100% );
						display: flex;
						flex-wrap: wrap;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;
						margin: 0;

						&:not( :first-child ) {
							border-top: 1px solid $ds-grey-light;
						}

						> div {
							display: flex;
							flex-wrap: wrap;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							text-align: center;
							padding: 10px 15px;
							min-height: 58px;
							overflow: hidden;
							text-overflow: ellipsis;

							&.dsdi-title {
								@include ds-dimensions( 100%, 100% );

								> span {
									&:last-child {
										font-weight: bold;
									}
								}
							}

							&.dsdi-directory {
								@include ds-dimensions( 100%, 100% );
							}

							&.dsdi-labels {
								> .dsdi-item-label {
									> i {
										@include ds-dimensions( 15px, 15px );
										text-align: center;
									}
								}
							}

							&.dsdi-view-details {
								@include ds-dimensions( 100%, 100% );
							}
						}

						&:hover,
						&:hover + .dsdi-item {
							transition: all 0.2s;
							border-color: $ds-grey;
						}
					}
				}

				.dsdi-directory-grid {
					.dsdi-item {
						.ds-block { // .dsdi
							transition: 0.4s all;
							border: 1px solid $ds-grey-light;

							> .dsdi-featured-image {
								@include ds-dimensions( 100%, 250px );
								// padding: 15px;

								> div {
									@include ds-dimensions( 100%, 100% );
									// background-image: url( http://speen-beast-pc/test/wp-content/uploads/2020/02/dsdi-_0030s_0001_Absa.jpg );
									background-position: center center;
									background-size: cover;
									background-repeat: no-repeat;
								}
							}

							> .ds-block-title {
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							&:hover {
								background-color: $ds-grey-light;
								border-color: $ds-grey;
							}

							> .ds-block-body {
								> .dsdi-item-labels-wrapper {
									i {
										@include ds-dimensions( 15px, 15px );
										text-align: center;
									}
								}
							}
						}
					}
				}
			}
		}

		&.dsdi-single-container {
			.dsdi-item-labels-wrapper {
				i {
					@include ds-dimensions( 15px, 15px );
					text-align: center;
				}
			}
		}
	}

	&.admin-bar {
		#dsdi-wrapper {
			.dsdi-directory-container {
				.dsdi-directory-body {
					.dsdi-directory-list {
						> .dsdi-directory-list-header {
							top: 32px;
						}
					}
				}
			}
		}
	}
}

@media ( min-width: $ds-global-width-sm ) {

}

@media ( min-width: $ds-global-width-md ) {

}

@media ( min-width: $ds-global-width-lg ) {
	body {
		#dsdi-wrapper {
			.dsdi-directory-container {
				.dsdi-directory-header {
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					.dsdi-directory-list-nav-container {
						@include ds-dimensions( 30%, auto );

						> .dsdi-directory-list-nav {
							> li {
								@include ds-dimensions( 50%, auto );

								&:nth-child( odd ) {
									border-right: 1px solid #efefef;
								}

								> a {
									padding: 10px 15px;
								}
							}
						}
					}

					.dsdi-directory-list-search-container {
						@include ds-dimensions( 70%, 100% );
						text-align: right;
						flex-direction: row;
						align-items: center;
						justify-content: flex-end;
						margin-top: 0px;

						.dsdi-directory-search-form {
							max-width: 400px;
							align-items: center;
							justify-content: flex-end;

							input[type="text"] {
								@include ds-dimensions( 70%, 42px );
								margin: 0;
								color: $ds-grey-dark;
								border-right-width: 0;
							}

							input[type="submit"] {
								@include ds-dimensions( 30%, 42px );
							}
						}

						a {
							margin: 0 15px 0 0;
						}
					}
				}

				.dsdi-directory-body {
					.dsdi-directory-list {
						padding: 0;
						margin: 0;

						> .dsdi-directory-list-header,
						> .dsdi-item {
							@include ds-dimensions( 100%, 100% );
							flex-direction: row;
							justify-content: flex-start;

							> div {
								flex-direction: row;
								justify-content: flex-start;
								text-align: left;
								padding: 10px 15px;
								min-height: 58px;

								&:first-child {
									padding: 10px 15px 10px 0;
								}

								&:last-child {
									padding: 10px 0 10px 15px;
								}

								&.dsdi-title {
									@include ds-dimensions( 30%, 100% );

									> span {
										&:last-child {
											font-weight: normal;
										}
									}
								}

								&.dsdi-directory {
									@include ds-dimensions( 25%, 100% );
								}

								&.dsdi-labels {
									@include ds-dimensions( 30%, 100% );
								}

								&.dsdi-view-details {
									@include ds-dimensions( 15%, 100% );
								}
							}
						}
					}
				}
			}
		}
	}
}

@media ( min-width: $ds-global-width-xl ) {

}