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

.financials {
	.mainContent {
		.selectCompaniesContainer {
			& > label {
				font-size: 1.125em;
				font-weight: 600;
			}

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

		.financialsContainer {
			max-width: 867px;
			margin: auto;

			@media (max-width: 1400px) {
				width: auto;
				margin-left: 50px;
			}

			& > div > h3 {
				font-weight: 700;
				color: var(--primary-color);
				font-size: 1.125em;
			}

			.homePage {
				.table {
					display: grid;
					grid-template-columns: 350px 430px 90px;
					margin-top: 45px;
					padding-bottom: 8px;
					border-bottom: 1px solid $dark;

					@media (max-width: 1300px) {
						grid-template-columns: 250px 400px 100px;
					}

					@media (max-width: 1000px) {
						grid-template-columns: 250px 300px 100px;
					}

					@media (max-width: 880px) {
						grid-template-columns: repeat(3, 1fr);
					}

					p {
						color: $font-grey-darker;

						&:last-child,
						&:last-of-type {
							justify-self: end;

							span {
								padding-right: 14px;
							}
						}
					}
				}

				.financialsListForm {
					@media (max-width: 1300px) {
						label {
							grid-template-columns: 40px 250px 150px 300px;
						}
					}

					@media (max-width: 1000px) {
						label {
							grid-template-columns: 40px 250px 100px 300px;
						}
					}

					@media (max-width: 880px) {
						label {
							grid-template-columns: 40px 200px 100px 200px;
							align-items: center;
						}
					}

					@media (max-width: 780px) {
						label {
							grid-template-columns: 40px 200px 100px 100px;
							align-items: center;
						}
					}
				}
			}

			.addIcon {
				display: flex;
				align-items: center;
				margin: 45px auto;
				width: 250px;

				button {
					background-color: var(--primary-color);
				}
			}
		}

		.collapseContainer,
		.collapseContainerGreen {
			background-color: transparentize($primary, 0.77%);
			background-color: #f2e3e4;
			color: $red;
			position: relative;
			padding: 45px 12px;
			text-align: center;
			margin: 0 auto;
			max-width: 555px;

			svg {
				position: absolute;
				top: 12px;
				right: 12px;
				transition: all 0.2s ease-in-out;
				fill: $red;
				transform: scale(1.714);

				&:hover {
					cursor: pointer;
					transform: scale(1.9);
				}
			}

			p {
				margin-bottom: 8px;
			}

			div p:first-of-type {
				font-weight: 600;
			}
		}

		.collapseContainerGreen {
			background-color: transparentize($green, 0.77%);
			color: var(--primary-color);

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

		.financialsList {
			display: grid;
			grid-template-columns: repeat(3, 1fr);

			.financialsListForm {
				label {
					list-style-type: none;
					padding: 15px 0;
					cursor: pointer;
					display: grid;
					grid-template-columns: 40px 300px 250px 300px;
					justify-items: start;
					align-items: center;

					@media (max-width: 900px) {
						grid-template-columns: 20px 300px 20px 200px;
						font-size: 14px;
					}

					p:nth-child(4) {
						justify-self: end;
						margin-right: 20px;

						button {
							min-width: 20px;

							&:hover {
								background-color: white;
							}

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

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

					input[type='checkbox'] {
						margin: 0 0 10px;
						accent-color: var(--primary-color);
						height: 15px;
						width: 15px;
					}
				}
			}

			.formAdvisor {
				label {
					list-style-type: none;
					padding: 15px 0;
					cursor: pointer;
					display: grid;
					grid-template-columns: 50px 300px 250px 300px;
					justify-items: start;
					align-items: center;

					p:first-of-type {
						margin: auto 0;
					}

					p:nth-child(4) {
						justify-self: end;
						margin-right: 20px;

						button {
							min-width: 20px;

							&:hover {
								background-color: white;
							}

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

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

		//.selectCompaniesContainer {
		//  text-align: center;
		//  margin-bottom: 50px;
		//
		//  .selectCompaniesBox {
		//    div {
		//      background-color: red;
		//      width: 340px;
		//      text-align: start;
		//      box-shadow: 0 3px 13px 0 $dropShadow;
		//
		//      * {
		//        border: none;
		//        border-radius: 10px;
		//      }
		//    }
		//  }
		//}
	}
}

@keyframes scale {
	0% {
		transform: scaleX(1);
	}

	50% {
		transform: scaleX(1.1);
	}

	100% {
		transform: scaleX(1);
	}
}

.scalePopup {
	animation-name: scale;
	animation-duration: 1s;
}

.selectCompaniesContainer,
.selectCompaniesContainer2 {
	text-align: center;
	margin-bottom: 50px;

	.selectCompaniesBox {
		div {
			width: 340px;
			text-align: start;
			box-shadow: 0 3px 13px 0 $dropShadow;

			* {
				border: none;
				border-radius: 10px;
			}
		}
	}
}

.selectCompaniesContainer2 {
	margin-bottom: 0;
}