@import 'src/Components/GlobalStyles/colors';
@import 'src/Components/GlobalStyles/mixins';

.companiesContainer {
	@media (max-width: 1400px) {
		margin-left: 0;
	}

	@media (max-width: 1200px) {
		margin-left: 0;
	}

	.companiesContext {
		.inputLabelContainer {
			@include InputLabelContainer;

			grid-template-columns: 170px 1fr;

			input {
				width: auto;
			}

			label {
				text-align: left;
				margin-bottom: 5px;
			}
		}

		.addCompanyContainer {
			h3 {
				text-align: center;
				margin-bottom: 20px;
			}

			.formGroup {
				display: flex;
				flex-direction: column;
				gap: 10px;

				@media (max-width: 1200px) {
					justify-content: center;
				}

				@media (max-width: 900px) {
					gap: 10px;
					align-items: center;
					justify-items: center;
				}

				div {
					border-radius: 10px;
					margin: 0;
				}
			}

			padding: 50px;
			width: 800px;
			height: 55vh;
			margin: 0 auto;
			//background-color: $light-grey;
			border-radius: 10px;

			@media (max-width: 1200px) {
				width: auto;
				height: auto;
				justify-content: center;
			}

			label {
				color: $font-grey-darker;
			}

			input::placeholder {
				color: $font-light-grey;
			}

			.selectContainer {
				display: grid;
				grid-template-columns: 170px 1fr;
				align-items: center;
				margin-right: 40px;
				color: $font-light-grey;

				&:nth-child(4) {
					grid-template-columns: 170px 150px;

					input {
						width: 150px;
					}
				}

				@media (max-width: 1200px) {
					width: 325px;
				}

				label {
					margin-bottom: 5px;
				}

				form {
					@media (max-width: 1200px) {
						width: 330px;
					}

					div {
						width: 100%;

						div {
							border: none;

							fieldset {
								border: none;
							}

							svg {
								color: var(--primary-color);
							}
						}
					}
				}
			}

			.selectContainerBox {
				@include CustomSelectDropdown;
			}

			.saveCancelButtons {
				@media (max-width: 1200px) {
					display: flex;
					justify-content: center;
				}

				.submitButton {
					background-color: var(--primary-color);
					color: white;
					padding: 15px 70px;
					border-radius: 10px;
					margin-top: 80px;
					margin-right: 20px;

					.saveButtonIcon {
						padding-right: 10px;
						margin-top: 5px;
					}
				}

				.cancelButton {
					background-color: transparent;
					color: $font-light-grey;
					padding: 15px 70px;
					margin-top: 80px;

					@media (max-width: 1200px) {
						border: 1px solid $font-light-grey;
					}

					&:hover {
						background-color: darken($font-light-grey, 10%);
						color: $font-light-grey;
					}
				}
			}
		}
	}
}