/**
 * Nav menu sidebar
 */

.newspack-my-account {
	@media ( max-width: 767px ) {
		&.navigation-open {
			.woocommerce-MyAccount-navigation,
			.woocommerce-MyAccount-content,
			.newspack-my-account__navigation-topbar {
				transform: translateX(-100vw);
			}
		}
	}
	&__navigation-topbar {
		background-color: var(--newspack-ui-color-neutral-0);
		border-bottom: 1px solid var(--newspack-ui-color-border);
		align-items: center;
		display: flex;
		justify-content: space-between;
		left: 0;
		padding: 0 var(--newspack-ui-spacer-3);
		position: fixed;
		top: 0;
		transition: transform 0.25s ease-in-out;
		width: 100%;
		z-index: 1;
		@media ( min-width: 768px ) {
			display: none;
			transform: none;
		}
	}
	a.newspack-my-account__home-link {
		background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 0.500024L2 6.00002L7 11.5' stroke='%236C6C6C' stroke-width='1.5'/%3E%3C/svg%3E%0A");
		background-position: 0 50%;
		background-repeat: no-repeat;
		color: var(--newspack-ui-color-neutral-60, #6c6c6c);
		display: block;
		font-weight: 600;
		margin-right: var(--newspack-ui-spacer-3);
		padding: var(--newspack-ui-spacer-3);
		text-decoration: none;
	}
	button.newspack-my-account__icon-button {
		background-color: transparent;
		background-position: center;
		background-repeat: no-repeat;
		border: none;
		display: block;
		height: 14px;
		width: 14px;
		&--open-navigation {
			background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.25 16.4371C6.16445 15.2755 5.5 13.7153 5.5 12C5.5 8.41015 8.41015 5.5 12 5.5C15.5899 5.5 18.5 8.41015 18.5 12C18.5 13.7153 17.8356 15.2755 16.75 16.4371V16C16.75 14.4812 15.5188 13.25 14 13.25L10 13.25C8.48122 13.25 7.25 14.4812 7.25 16V16.4371ZM8.75 17.6304C9.70606 18.1835 10.8161 18.5 12 18.5C13.1839 18.5 14.2939 18.1835 15.25 17.6304V16C15.25 15.3096 14.6904 14.75 14 14.75L10 14.75C9.30964 14.75 8.75 15.3096 8.75 16V17.6304ZM4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z' fill='%231E1E1E'/%3E%3C/svg%3E%0A");
		}
		&--close-navigation {
			background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.40456 1L15 15M1 15L14.5954 1' stroke='%231E1E1E' stroke-width='1.5'/%3E%3C/svg%3E%0A");
			margin-bottom: var(--newspack-ui-spacer-5);
			margin-left: auto;
			margin-right: 0;
			@media ( min-width: 768px ) {
				display: none;
			}
		}
	}
	.woocommerce-MyAccount-navigation {
		background-color: var(--newspack-ui-color-neutral-0);
		display: flex;
		flex-direction: column;
		float: none;
		font-family: var(--newspack-ui-font-family);
		font-size: var(--newspack-ui-font-size-s);
		justify-content: space-between;
		height: 100vh;
		left: 100vw;
		line-height: var(--newspack-ui-line-height-s);
		overflow-y: auto;
		padding: var(--newspack-ui-spacer-5);
		position: fixed;
		transition: transform 0.25s ease-in-out;
		top: 0;
		z-index: 2;
		@media ( min-width: 768px ) {
			border-right: 1px solid var(--newspack-ui-color-border);
			font-size: var(--newspack-ui-font-size-xs);
			left: 0;
			line-height: var(--newspack-ui-line-height-xs);
			padding-bottom: var(--newspack-ui-spacer-9);
			padding-top: var(--newspack-ui-spacer-9);
			transform: none;
			transition: none;
			width: 300px;
		}
		.newspack-my-account__site-logo {
			display: none;
			height: 48px;
			margin-bottom: var(--newspack-ui-spacer-6);
			margin-left: var(--newspack-ui-spacer-3);
			img {
				height: auto;
				max-height: 100%;
				max-width: 100%;
				width: auto;
			}
			@media ( min-width: 768px ) {
				display: block;
			}
		}
		.newspack-my-account__home-link {
			display: none;
			margin-bottom: var(--newspack-ui-spacer-2);
			margin-left: var(--newspack-ui-spacer-3);
			margin-top: 0;
			@media ( min-width: 768px ) {
				display: block;
			}
		}
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		li {
			font-size: inherit;
			line-height: inherit;
			a {
				align-items: center;
				border-radius: var(--newspack-ui-border-radius-m);
				display: flex;
				font-weight: 600;
				margin-left: 0;
				margin-right: 0;
				padding: var(--newspack-ui-spacer-2) var(--newspack-ui-spacer-3);
				text-decoration: none;
				&:hover {
					background: var(--newspack-ui-color-neutral-5);
					color: var(--newspack-ui-color-neutral-90);
				}
			}
			&.is-active a {
				background-color: var(--newspack--my-account--color--accent);
				color: var(--newspack--my-account--color--contrast);
			}
		}
		.newspack-my-account__navigation-footer {
			margin-top: var(--newspack-ui-spacer-5);
			padding: 0 var(--newspack-ui-spacer-3);
			li {
				a {
					margin-left: calc(var(--newspack-ui-spacer-3) * -1);
					margin-right: calc(var(--newspack-ui-spacer-3) * -1);
				}
				&.newspack-my-account__navigation-footer-item a {
					color: var(--newspack-ui-color-neutral-60, #6c6c6c);
					font-size: var(--newspack-ui-font-size-xs);
					font-weight: 400;
					margin: 0;
					padding: calc(var(--newspack-ui-spacer-base) * 0.75) 0;
					text-decoration: underline;
					&:hover {
						background: none;
						color: inherit;
						text-decoration: none;
					}
				}
				&.woocommerce-MyAccount-navigation-link--customer-logout {
					border-top: 1px solid var(--newspack-ui-color-border);
					margin-top: var(--newspack-ui-spacer-3);
					a {
						background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.03 8.47L22.56 12L19.03 15.53L17.97 14.47L19.69 12.75H8.5V11.25H19.69L17.97 9.53L19.03 8.47ZM13.5 17C13.5 17.1326 13.4473 17.2598 13.3536 17.3536C13.2598 17.4473 13.1326 17.5 13 17.5H6C5.86739 17.5 5.74021 17.4473 5.64645 17.3536C5.55268 17.2598 5.5 17.1326 5.5 17V7C5.5 6.86739 5.55268 6.74021 5.64645 6.64645C5.74021 6.55268 5.86739 6.5 6 6.5H13C13.1326 6.5 13.2598 6.55268 13.3536 6.64645C13.4473 6.74021 13.5 6.86739 13.5 7V8.5H15V7C15 6.46957 14.7893 5.96086 14.4142 5.58579C14.0391 5.21071 13.5304 5 13 5H6C5.46957 5 4.96086 5.21071 4.58579 5.58579C4.21071 5.96086 4 6.46957 4 7V17C4 17.5304 4.21071 18.0391 4.58579 18.4142C4.96086 18.7893 5.46957 19 6 19H13C13.5304 19 14.0391 18.7893 14.4142 18.4142C14.7893 18.0391 15 17.5304 15 17V15.5H13.5V17Z' fill='currentColor'/%3E%3C/svg%3E%0A");
						background-position: calc(100% - var(--newspack-ui-spacer-3)) center;
						background-repeat: no-repeat;
						margin-top: var(--newspack-ui-spacer-5);
						&:hover {
							color: var(--newspack-ui-color-neutral-60, #6c6c6c);
						}
					}
				}
			}
		}
	}
}
