.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 100vw);
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--color-grey-light);
  background: #fff;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  color: var(--color-grey-darker);

  &:popover-open {
    display: flex;
    flex-direction: column;
  }

  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-grey-light);

    h2 {
      margin: 0;
      font-size: 16px;
    }

    .drawer-close {
      padding: 4px;
      border: 0;
      background: transparent;
      color: var(--color-grey-medium);
      font-size: 16px;
      cursor: pointer;

      &:hover {
        color: var(--color-grey-darker);
      }
    }
  }

  .drawer-body {
    flex: 1;
    overflow-y: auto;
  }
}