@layer components {
  /* Variables */
  :root {
    --sidebar-transition-duration: 0.3s;
    --sidebar-transition-timing: ease;
    --sidebar-width: 280px;
    --sidebar-width-collapse: 80px;
    --sidebar-default-width: 280px;
    --header-height: 70px;
  }

  @media (max-width: theme(--breakpoint-lg)) {
    :root {
      --sidebar-width: 280px;
      --header-height: 60px;
    }
  }

  /* Base */
  .header {
    height: var(--header-height);
  }

  .sidebar {
    width: var(--sidebar-width);
  }

  .header-fixed .wrapper {
    padding-top: var(--header-height);
  }

  /* Desktop mode */
  @media (min-width: theme(--breakpoint-lg)) {
    .sidebar {
      width: var(--sidebar-width);
      transition: width var(--sidebar-transition-duration)
        var(--sidebar-transition-timing);
    }

    .sidebar .sidebar-header {
      height: var(--header-height);
    }

    .sidebar .sidebar-wrapper {
      width: var(--sidebar-default-width);
    }

    .sidebar .sidebar-logo {
      width: var(--sidebar-default-width);
    }

    .sidebar .small-logo {
      display: none;
    }

    .sidebar-fixed .wrapper {
      padding-inline-start: var(--sidebar-width) !important;
    }

    .sidebar-fixed.header-fixed .header {
      inset-inline-start: var(--sidebar-width) !important;
    }

    .sidebar-fixed.header-fixed .wrapper {
      padding-top: var(--header-height);
    }

    .sidebar-collapse {
      --sidebar-width: var(--sidebar-width-collapse);
    }

    .sidebar-collapse .sidebar .default-logo {
      display: none;
    }

    .sidebar-collapse .sidebar .small-logo {
      display: flex;
    }

    .sidebar-collapse
      .sidebar
      [data-slot='accordion-menu-title'],
    .sidebar-collapse .sidebar [data-slot='badge'],
    .sidebar-collapse
      .sidebar
      [data-slot='accordion-menu-sub-indicator'] {
      display: none !important;
    }

    .sidebar-collapse
      .sidebar
      [data-slot='accordion-menu-sub-content'] {
      visibility: hidden;
      position: absolute;
      height: 0;
      width: 0;
    }

    .sidebar-collapse
      .sidebar
      [data-slot='accordion-menu-label'] {
      visibility: hidden;
      position: relative;
    }

    .sidebar-collapse
      .sidebar
      [data-slot='accordion-menu-label']::before {
      content: '...';
      color: currentColor;
      font-size: inherit;
      position: absolute;
      visibility: visible;
      display: inline-block;
      bottom: 50%;
      inset-inline-start: 0;
      margin-inline-start: -0.15rem;
      top: 0.25rem;
      transform: translateX(100%);
    }
  }

  .layout-initialized .wrapper {
    transition: padding-inline-start var(--sidebar-transition-duration)
      var(--sidebar-transition-timing);
  }

  .layout-initialized .header {
    transition: inset-inline-start var(--sidebar-transition-duration)
      var(--sidebar-transition-timing);
  }
}