:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its
 *   `placement`. Note that the drawer will shrink to accommodate smaller screens.
 */
:host {
  --size: 25rem;
  display: contents;
}

.drawer {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.drawer:not(.drawer--visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.drawer--contained {
  position: absolute;
  z-index: initial;
}

.drawer--fixed {
  position: fixed;
  z-index: var(--sl-z-index-drawer);
}

.drawer__panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  background-color: var(--sl-panel-background-color);
  box-shadow: var(--sl-shadow-x-large);
  transition: var(--sl-transition-medium) transform;
  overflow: auto;
  pointer-events: all;
}
.drawer__panel:focus {
  outline: none;
}

.drawer--top .drawer__panel {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: var(--size);
  transform: translate(0, -100%);
}

.drawer--right .drawer__panel {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  width: var(--size);
  height: 100%;
  transform: translate(100%, 0);
}

.drawer--bottom .drawer__panel {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--size);
  transform: translate(0, 100%);
}

.drawer--left .drawer__panel {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: var(--size);
  height: 100%;
  transform: translate(-100%, 0);
}

.drawer--open .drawer__panel {
  transform: translate(0, 0);
}

.drawer__header {
  display: flex;
}

.drawer__title {
  flex: 1 1 auto;
  font-size: var(--sl-font-size-large);
  line-height: var(--sl-line-height-dense);
  padding: var(--sl-spacing-large);
}

.drawer__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-size: var(--sl-font-size-x-large);
  padding: 0 var(--sl-spacing-large);
}

.drawer__body {
  flex: 1 1 auto;
  padding: var(--sl-spacing-large);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.drawer__footer {
  text-align: right;
  padding: var(--sl-spacing-large);
}
.drawer__footer ::slotted(sl-button:not(:last-of-type)) {
  margin-right: var(--sl-spacing-x-small);
}

.drawer:not(.drawer--has-footer) .drawer__footer {
  display: none;
}

.drawer__overlay {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--sl-overlay-background-color);
  opacity: 0;
  transition: var(--sl-transition-medium) opacity;
  pointer-events: all;
}

.drawer--contained .drawer__overlay {
  position: absolute;
}

.drawer--open .drawer__overlay {
  opacity: 1;
}