@block layout-sidebar {
  padding: 0 calc(var(--spacing) / 2);
  max-width: var(--content-max-width);
  margin: 0 auto;

  @media (--breakpoint-desktop) {
    display: flex;
    align-items: flex-start;
  }

  @element sidebar {
    @media (--breakpoint-desktop) {
      flex: 0 0 auto;
      width: var(--layout-sidebar-sidebar-width);
      border-radius: var(--border-radius);
      box-shadow: var(--card-box-shadow);
    }
  }

  @element sidebar-header {
    padding: calc(var(--spacing) / 2) var(--spacing);
    border-bottom: 1px solid var(--color-sidebar-seperator);
  }

  @element sidebar-title {
    font-family: var(--font-medium);
    font-size: 1.25em;
    font-weight: normal;
    margin: 0;
  }

  @element sidebar-content {
    background: var(--color-sidebar-bg);
    padding: calc(var(--spacing) * 0.5);
  }

  @element content {
    display: flex;
    flex-direction: column;

    @media (--breakpoint-desktop) {
      flex: 0 1 var(--layout-sidebar-content-width);
      width: 100%;
      box-sizing: border-box;
      margin-left: var(--spacing);
    }

    & > * {
      max-width: var(--layout-sidebar-content-width);
      width: 100%;
    }
  }
}