/* Sidebar desktop */
.sidebar {
  /* Sidebar */
}

.sidebarGap {
  position: relative;
  height: 100svh;
  width: var(--sidebar-width);
  background: transparent;
  transition: width 200ms linear;
}

.sidebar[data-collapsible="offcanvas"] .sidebarGap {
  width: 0;
}

.sidebar[data-side="right"] .sidebarGap {
  transform: rotate(180deg);
}

.sidebar[data-collapsible="icon"] .sidebarGap {
  width: var(--sidebar-width-icon);
}

.sidebar[data-variant="floating"][data-collapsible="icon"] .sidebarGap,
.sidebar[data-variant="inset"][data-collapsible="icon"] .sidebarGap {
  width: calc(var(--sidebar-width-icon) + 1rem);
}

.sidebarContent {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}
.sidebar[data-variant="floating"] .sidebarContent {
  border-radius: 0.5rem;
  border-width: 1px;
  box-shadow: var(--theme-shadows-lg);
}

/* SidebarInput */
.sidebarInput {
  height: 2rem;
  width: 100%;
  background-color: var(--sidebar-background, var(--theme-colors-gray-50));
  box-shadow: none;
  padding: 8px 16px;
  border: 1px solid var(--sidebar-border, var(--theme-border-default));
  box-shadow: none;
  outline: none;
}

.sidebarInput:focus-visible {
  box-shadow: 0 0 0 2px var(--sidebar-ring);
}

/* Variant styles */
.menuButtonVariantOutline {
  background-color: var(--background);
  box-shadow: 0 0 0 1px hsl(var(--sidebar-border));
}

.menuButtonVariantOutline:hover {
  background-color: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  box-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
}

.menuButtonSizeSm {
  height: 1.75rem;
  font-size: 0.75rem;
}

.menuButtonSizeLg {
  height: 3rem;
}

.sidebar[data-collapsible="icon"] .menuButtonSizeLg {
  padding: 0;
}

.menuSkeletonIcon {
  width: 1rem;
  height: 1rem;
  border-radius: 0.375rem;
}

.menuSkeletonText {
  height: 1rem;
  flex: 1;
  max-width: var(--skeleton-width);
}

.sheetOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background-color: var(--theme-colors-whiteAlpha-600);
  backdrop-filter: blur(8px) saturate(180%);
}

.sheetOverlay[data-state="open"] {
  animation: fadeIn 0s;
}

.sheetOverlay[data-state="closed"] {
  animation: fadeOut 0s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.sheetContent {
  position: fixed;
  z-index: 50;
  gap: 1rem;
  background-color: white;
  box-shadow: var(--theme-shadows-lg);
  transition: all 0.2s ease-in-out;
}

.sheetContent[data-state="open"] {
  animation: animateIn 0.5s;
}

.sheetContent[data-state="closed"] {
  animation: animateOut 0.3s;
}

@keyframes animateIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes animateOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.sheetContentLeft {
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 75%;
  border-right: 1px solid var(--theme-border-default);
}

.sheetContentLeft[data-state="open"] {
  animation: slideInFromLeft 0.3s ease-in-out;
}

.sheetContentLeft[data-state="closed"] {
  animation: slideOutToLeft 0.3s ease-in-out;
}

@media (min-width: 640px) {
  .sheetContentLeft {
    max-width: 24rem;
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutToLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.sheetContentRight {
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 75%;
  border-left: 1px solid var(--theme-border-default);
}

.sheetContentRight[data-state="open"] {
  animation: slideInFromRight 0.3s ease-in-out;
}

.sheetContentRight[data-state="closed"] {
  animation: slideOutToRight 0.3s ease-in-out;
}

@media (min-width: 640px) {
  .sheetContentRight {
    max-width: 24rem;
  }
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutToRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.tooltipContent {
  z-index: 50;
  overflow: hidden;
  border-radius: var(--theme-radii-md);
  border-width: 1px;
  background-color: white;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: var(--theme-fontSizes-sm);
  color: var(--theme-colors-gray-800);
  box-shadow: var(--theme-shadows-md);
  animation:
    fadeIn 0s,
    zoomIn 0s;
}

.tooltipContent[data-state="closed"] {
  animation:
    fadeOut 0s,
    zoomOut 0s; /* animate-out fade-out-0 zoom-out-95 */
}

.tooltipContent[data-side="bottom"] {
  animation: ttslideInFromTop 0.3s ease-in-out; /* slide-in-from-top-2, assuming duration */
}

.tooltipContent[data-side="left"] {
  animation: ttslideInFromRight 0.3s ease-in-out; /* slide-in-from-right-2 */
}

.tooltipContent[data-side="right"] {
  animation: ttslideInFromLeft 0.3s ease-in-out; /* slide-in-from-left-2 */
}

.tooltipContent[data-side="top"] {
  animation: ttslideInFromBottom 0.3s ease-in-out; /* slide-in-from-bottom-2 */
}

@keyframes zoomIn {
  from {
    transform: scale(0.95); /* zoom-in-95 = 95% scale */
  }
  to {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95); /* zoom-out-95 = 95% scale */
  }
}

@keyframes ttslideInFromTop {
  from {
    transform: translateY(-0.5rem); /* slide-in-from-top-2 = 0.5rem */
  }
  to {
    transform: translateY(0);
  }
}

@keyframes ttslideInFromRight {
  from {
    transform: translateX(0.5rem); /* slide-in-from-right-2 = 0.5rem */
  }
  to {
    transform: translateX(0);
  }
}

@keyframes ttslideInFromLeft {
  from {
    transform: translateX(-0.5rem); /* slide-in-from-left-2 = 0.5rem */
  }
  to {
    transform: translateX(0);
  }
}

@keyframes ttslideInFromBottom {
  from {
    transform: translateY(0.5rem); /* slide-in-from-bottom-2 = 0.5rem */
  }
  to {
    transform: translateY(0);
  }
}