.shoelace-drawer {
  will-change: auto;
  /* Allow the contained version of drawer to get all height. */
  position: fixed;
  overflow: hidden;

  /* Add a transition for the --size variable to make resizing smoother */
  transition: --size 0.2s ease;

  /* Reduce the header as we don't have labels, only close button. */
  &::part(title) {
    padding: 0.5rem 1rem;
  }
  &::part(body) {
    padding-top: 0;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  &::part(base) {
    position: fixed;
  }
  &::part(overlay) {
    position: relative;
    display: none;
    height: 0;
  }

  .shoelace-drawer__hidden {
    display: none;
  }

  .shoelace-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: ew-resize;
    background-color: rgb(0, 0, 0, 0.1);
  }
  .shoelace-resize-handle:active,
  .shoelace-resize-handle:hover {
    background-color: var(--sl-color-primary-400, rgb(45, 25, 90, 0.2));
  }

  /* Handle on left for end drawer (open on right). */
  &[placement="end"] {
    .shoelace-resize-handle {
      left: 0;
    }
  }
}
