/* -------------------------------- 

File#: _1_drawer
Title: Drawer
Descr: A slide-in panel used to display critical content
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --drawer-width: 400px;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 0.8s infinite linear;
  animation: load8 0.8s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.drawer {
  position: fixed;
  z-index: 100;
  height: 100%;
  width: 100%;
  max-width: var(--drawer-width);
  top: 0;
  right: 0;
  visibility: hidden;
  transition: visibility 0s 0.3s;
}
.drawer:focus {
  outline: none;
}

.drawer--is-visible {
  visibility: visible;
  transition: none;
}

.drawer--open-left {
  right: auto;
  left: 0;
}

.drawer__content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  transition-timing-function: var(--ease-in-out);
}
.drawer--open-left .drawer__content {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.drawer--is-visible .drawer__content {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.drawer__body {
  height: 100%;
  overflow: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  
  background: #fff;
}

.drawer__close-btn {
  --size: 32px;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: hsla(var(--color-bg-light-h), var(--color-bg-light-s), var(--color-bg-light-l), 0.95);
  box-shadow: var(--inner-glow), var(--shadow-sm);
  transition: 0.2s;
}
.drawer__close-btn:hover {
  background-color: var(--color-bg-lighter);
  box-shadow: var(--inner-glow), var(--shadow-md);
}
.drawer__close-btn .icon {
  display: block;
  color: var(--color-contrast-high);
}

.drawer--modal {
  max-width: none;
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
  transition: background-color 0.3s, visibility 0s 0.3s;
}
.drawer--modal.drawer--is-visible {
  background-color: rgba(0,0,0,.75);
  transition: background-color 0.3s;
}
.drawer--modal.drawer--open-left .drawer__content {
  right: auto;
  left: 0;
}
.drawer--modal .drawer__content {
  max-width: var(--drawer-width);
}

.drawerHeader {
	position: fixed;
	top:0;
	width: 100%;
	background: rgba(255,255,255,.8);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	border-bottom: 1px solid rgba(0,0,0,.05);
	
	padding:20px;
	margin-bottom: 10px;
}
	.drawerHeader h3 {
		font-size: 20px;
		font-weight: 500;
		
		padding-bottom: 0px;
		margin-bottom: 0px;
	}
	
	.drawerHeader .drawerCloseButton {
		text-align: center;
		justify-content: center;
		display: flex;
		align-items: center;

		width: 32px;
		height: 32px;
		background: #F4F4F4;
		
		border-radius: 4px;
	}
		.drawerHeader .drawerCloseButton:hover {
			background: #E8E8E8;
		}

.drawer_product_list_widget {
	margin-top: 70px;
	padding:10px 0px 320px 0px;
}
	.drawer_product_list_widget li.mini_cart_item {
		padding:10px 20px 10px 20px;
		position: relative;
	}

	.drawer_product_list_widget li.mini_cart_item .cartItemControls {
		position: absolute;
		height:100%;
		position: absolute;
		top:0;
		right:0;
		background: rgba(255,255,255,.4);
		
		opacity: 0;
		
		transition: .2s all;
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		padding: 20px;
	}
		.drawer_product_list_widget li.mini_cart_item .cartItemControls .showButton {
			padding: 8px;
			text-align: center;
			background: #1e7abe;
			off-backdrop-filter: blur(6px);
			off--webkit-backdrop-filter: blur(6px);						
			color: #fff;
			font-size: 16px;
			font-weight: 600;
			border-radius: 8px;
			flex:1;
			
			max-width: 200px;
			
			cursor: pointer;
			
			display: none;
		}
			.drawer_product_list_widget li.mini_cart_item .cartItemControls .showButton {
				opacity: .8;
			}
		.drawer_product_list_widget li.mini_cart_item .cartItemControls .deleteButton {
			background: #EB4D4B;
			border-radius: 8px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 10px;
			padding: 8px;
			cursor: pointer;
		}
			.drawer_product_list_widget li.mini_cart_item .cartItemControls .deleteButton:hover {
				opacity:.8;
			}
			
		.drawer_product_list_widget li.mini_cart_item:hover > .cartItemControls {
			opacity: 1;
			
			off-backdrop-filter: blur(6px);
			off--webkit-backdrop-filter: blur(6px);			
		}
	

	
.drawerFooter {
	background: #EBF4F8;
	
	position: fixed;
	width: 100%;
	-xheight: 250px;
	
	bottom: 0;
	left:0;
	right: 0;
}

.drawerCartSubtotal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	padding:20px 20px 10px 20px;
}
	.drawerCartSubtotal .drawerCartSubtotalLabel {
		font-size: 18px;
		font-weight: 500;
		color: #1F7ABE;
	}
	.drawerCartSubtotal .drawerCartSubtotalAmount {
		font-size: 18px;
		font-weight: 500;
		color: rgba(0,0,0,.8);
	}	

.drawerCartButtons {
	padding: 0px 20px 0px 20px;
}
	.drawerCartButtons .buttons a {
		display: block;
		margin-bottom: 10px;
		text-align: center;
	}
		.drawerCartButtons .buttons a.button.checkout {
			background-color: #8ebcde;
			border-color: #8ebcde;
			color: #fff;			
		}

.drawerCartShippingCostWrapper {
	padding: 0px 20px 0px 20px;
}

.drawerCartShippingCostWidget {
	display: flex;
	justify-content: center;
	align-items: center;
	
	background: rgba(106, 176, 76, 0.17);
	color: #6AB04C;
	padding: 16px;
	border-radius: 8px;
	text-align: center;
	
	margin-bottom: 10px;
}
	.drawerCartShippingCostWidget img {
		margin-right: 10px;
	}
	.drawerCartShippingCostWidget p {
		margin: 0;
		padding: 0;
		font-weight: 500;
	}

@media (max-width: 1286px) {
	.drawer {
		z-index: 6000;
	}
}

@media (max-width: 767px) {
	.drawer {
		z-index: 6000;
		max-width: 100%;
	}
	.drawer--modal .drawer__content {
		max-width: 100%;
	}
}