:host {
  /**
  * @prop --klevu-drawer-max-width max-content: maxium width of drawer content
  * @prop --klevu-drawer-background-color rgba(0,0,0,0.2): color of backround overlay
  * @prop --klevu-drawer-width 400px: width of drawer
  * @prop --klevu-drawer-y-padding var(--klevu-spacing-04): padding on top and bottom of drawer
  */
  display: block;
  --ypadding: var(--klevu-drawer-y-padding, var(--klevu-spacing-04));
  --max-width: var(--klevu-drawer-max-width, max-content);
  --width: var(--klevu-drawer-width, 400px);
  --background-color: var(--klevu-drawer-background-color, rgba(0, 0, 0, 0.2));
}

.drawer {
  position: fixed;
  top: 0;
  height: 100vh;
  max-width: var(--max-width);
  z-index: 1000;
  background: #fff;
  transition: left 0.4s, right 0.4s;
  width: var(--width);
}

.drawer.left {
  left: -100%;
  border-right: 1px solid var(--klevu-color-neutral-3);
}

.drawer.right {
  right: -100%;
  border-left: 1px solid var(--klevu-color-neutral-3);
}

.drawer.left.show {
  left: 0;
}

.drawer.right.show {
  right: 0;
}

.background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--background-color);
  z-index: 999;
}

.background.show {
  display: block;
}

.innercontainer {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.insertypadding {
  padding: 0 var(--ypadding);
}