:root {
	 --drawer-width: 400px;
	 --color-bg: #FFF;
	 --shadow-md: none;
	 --ease-in-out: 0.3;
}
 .drawer {
	 position: fixed;
	 z-index: var(--zindex-overlay);
	 width: 100%;
	 max-width: var(--drawer-width);
	 height: 100%;
	 top: 0;
	 right: 0;
	 visibility: hidden;
	 transition: visibility 0s 0.3s;
}
 .drawer:focus {
	 outline: none;
}
 .drawer--is-visible {
	 visibility: visible;
	 transition: none;
	 z-index: 99;
}
 .drawer--open-left {
	 right: auto;
	 left: 0;
}
 .drawer__content {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 top: 0;
	 right: 0;
	 background-color: var(--color-bg);
	 box-shadow: var(--shadow-md);
	 transform: translateX(100%);
	 transition: transform 0.3s;
	 transition-timing-function: var(--ease-in-out);
}
 .drawer--open-left .drawer__content {
	 transform: translateX(-100%);
}
 .drawer--is-visible .drawer__content {
	 transform: translateX(0);
}
 .drawer__body {
	height: 100%;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	border-radius: 0;
}
 .drawer__close-btn {
	 z-index: var(--zindex-fixed-element);
	 top: var(--space-xxs);
	 right: var(--space-xxs);
	 width: 2em;
	 height: 2em;
	 display: flex;
	 flex-shrink: 0;
	 justify-content: center;
	 align-items: center;
	 border-radius: 50%;
	 background-color: alpha(var(--color-bg), 0.95);
	 box-shadow: var(--shadow-sm);
	 transition: 0.2s;
}
 .drawer__close-btn:hover {
	 background-color: var(--color-bg);
	 box-shadow: var(--shadow-md);
}
 .drawer__close-btn .icon {
	 display: block;
	 color: var(--color-contrast-high);
}
 .drawer__header {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 flex-shrink: 0;
	 padding: var(--space-xs) var(--component-padding);
	 border-bottom: 1px solid var(--color-contrast-lower);
}
 .drawer--modal {
	 max-width: none;
	 background-color: alpha(var(--color-contrast-higher), 0);
	 transition: background-color 0.3s, visibility 0s 0.3s;
}
 .drawer--modal.drawer--is-visible {
	 background-color: alpha(var(--color-contrast-higher), 0.6);
	 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);
}
.badge {
	padding-left: 9px;
	padding-right: 9px;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	position: absolute;
	background: red;
	bottom: -5px;
	right: -5px;
	font-size: 0.5em;
	padding: 0.2em 0.6em;
}