:host {
  /**
   * @prop --background: Background of the drawer content
   *
   * @prop --border-color: Border color of the drawer content
   * @prop --border-radius: Border radius of the drawer content
   * @prop --border-width: Border width of the drawer content
   * @prop --border-style: Border style of the drawer content
   *
   * @prop --min-width: Minimum width of the drawer
   * @prop --width: Width of the drawer
   * @prop --max-width: Maximum width of the drawer
   *
   * @prop --min-height: Minimum height of the drawer
   * @prop --height: Height of the drawer
   * @prop --max-height: Maximum height of the drawer
   *
   * @prop --backdrop-opacity: Opacity of the backdrop
   */
  --min-width: auto;
  --min-height: auto;
  --overflow: hidden;
  --border-width: 0;
  --border-style: none;
  --border-color: transparent;
  --background: var(--bkkr-overlay-background, var(--bkkr-background-color, #fff));
  --box-shadow: 0 15px 25px 0 rgba(var(--box-shadow-color, 0, 0, 0), 0.1), 0 6px 20px 0 rgba(var(--box-shadow-color, 0, 0, 0), 0.12), 0 13.2px 40px 0 rgba(var(--box-shadow-color, 0, 0, 0), 0.08);
  --width: calc(100% - var(--bkkr-spacer, 16px));
  --height: calc(100vw - var(--bkkr-spacer, 16px));
  --margin-bottom: calc(var(--safe-area-bottom) + (var(--bkkr-spacer, 16px) * 0.5));
  --max-width: 720px;
  --max-height: min(600px, calc(90vh - var(--safe-area-top)));
  --border-radius: 24px;
  --backdrop-opacity: var(--bkkr-backdrop-opacity, 0.3);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  align-items: flex-end;
  justify-content: center;
  transform-style: preserve-3d;
  outline: none;
  contain: strict;
}

:host(.overlay-hidden) {
  display: none;
}

.drawer-shadow,
.drawer-wrapper {
  margin-bottom: var(--margin-bottom);
  display: flex;
  position: relative;
  flex-direction: column;
  width: var(--width);
  min-width: var(--min-width);
  max-width: var(--max-width);
  height: calc(var(--height) - max(30px, var(--safe-area-top)) - 10px - var(--margin-bottom));
  min-height: var(--min-height);
  max-height: var(--max-height);
  transform: translate3d(0, 100%, 0);
  will-change: opacity, transform;
  z-index: 10;
}
.drawer-shadow {
  bottom: 0;
  border-radius: var(--border-radius);
  position: absolute;
  pointer-events: none;
  background: transparent;
  box-shadow: var(--box-shadow);
  overflow: var(--overflow);
}

.drawer-wrapper-inner {
  --safe-area-top: 0px;
  --safe-area-bottom: 0px;
  --safe-area-right: 0px;
  --safe-area-left: 0px;
  border-radius: var(--border-radius);
  display: flex;
  position: relative;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  background: var(--background);
  contain: content;
  overflow: var(--overflow);
  z-index: 10;
}

bkkr-content:first-child {
  --padding-top: 0px;
  --padding-bottom: calc(var(--bkkr-spacer, 16px) + var(--safe-area-bottom));
}

.drawer-handle {
  --offset-top: 34px;
}

.drawer-handle-wrapper {
  --handle-height: 6px;
  --handle-width: 64px;
  --handle-color: var(--bkkr-text-color, #000);
  --handle-transition: 0.2s transform cubic-bezier(0.25, 1.11, 0.78, 1.59), 0.2s box-shadow cubic-bezier(0.25, 1.11, 0.78, 1.59);
  --handle-transform: translate3d(0, -50%, 0);
  left: 50%;
  top: 0;
  position: absolute;
  width: var(--handle-width);
  height: 32px;
  transform: translateX(-50%);
  cursor: pointer;
  user-select: none;
  z-index: 12;
}
[dir=rtl] .drawer-handle-wrapper, :host-context([dir=rtl]) .drawer-handle-wrapper {
  left: unset;
  right: unset;
  right: 50%;
}

.drawer-handle-wrapper .drawer-handle-bar {
  left: 0;
  top: 50%;
  bottom: 0;
  border-radius: var(--handle-height);
  position: absolute;
  width: 100%;
  height: var(--handle-height);
  transform: var(--handle-transform);
  transition: var(--handle-transition);
  background-color: rgba(var(--bkkr-text-color-rgb, 0, 0, 0), 0.2);
  overflow: hidden;
}
[dir=rtl] .drawer-handle-wrapper .drawer-handle-bar, :host-context([dir=rtl]) .drawer-handle-wrapper .drawer-handle-bar {
  left: unset;
  right: unset;
  right: 0;
}

.drawer-handle-wrapper .drawer-handle-bar-fill {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--handle-color);
}

.drawer-handle-animated .drawer-handle-bar-fill {
  transform: scale(0, 1);
  transform-origin: left center;
  animation-name: countdown;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-delay: 400ms;
  animation-fill-mode: forwards;
}

@keyframes countdown {
  100% {
    transform: scale(1, 1);
  }
}
.drawer-handle-button {
  --handle-button-backround: var(--background);
  --handle-button-backround-hover: var(--background);
  --handle-button-backround-active: var(--background);
  --handle-button-color: var(--bkkr-text-color, #000);
  --handle-button-radius: 50%;
  --handle-button-transform: scale(1.1);
  --handle-button-transition: 0.2s transform cubic-bezier(0.32, 0.72, 0, 1), 0.2s background cubic-bezier(0.32, 0.72, 0, 1);
  right: var(--bkkr-spacer);
  top: -48px;
  border-radius: var(--handle-button-radius);
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  transition: var(--handle-button-transition);
  background: var(--handle-button-backround);
  color: var(--handle-button-color);
  box-shadow: var(--box-shadow);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  z-index: 12;
}
[dir=rtl] .drawer-handle-button, :host-context([dir=rtl]) .drawer-handle-button {
  left: unset;
  right: unset;
  left: var(--bkkr-spacer);
}

.handle-icon {
  font-size: 1.25rem;
}

@media screen and (min-width: 720px) and (min-height: 375px) {
  :host {
    --box-shadow: 0 0 30px 10px rgba(0, 0, 0, 10%);
  }

  .drawer-handle:not(.drawer-handle-animated) {
    --offset-top: 10px;
  }
  .drawer-handle:not(.drawer-handle-animated) .drawer-handle-wrapper {
    display: none;
  }
  .drawer-handle:not(.drawer-handle-animated) .drawer-handle-button {
    display: flex;
  }
}
@media (any-hover: hover) {
  .drawer-handle-wrapper:hover {
    --handle-transform: translate3d(0, -100%, 0);
    --handle-transition: 0.2s transform ease-out, 0.2s box-shadow ease-out;
  }

  .drawer-handle-button:hover {
    transform: var(--handle-button-transform);
    background: var(--handle-button-backround-hover);
  }
}
.drawer-handle-button.state-activated {
  transform: var(--handle-button-transform);
  background: var(--handle-button-backround-active);
}

@media (prefers-reduced-motion: reduce) {
  .drawer-handle-bar,
.drawer-handle-button {
    transition: none;
  }
}