.sidebar {
  --_op-sidebar-drawer-brand-width: calc(var(--op-size-unit) * 18);

  box-shadow: none;
  contain: layout;

  .sidebar__brand {
    color-scheme: dark;
    background-color: var(--_op-sidebar-background-color);
    color: var(--_op-sidebar-text-color);
    box-shadow: inset var(--op-border-top) var(--op-color-neutral-plus-four);
  }

  .sidebar__content {
    padding: var(--_op-sidebar-content-spacing);
    box-shadow: inset var(--op-border-left) var(--_op-sidebar-border-color);

    &:first-of-type {
      flex-grow: initial;
    }
  }

  .sidebar__content-label {
    font-size: var(--op-font-small);
    padding: var(--op-space-small);
    color: var(--op-color-on-background-alt);
    font-weight: var(--op-font-weight-semi-bold);
  }

  .sidebar__close {
    display: none;

    position: absolute;
    inset-inline-end: var(--op-space-2x-small);
    inset-block-start: var(--op-space-2x-small);
  }
}

/* Sidebar open */

.op-page:has(.sidebar__menu-button:checked) {
  .sidebar {
    inset-inline-start: var(--op-space-x-small);
    inset-block: 0;
    box-shadow: var(--op-shadow-large);
  }
}

/* Sidebar Mobile */

/* Not nested since it lives outside the sidebar but is still part of it */
.sidebar__menu-button {
  display: none;
}

/* --op-breakpoint-medium */
@media (width <= 1024px) {
  .op-page {
    .op-page__sidebar {
      /*
        In Safari, this allows the sidebar to open...
        Don't know why it doesn't work
      */
      position: fixed;
      inline-size: 1px;
    }
  }

  .sidebar {
    --_op-sidebar-spacing: var(--op-space-3x-large);

    position: fixed;
    margin-inline-start: 0;
    inset-inline-start: calc(-1 * var(--_op-sidebar-drawer-width));
    inline-size: var(--_op-sidebar-drawer-width);
    block-size: calc(100dvh - (var(--op-space-x-small) * 2));

    .sidebar__close {
      display: flex;
    }

    .sidebar__header {
      display: none;
    }
  }
}