/* Sidebar */
:root {
  --sidebar-inline-space: max(calc(var(--inline-space) * 1.5), 1vw);
  --sidebar-tools-height: calc(
    var(--block-space) + var(--btn-size) + (var(--block-space) * 2)
  );
  --sidebar__header-height: calc(var(--btn-size) + (var(--block-space) * 2));
}

.sidebar__container {
  block-size: 100dvh;
  max-block-size: 100dvh;
  padding-block-start: var(--sidebar__header-height);
  padding-block-end: var(--sidebar-tools-height);
}

.sidebar__toggle {
  inset-block-start: var(--block-space);
  inset-inline-start: calc(
    (var(--btn-size) + max(var(--inline-space), 1vw)) * -1
  );
  position: absolute;
  transition:
    inset-inline-start 300ms ease,
    border-color 300ms ease,
    background-color 300ms ease;
  z-index: 5;

  @media (min-width: 100ch) {
    display: none;
    inset-block-start: var(--block-space);
  }

  .open & {
    inset-block-start: var(--block-space);

    @media (max-width: 100ch) {
      inset-inline-start: var(--sidebar-inline-space);
    }
  }
}

.sidebar__tools {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  inset: auto 0 0 0;
  padding-block: calc(var(--block-space) * 1.5);
  padding-inline: var(--sidebar-inline-space);
  position: fixed;

  @media (min-width: 100ch) {
    inline-size: calc(var(--sidebar-width));
    inset-inline-end: auto;
  }
}