.pet-edit {
	display: flex;
	padding: 22px 35px;

	.left {
		--size: 150px;
		flex: none;
		width: var(--size);

		.avatar-wrapper {
      flex: 1 0 auto;
      width: var(--size);
      height: var(--size);

			&:hover {
				cursor: pointer;

				.avatar {
					box-shadow: 0 0 0 71px transparentize(black, .15) inset;

					&::after {
						display: block;
					}
				}
			}

			&:not(.no-avatar) {
				padding: 4px;
				background: #785a28;

				.avatar::after {
					top: 43px;
					left: 43px;
				}
			}

			&.no-avatar {
				border-width: 4px;
			}
		}

		.avatar::after {
			position: absolute;
			top: 39px;
			left: 39px;
			display: none;
      content: "\E91a";
      width: 64px;
      height: 64px;
			font: 64px/64px TDE Heroes;
			color: var(--headings-color);
			text-align: center;
		}

		.btn {
			margin-top: 24px;
		}
	}

	.right {
		margin-left: 35px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		> div {
			flex: none;
		}

		.row {
			display: flex;
			margin-bottom: 20px;
			width: 100%;

			> div {
				flex: 1 1 100%;
				margin: 0;
				width: auto;

				&:not(:last-child) {
					margin-right: 10px;
				}
			}
		}
	}
}
