@utility h-inset {
  @apply h-[calc(100vh-1rem-4rem-0.25rem)] group-has-data-[collapsible=icon]/sidebar-wrapper:h-[calc(100vh-4rem-0.25rem)] md:h-[calc(100vh-1rem-4rem-1rem-0.25rem)] md:group-has-data-[collapsible=icon]/sidebar-wrapper:h-[calc(100vh-1rem-4rem-0.25rem)];
}

@utility min-h-inset {
  @apply min-h-[calc(100vh-1rem-4rem-0.25rem)] group-has-data-[collapsible=icon]/sidebar-wrapper:min-h-[calc(100vh-4rem-0.25rem)] md:min-h-[calc(100vh-1rem-4rem-1rem-0.25rem)] md:group-has-data-[collapsible=icon]/sidebar-wrapper:min-h-[calc(100vh-1rem-4rem-0.25rem)];
}

@utility max-h-inset {
  @apply max-h-[calc(100vh-1rem-4rem-0.25rem)] group-has-data-[collapsible=icon]/sidebar-wrapper:max-h-[calc(100vh-4rem-0.25rem)] md:max-h-[calc(100vh-1rem-4rem-1rem-0.25rem)] md:group-has-data-[collapsible=icon]/sidebar-wrapper:max-h-[calc(100vh-1rem-4rem-0.25rem)];
}

@utility center {
  @apply flex items-center justify-center;
}

@utility start {
  @apply flex items-center justify-start;
}

@utility end {
  @apply flex items-center justify-end;
}

@utility scrollbar-pretty {
  scrollbar-width: thin;
  scrollbar-color: theme(--color-muted-foreground/0.2) transparent;

  &:hover {
    scrollbar-color: theme(--color-muted-foreground/0.35) transparent;
  }

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: theme(--color-muted-foreground/0.2);
    border-radius: 9999px;
  }

  &:hover::-webkit-scrollbar-thumb {
    background-color: theme(--color-muted-foreground/0.35);
  }
}
