
.grid-field {
	width: 100%;

	.table-responsive {
		@include shadow-input;
		border: 1px solid color(border);
		overflow-x: auto;
	}

	.ui-sortable-placeholder > * {
		display: none !important;
	}

	.required {
		&:after {
			content: "\*";
			color: var(--ee-brand-danger);
			font-size: 1em;
			position: relative;
			top: 0px;
			margin-left: 0;
		}
	}

	tbody {
		td.required {
			&:after { display: none; }

			&:before {
				content: "\*";
				color: var(--ee-brand-danger);
				font-size: 1em;
				position: relative;
				top: 0;
				line-height: 0.7;
				display: none;
			}
		}
	}
}

.grid-field__table {
  th {
    font-size: 0.9em;
    background: color(bg-0);
    border-right: 1px solid color(table-border);
  }

  tr {
  	td {
  		@include m-tablet-down {
  			min-width: 0 !important;
  			width: 100% !important;
  			max-width: 100% !important;
  		}

  		&.grid-rte,
  		&.grid-file-upload,
  		&.grid-multi-relate {
  			// min-width: 400px;
  		}

  		&.grid-field__column--tools {

  		}

  		&.grid-multi-relate {
  			@include m-tablet-down {
  				position: relative;

  				.dropdown--open {
  					top: calc(100% + 4px) !important;
  					transform: none !important;
  				}
  			}
  		}
  	}
	}

	tr.ui-sortable-helper {
		box-shadow: color(shadow-dropdown);
		background: color(accent-light);
	}

  tr.no-results {
    td {
      border-bottom: none;
    }
  }

  tbody td {
    vertical-align: top;
    border-right: 1px solid color(table-border);
    min-width: 250px;
    max-width: 600px;

     @include m-tablet-down {
       border-right: none;
     }
  }

  td:first-child, th:first-child {
    padding-left: 15px;
  }

  td:last-child, th:last-child {
    padding-right: 15px;
    border-right: none;
    min-width: 80px;
  }


  .file-field__dropzone {
    margin-top: 0px;

	.dropdown__link, .file-field__buttons {
		text-indent: 0;
	}
	.dropdown__link--selected {
		&::before {
			margin-right: 20px;
			margin-left: 0;
		}
	}
  }

	.file-field__buttons {
		.dropdown__link {
			text-indent: 0;
		}
	}

  input[type=email], input[type=number], input[type=password], input[type=text], input[type=url], textarea {
    min-width: 150px;
  }

	.row-counter-column {
	  width: 0.01% !important;
	  padding: 7px !important;
	  max-width: none !important;
	  min-width: 0 !important;
	  font-size: 0.9em;
	  background: var(--ee-bg-0);
	  color: var(--ee-text-secondary);
	  font-weight: 500;

	  @include m-tablet-down {
	  	width: 100% !important;
	  }
	}
}


.grid-relate, .grid-multi-relate {
	.dropdown__link {
		display: block;
	}
}



#routes {
	.grid-field__table {
		tr {
			background: inherit;
		}
	}
}

#routes {
	.table-responsive {
		overflow-x: auto;
	}
}

.grid-field__column-label {
	display: none;

	label {
		display: inline-block;
		color: var(--ee-text-normal);
		margin-bottom: 5px;
		font-weight: 500;
	}
}

.grid-field__column-remove {
	width: 1%;
}

.grid-field__column--tools {
	vertical-align: top;
	font-size: 1rem;
	padding-left: 8px;
  padding-right: 8px !important;

  .button {
    margin-bottom: 5px;

    &:last-child {
      margin-bottom: 0px;
    }
  }
}

.grid-field__column-tool {
	&:last-child {
		margin-bottom: 0;
	}

	&:hover, &.dropdown-open {
		opacity: 0.8;
	}
}

.grid-field__footer {
	margin-top: $s-s;
}

// LEGACY 6.0
.grid-blank-row {
	display: none !important;
}

// LEGACY 6.0
.sort-cancel {
	display: none;
}



