.mobile-sidebar-panel__button {
	top: 30%;
	right: 0;
	z-index: 100;
	background-color: #ffffff;
	box-shadow: 0 .2rem .6rem rgba( 0, 0, 0, 0.1);
	padding: 13px 11.5px;
	cursor: pointer;

	.ecomus-svg-icon {
		color: var(--em-color__dark);
		@include font-size(17/16);
	}

	.button-text {
        padding: 0;
        width: 100%;
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        color: $color__dark;
        transition: padding .8s cubic-bezier(.175,.885,.32,1.15), max-width .4s cubic-bezier(.175,.885,.32,1.15);
    }

    &:hover {
        .button-text {
            padding-left: 11.5px;
            max-width: 150px;
        }
    }

	&:not(.mobile-sidebar-position--left) {
		.ecomus-svg-icon {
			transition: padding .2s linear;
		}
		&:hover {
			.ecomus-svg-icon {
				padding-right: 11.5px;
			}

			.button-text {
				padding-left: 0;
				max-width: 150px;
			}
		}
	}
}

.mobile-sidebar-position--left {
	left: 0;
	right: auto;
}

.single-post {
	.sidebar__header {
		background-color: #f2f2f2;

		&:after {
			display: none;
		}
	}
}

@media (min-width: 1025px) {
	.ecomus-blog-page .mobile-sidebar-panel__button,
	.ecomus-blog-page .blog-sidebar .sidebar__header,
	.ecomus-blog-page .blog-sidebar .sidebar__container > .sidebar__button-close,
	.em-post-layout-expanded .mobile-sidebar-panel__button,
	.em-post-layout-expanded .blog-sidebar .sidebar__header,
	.em-post-layout-expanded .blog-sidebar .sidebar__container > .sidebar__button-close,
	.catalog-sidebar .sidebar__header,
	.catalog-sidebar .sidebar__container > .sidebar__button-close {
		display: none;
	}

	.single-post {
		&.em-post-layout-icon {
			.offscreen-panel {
				--em-panel-content-width: 405px;

				.sidebar__backdrop {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					cursor: pointer;
					background-color: rgba( 0, 0, 0, 0.2);
				}
			}

			.offscreen-panel--side-right {
				.sidebar__container {
					left: 0;
					right: auto;
					transform: translateX(-100%);
				}
			}

			.offscreen-panel--open {
				.sidebar__container {
					transform: none;
				}
			}

			.sidebar__header {
				padding: 18px 20px 18px;
				@include font-size(20/16);
				line-height: 1;
				color: $color__dark;
				font-weight: 400;
				text-transform: uppercase;
				position: relative;
			}

			.sidebar__container {
				position: absolute;
				right: 0;
				top: 0;
				height: 100%;
				max-width: var(--em-panel-content-width);
				width: 100%;
				margin: 0;
				background-color: #fff;
				box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);;
				transform: translateX(100%);
				transition: transform 0.5s;
				display: flex;
				flex-direction: column;
			}

			.sidebar__button-close {
				position: absolute;
				right: 20px;
				top: 20px;
				cursor: pointer;
				@include font-size(1);
				color: var(--em-color__dark);
				z-index: 9;
			}

			.sidebar__content {
				@include scrollbar();
				overflow-y: auto;
				overflow-x: hidden;
				padding-left: 20px;
				padding-right: 20px;
				padding-top: 20px;
			}
		}

		&.em-post-layout-expanded:not(.no-sidebar) {
			.entry-content {
				display: flex;
				flex-wrap: wrap;

				.entry-single-content {
					flex: 0 0 68%;
					width: 68%;
				}

				.widget-area {
					flex: 0 0 32%;
					width: 32%;
				}
			}

			&.content-sidebar {
				.entry-content {
					.entry-single-content {
						padding-right: 15px;
					}

					.widget-area {
						padding-left: 15px;
					}
				}

			}

			&.sidebar-content {
				.entry-content {
					.entry-single-content {
						order: 2;
						padding-left: 15px;
					}

					.widget-area {
						padding-right: 15px;
					}
				}

			}
		}
	}
}

@media (max-width: 1024px) {
	.mobile-sidebar-panel__button {
        .button-text {
            display: none;
        }
    }

	.offscreen-panel {
		.sidebar__backdrop {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
			background-color: rgba( 0, 0, 0, 0.2);
		}
	}

	.offscreen-panel--side-right {
		.sidebar__container {
			left: 0;
			right: auto;
			transform: translateX(-100%);
		}
	}

	.offscreen-panel--open {
		.sidebar__container {
			transform: none;
		}
	}

	.sidebar__header {
		padding: 16px 20px 15px;
		@include font-size(1);
        line-height: 1;
		color: $color__dark;
		font-weight: 400;
        text-transform: uppercase;
		position: relative;

		&:after {
			content: '';
			width: calc( 100% - 32px );
			height: 1px;
			background-color: $color__border-main;
			position: absolute;
			left: 16px;
			right: 16px;
			bottom: 0;
		}
	}

	.sidebar__container {
		--em-panel-content-width: 375px;
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 100%;
		max-width: var(--em-panel-content-width);
		margin: 0;
		background-color: #fff;
		box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);;
		transform: translateX(100%);
		transition: transform 0.5s;
		display: flex;
		flex-direction: column;
	}

	.sidebar__button-close {
        position: absolute;
        right: 20px;
        top: 13px;
        cursor: pointer;
        @include font-size(1);
        color: var(--em-color__dark);
		z-index: 9;
    }

	.sidebar__content {
		@include scrollbar();
		overflow-y: auto;
		overflow-x: hidden;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 20px;
	}
}

@media ( max-width: 767px ) {
	.sidebar__container {
		--em-panel-content-width: 90%;
	}

	.catalog-sidebar {
		.sidebar__container {
			--em-panel-content-width: 310px;
		}

		.sidebar__header {
			background-color: #f2f2f2;
			@include font-size(12/16);
			font-weight: 600;
		}

		.widget {
			.widget-title, .widgettitle {
				@include font-size(1);
			}
		}
	}
}