:host {
  @apply bg-surface text-surface-content desktop-small:w-[10.5rem] pt-10 overflow-y-auto;
}

@screen desktop-x-large {
  :host {
    @apply w-[16.5rem];
  }
}

.side-menu-group {
  @apply grid grid-flow-row p-[0.375rem];
}

@screen desktop-x-large {
  .side-menu-group {
    @apply px-5;
  }
}

.side-menu-group-label {
  @apply text-p1 font-bold mb-3;
}

.side-menu-group-nav {
  @apply grid grid-flow-row gap-[0.625rem] mb-6;
}

.side-menu-group-item {
  @apply text-p2 flex flex-row items-center bg-[#EDEFF0] text-black rounded cursor-pointer;
}

.side-menu-group-item-label {
  @apply whitespace-nowrap grow py-3;
}

.side-menu-group-arrow {
  @apply px-[0.438rem] py-3;
}

.side-menu-group-item.active:not(.has-child-view),
.side-menu-group-item.active-child,
.side-menu-group-item:hover,
.side-menu-group-item:focus {
  @apply bg-[#596470] text-white;
}

.side-menu-group-sub-items:not(.hidden) {
  @apply grid grid-flow-row gap-[0.063rem] mt-[0.063rem];
}

.side-menu-item-rotate {
  @apply rotate-180;
}

.side-menu-group-sub-items .side-menu-group-item.active:not(.has-child-view),
.side-menu-group-sub-items .side-menu-group-item.active-child,
.side-menu-group-sub-items .side-menu-group-item:hover,
.side-menu-group-sub-items .side-menu-group-item:focus {
  @apply bg-[#89949E] text-white;
}

.side-menu-group-item-icon {
  @apply shrink-0 grid items-center justify-center px-[0.438rem] py-3;
}

/* :host {
  @apply text-surface-content grid gap-[0.625rem];
  grid-template-rows: 1fr auto;
}

:host {
  @apply w-[10.5rem];
}

@screen desktop-small {
  :host {
    @apply w-[10.5rem];
  }
}

@screen desktop {
  :host {
    @apply w-[10.5rem];
  }
}

@screen desktop-x-large {
  :host {
    @apply w-[16.5rem];
  }
}

.side-menu-nav-item {
  @apply text-center py-1 flex flex-col items-center;
}

@screen desktop-x-large {
  .side-menu-nav-item {
    @apply flex-row grow text-left;
  }
}

.side-menu-nav-item-icon {
  @apply bg-[#AEB7C1] w-12 h-12 rounded grid items-center justify-center mx-auto mb-1 shrink;
}

@screen desktop-x-large {
  .side-menu-nav-item-icon {
    @apply mx-6;
  }
}

.side-bottom-menu-item {
  @apply block text-center py-2;
}

.side-bottom-menu-item-icon {
  @apply w-8 h-8 grid items-center justify-center mx-auto mb-1;
}

.divider {
  @apply mx-4 my-1;
}

.side-menu-processes {
  @apply block text-center py-4;
}

.panel {
  box-shadow: 0px 6px 24px rgba(206, 212, 219, 0.8);
} */