.grid-field__item-fieldset {

	.grid-field__column-label {
		display: block;
	}

	.grid-field__item-tools {
		transition: opacity 100ms ease;
		position: absolute;
		top: 50%;
		right: 15px;
		transform: translateY(-50%);
		z-index: 1;

		&.has-open-dropdown {
			z-index: 200;
		}

		.grid-field__item-tool {
			-webkit-appearance: none;
			appearance: none;
			display: inline-block;
			padding: 0px;
			margin-left: 5px;
			background: transparent;
			border: none;
			line-height: 1 !important;
			cursor: pointer;
			color: var(--ee-text-secondary);

			&:hover {
				color: var(--ee-link);
			}

			.dropdown {
				max-height: 90vh;
				overflow-y: auto;
				white-space: nowrap;
			}
		}
	}

	.field-instruct {
		padding-right: 55px;
		margin-bottom: 5px;

		label {
			margin-right: 5px;
			color: var(--ee-text-secondary);
			display: inline-block;
			font-size: 1rem;
			margin-bottom: 0 !important;
      margin-left: -5px;
		}

		button {
			border: none;
			background: none;
			color:inherit;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
		}
	}

	tr.grid__item--collapsed {
		padding-bottom: 0 !important;

		td:not(.grid-field__item-fieldset) { display: none !important;}

		td.grid-field__item-fieldset {
			border-bottom: none !important;

			.grid-field__item-tool {
				transform: rotate(180deg);
			}
		}
	}
}

