/******************************************/
/* Wp Header Style Start
/******************************************/
#{$parent-class} {
	#wpcontent {
		position: relative;
	}

	#wpbody {
		padding-top: 56px;

		@include respond (phone) {
			padding-top: 90px;
		}
	}

	&.folded {
		#wpheader {
			width: calc(100% - 36px);
			margin-left: 36px;
		}
	}

	&.auto-fold {
		@include respond (tabland) {
			#wpheader {
				width: calc(100% - 36px);
				margin-left: 36px;
			}
		}
	}

	#wpheader {
		width: 100%;
		margin-left: 160px;
		width: calc(100% - 160px);
		height: 56px;
		position: fixed;
		overflow: hidden;
		left: 0;
		top: 32px;
		background: $white;
		box-shadow: 0 1px 8px rgba(#000, 0.1);
		padding: 8px 25px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 9;

		@include respond (tabport) {
			top: 46px;
			width: 100% !important;
			margin-left: 0 !important;
			padding: 8px 16px;
		}
	}

	.wpheader {
		&__logo {
			width: 36px;
			aspect-ratio: 1/1;
			border-radius: 8px;
			background-color: $white;
			border: 1px solid rgba($primary, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			transition: $transition;
			box-shadow: 0px 0px 2px rgba($primary, 0.1);
			
			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				object-position: center;
				padding: 4px;
				box-sizing: border-box;
			}
			
			&:hover {
				// background-color: rgba($primary, 0.2);
				// border-color: rgba($primary, 0.4);
				box-shadow: 1px 2px 6px rgba($primary, 0.5);
			}
		}

		&__title {
			display: flex;
			align-items: center;
			gap: 6px;

			&>a {
				text-decoration: none;
			}

			small {
				color: rgba($content, 0.7);
				font-size: 0.9em;

				@include respond (phone-sm) {
					font-size: 0.8em;
				}
			}

			h2 {
				font-size: 1.25em;
				margin: 0;

				@include respond (phone-sm) {
					font-size: 1em;
				}
			}

			@include respond (phone) {
				.btn {
					display: none;
				}
			}
		}

		&__name {
			margin-right: 8px;
		}

		&__meta {
			display: flex;
			align-items: center;
			gap: 8px;

			&__icon {
				width: 32px;
				aspect-ratio: 1/1;
				background-color: transparent;
				border-radius: 0;
				border: none;
				color: rgba($primary, 1);
				cursor: pointer;
				transition: $transition;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				text-decoration: none;

				@include respond (phone-sm) {
					width: 25px;
				}

				&::after {
					display: flex;
					justify-content: center;
					background: #764e9d;
					color: $white;
					border-radius: 8px;
					content: attr(title);
					/* margin: -82px auto 0; */
					font-size: 12px;
					padding: 6px 10px;
					width: auto;
					transition: 150ms all ease-in-out;
					opacity: 0;
					z-index: 9;
					line-height: 12px;
					position: absolute;
					white-space: nowrap;
					top: -13px;
					transform: scale(0.25);
					transform-origin: bottom;
				}

				&::before {
					content: '';
					width: calc(100% + 6px);
					height: calc(100% + 6px);
					border-radius: 50%;
					background-color: rgba($primary, 0.2);
					position: absolute;
					// transform: scale(0);
					transform: translate(-50%, -50%) scale(0);
					top: 50%;
					left: 50%;
					transition: 350ms all cubic-bezier(0.18, 0.89, 0.32, 1.28);
					box-shadow: none;
				}

				&:focus {
					box-shadow: none;
				}

				&:hover {
					&::before {
						transform: translate(-50%, -50%) scale(1);
					}

					&::after {
						transition-delay: 100ms;
						opacity: 1;
						transform: scale(1);
					}
				}

				&>i,
				&>span {
					font-size: 2em;
					width: initial;
					height: initial;

					@include respond (phone-sm) {
						font-size: 1.5em;
					}
				}
			}
		}
	}
}

/******************************************/
/* Wp Header Style End
/******************************************/