@mixin flex-row {
	display: flex;
	flex-direction: row;
}

@mixin flex-column {
	display: flex;
	flex-direction: column;
}

.contact-layout {
	padding: 32px 256px 20px 256px;
	display: flex;
	width: 100%;
	flex-direction: column;
	row-gap: 32px;
	font-family: 'Manrope';

    .base-block {
        @include flex-column();
        row-gap: 32px;

		& > .contacts-list {
			& > ul {
				display: flex;
				flex-direction: column;
				row-gap: 20px;
				list-style-type: disc;

				& > li {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.controls-block {
                        @include flex-column();

                        & .inside-button {
                            @include flex-row();
                            width: 100%;
                            justify-content: space-between;
                            color: rgba(60, 60, 67, 0.7);
                        }
                    }
				}
			}
			.contact-item {
				display: flex;
				flex-direction: column;
				row-gap: 10px;
	
				& > .phone-block {
					@include flex-row();
	
					& > div:nth-child(1) {
						color: grey;
						margin-right: 20px;
					}
				}
			}

		}

		& > .toggle-block {
			@include flex-row();
			justify-content: space-between;
			align-items: center;

			& > div:nth-child(1) {
				font-family: Manrope;
				font-size: 20px;
				font-weight: 500;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: left;
			}
		}

		.success-message {
			@include flex-row();
			column-gap: 16px;
			margin-top: 32px;
		}

        & > div:nth-child(1) {
            font-size: 24px;
            font-weight: 700;         
        }
    }

	.nav-block {
		.button-label {
			@include flex-row();
			column-gap: 4px;
		}

	}
}


.save-changes-block {
	@include flex-row();
	justify-content: space-between;
}

.delete-contact-form-layout {
	position: absolute;
	top: 50%;
	left: 30vw;
	transform: translate(0%, 70%);
	width: 520px;
	height: auto;
	padding: 20px 22px 20px 22px;
	border-radius: 12px;
	background-color: white;

	& > .delete-dialog-block {
        @include flex-column();
        row-gap: 32px;
		& > div:nth-child(1) {
			display: flex;
			justify-content: space-around;
		}
	}
}

.edit-contact-form-layout {
	position: absolute;
	top: 0%;
	left: 30vw;
	transform: translate(0%, 50%);
	width: 620px;
	height: 400px;
	padding: 20px 32px 20px 32px;
	border-radius: 12px;
	background-color: white;

	.edit-contact-form {
        @include flex-column();
        row-gap: 32px;
		margin-top: 12px;

		& > .form-title {
			font-family: Manrope;
			font-size: 20px;
			font-weight: 500;
			line-height: 24px;
			letter-spacing: 0px;
			display: flex;
			justify-content: space-around;
		}

		.save-changes-block {
			@include flex-row();
			justify-content: space-between;
		}
	}
}