// VERTICAL GRID LAYOUT
.grid-field.vertical-layout {
	padding: 10px;
	background: var(--ee-bg-0);
	border: 1px solid var(--ee-border);
	border-radius: 5px;

	.table-responsive {
		box-shadow: none;
		border:none;
		border-radius: 0;
		overflow: inherit;
	}

	.grid-field__table {
		display: block;

		& > thead {
			display: none;
		}

		& > tbody {
			display: block;
			border: none;

			& > tr:not(.hidden) {
				display: flex;
				flex-direction: column;
				position: relative;
				border: 1px solid var(--ee-border);
				margin-bottom: 10px;
				padding-bottom: 15px;
				background-color: var(--ee-bg-blank);

				& > td {
					border-right: none;
					min-width: 0;
					width: 100%;
					max-width: 100%;
					display: block;
					border-bottom: none;
					padding: 10px 15px 10px 15px;
          font-size: 1rem;

					&.grid-field__column--tools {
						text-align: left;

						.button {
							margin-bottom: 0;
						}
					}
				}
			}

			tr.no-results {
				padding: 0px;
        background-color: transparent;
        border: none;

				td {
					padding-top: 0;
					padding-bottom: 0;
				}
			}

			tr.grid__item--collapsed {
				padding-bottom: 0 !important;

				// td:not(.grid-field__item-fieldset) { display: none !important;}

				td.grid-field__item-fieldset {
					border-bottom: none !important;

					.grid-field__item-tool {
						transform: rotate(180deg);
					}
				}
			}

			td.required {
				&:before {
					top: 45px;
				}

				.grid-field__column-label {
					margin-bottom: 15px;
				}
			}
		}

		.row-counter-column {
			width: 100% !important;
		}
	}

	.grid-field__item-fieldset{
		padding: 10px 15px 5px 15px;
		border-bottom: 1px solid var(--ee-border) !important;
		position: relative;

    .field-instruct {

      label {
        font-size: 1rem;

        button {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
	}

	.grid-field__column--tools { display: none !important;}

  .grid-field__column-label {
  	display: inherit;
  	margin-bottom: 10px;

  	label {
  		color: var(--ee-text-secondary);
  		margin: 0;
  	}

  	em {
			color: var(--ee-text-secondary);
			font-style: normal;
			margin: 0;
  	}
  }
}

// HORIZONTAL GRID LAYOUT
.grid-field.horizontal-layout {
	.table-responsive {
		overflow-x: auto;
	}
}


// Collapse the grid field on mobile
@include m-tablet-down {

	.grid-field:not(.horizontal-layout) .grid-field__column-label {
		display: block;
	}

	.grid-field:not(.horizontal-layout) .table-responsive {
		box-shadow: none;
		border: none;
		border-radius: 0;
		overflow: inherit;
	}

	.grid-field:not(.horizontal-layout) .grid-field__table {
		&, & > tbody {
			display: block;
			border: none;
		}

		& > thead {
			display: none;
		}

		& > tbody {
			& > tr {
				display: flex;
				flex-direction: column;

	      &.hidden {
	        display: none;
	      }
			}

			& > tr {
				position: relative;
				border: 1px solid color(border);
				margin-bottom: 10px;
				padding-bottom: $sq-s;
				background-color: var(--ee-bg-blank);

	      &.no-results {
	        padding: 0px;

	        td {
	          // padding-top: 0;
	        }
	      }
			}

			& > tr > td {
				display: block !important;
				border-bottom: none;
				padding: $sq-inset-s;
			}

			tr.grid__item--collapsed {
				padding-bottom: 0 !important;

				td:not(.grid-field__item-fieldset) { display: none !important;}

				td.grid-field__item-fieldset {
					border-bottom: none !important;

					.grid-field__item-tool {
						transform: rotate(180deg);
					}
				}
			}
		}

		.row-counter-column {
			width: 100% !important;
		}
	}

	.grid-field:not(.horizontal-layout) .grid-field__column--tools {
		text-align: left;

    .button {
      margin-bottom: 0;
    }
	}

	.entry-grid, .vertical-layout {
		padding: 10px;
		background: var(--ee-bg-0);
		border: 1px solid var(--ee-border);
		border-radius: 5px;

		.grid-field__item-fieldset {
			display: block;
			position: relative;
			border-bottom: 1px solid var(--ee-border) !important;
      font-size: 1rem;
		}

		td.grid-field__column--tools { display: none !important;}
	}

	.grid-field.horizontal-layout {
		tbody {
			td {
				border-right: 1px solid var(--ee-table-border);
				min-width: 250px !important;
				max-width: 600px !important;

				&.grid-field__column--tools {
					min-width: 80px !important;
				}
			}
		}

		.row-counter-column {
			width: 0.01% !important;
			max-width: none !important;
			min-width: 0 !important;
		}
	}
}

// LIVE-PREVIEW AND OVERWIDTH
.live-preview__form-content .grid-field,
.grid-field.overwidth {
	.grid-field__table {
		display: flex;

		& > thead {
			display: none;
		}

		& > tbody {
			width: 100%;
			border: none;

			& > tr:not(.hidden) {
				display: flex;
				flex-direction: column;
				position: relative;
				border: 1px solid var(--ee-border);
				margin-bottom: 10px;
				padding-bottom: 15px;
				background-color: var(--ee-bg-blank);

				& > td:not(.hidden) {
					border-right: none;
					min-width: 0;
					width: 100%;
					max-width: 100%;
					display: block;
					border-bottom: none;
					padding: 10px 15px 10px 15px;
					font-size: 1rem;

					@include m-tablet-up {
						border-bottom: 1px solid var(--ee-table-border);
					}

					&:last-child {
						border-bottom: none;
					}

					& > *:not(.grid-field__column-label) {
						width: 100%;
					}

					.ee-form-error-message {
						margin-left: auto;
					}

					.grid-field__column-label {
						display: block;
						color: var(--ee-text-secondary);
						font-weight: 500;
						white-space: normal;
						margin-bottom: 10px;
						flex: 0 0 100%;

						label {
							color: var(--ee-text-secondary);
							margin: 0;
						}

						em {
							font-style: normal;
							color: var(--ee-text-secondary);
							margin: 0;
						}
					}

					.grid-field__column-tools {
						width: 100%;
						display: flex;
						align-items: center;

						.button {
							margin-bottom: 0;

							&:first-child {
								margin-right: 10px;
							}
						}
					}
				}
			}

			tr.no-results {
				border-bottom: none;
				padding: 0;
			}

			tr.grid__item--collapsed {
				padding-bottom: 0 !important;

				td.grid-field__item-fieldset {
					border-bottom: none !important;

					.grid-field__item-tool {
						transform: rotate(180deg);
					}
				}
			}

			td.required {
				&:before {
					top: 45px;
				}

				.grid-field__column-label {
					margin-bottom: 15px !important;
				}
			}
		}

		.row-counter-column {
			width: 100% !important;
		}
	}
}

.grid-field.overwidth {
	padding: 10px;
	background: var(--ee-bg-0);
	border: 1px solid var(--ee-border);
	border-radius: 5px;

	.table-responsive {
		border: none;
		box-shadow: none;
	}

	.grid-field__table {
		& > tbody > tr:not(.hidden) {
			& > td {

				&.grid-field__column--tools { display: none !important;}

				// div:empty:not(.ck-insert-table-dropdown-grid-box) { display: none;}

				&.grid-field__item-fieldset {
					position: relative;

					.grid-field__item-tools {
						width: auto !important;
					}
				}
			}
		}

		.row-counter-column {
			width: 100% !important;
		}
	}
}