/*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "/src/styles/vars";

.actions-container {
	justify-content: flex-end;

	button[mat-icon-button] {
		padding: 0;
		height: 36px;
	}
}

.drop-list-item {
	.small-icon-button {
		float: right;
	}
}

@include small-icon-button();

form {
	.mat-mdc-card-actions .mdc-button {
		margin: 0 8px;
	}

	.cdk-drag-preview {
		box-sizing: border-box;
		border-radius: 4px;
		box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
		0 8px 10px 1px rgba(0, 0, 0, 0.14),
		0 3px 14px 2px rgba(0, 0, 0, 0.12);
	}

	.cdk-drag-placeholder {
		opacity: 0;
	}

	.cdk-drag-animating {
		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
	}

	.mat-expansion-panel {
		grid-column: 1 / -1;

		.expansion-container {
			display: grid;
			grid-template-columns: 1fr;
		}

		.expansion-content {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-column-gap: 15px;
		}

		.expansion-ip-content {
			display: grid;
			grid-template-columns: auto 1fr 1fr auto;
			grid-column-gap: 10px;
		}

		.expansion-description {
			justify-content: end;
		}

		.expansion-content-profile {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 15px;

			.mat-mdc-form-field {
				height: fit-content;
			}

			div.profile-order {
				display: grid;
				grid-template-columns: 1fr;

				.drop-list {
					display: grid;
					grid-template-columns: 1fr;
					padding: 0;

					&:last-child {
						border: none;
						box-shadow: none;
					}

					.drop-list.cdk-drop-list-dragging .drop-list-item:not(.cdk-drag-placeholder) {
						transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
					}
				}
			}
		}
	}

	small {
		grid-column: 2;
		justify-self: start;

		&.input-warning {
			border-radius: 4px;

			&::before {
				content: "⚠";
			}
		}
	}

	div {
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 5px;
		display: grid;
	}

	.buttons {
		grid-column-end: -1;
		justify-self: end;
	}
}

@media(max-width: 1230px) {
	form {
		grid-template-columns: 1fr 1fr;
	}
}

@media(max-width: 840px) {
	form {
		grid-template-columns: 1fr;

		.mat-expansion-panel .expansion-content-profile {
			grid-template-columns: 1fr;
		}

		fieldset div, .mat-expansion-panel .expansion-content {
			grid-template-columns: 1fr 1fr;
		}
	}
}
