:root {
  --ghost-lg-opacity: 0.22;
  --ghost-lg-sheen: 0.35;
}

.ghost-hover-lg {
  position: relative;
  overflow: hidden;
}

.ghost-hover-lg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--sidebar-active-bg);
  opacity: 0;
  transition: opacity 0.2s ease;
}


.ghost-hover-lg:hover::before {
  opacity: var(--ghost-lg-opacity);
}


.ghost-hover-lg:disabled::before,
.ghost-hover-lg[aria-disabled="true"]::before,
.ghost-hover-lg[aria-disabled="true"]::before {
  opacity: 0;
  transform: none;
}

select {
  font-size: 0.8125rem;
  min-height: 2.5rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

select:hover {
  border-color: var(--accent);
}

select:focus {
  box-shadow: 0 0 0 1px var(--accent);
}

@keyframes patternDrift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}

.pattern-chip {
  animation: patternDrift 6s linear infinite;
}

.studio-ui {
  font-size: 0.95rem;
  --studio-control-font: 0.75rem;
  --studio-control-line: 1.1rem;
  --studio-control-height: 2.25rem;
}

.studio-ui button,
.studio-ui input,
.studio-ui select,
.studio-ui textarea {
  font-size: var(--studio-control-font);
  line-height: var(--studio-control-line);
}

.studio-ui input,
.studio-ui select,
.studio-ui textarea {
  min-height: var(--studio-control-height);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) var(--panel-bg);
  scrollbar-gutter: stable;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--panel-bg);
  border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 999px;
  border: 2px solid var(--panel-bg);
  min-height: 24px;
}