/* Shared Component Styles - Aris Design System */

/* Icon default styles */
.tabler-icon {
  width: 20px;
  height: 20px;
  margin: 6px;
  color: var(--extra-dark);
  stroke-width: 2px;
}

.tabler-icon.icon-close { stroke-width: 1px; }
.tabler-icon.bookmark { fill: var(--information-500); }
.tabler-icon.check { fill: var(--green-500); }
.tabler-icon.success { fill: var(--success-500); }
.tabler-icon.alert { fill: var(--warning-500); }
.tabler-icon.exclamation { fill: var(--orange-500); }
.tabler-icon.question { fill: var(--purple-500); }
.tabler-icon.heart { fill: var(--red-500); }
.tabler-icon.star { fill: var(--yellow-500); }
.tabler-icon.quote { fill: var(--pink-500); }
.tabler-icon.collapse { stroke: var(--dark); }
.tabler-icon.error { fill: var(--error-500); }

/* Button reset */
button {
  background: transparent;
  border: none;
  font: inherit;
  cursor: default;
  padding: 0px;
}

/* Scrollbar styling */
*::-webkit-scrollbar {
  height: var(--scrollbar-size);
  width: var(--scrollbar-size);
  background-color: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--gray-300);
  border-radius: 16px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--gray-700);
}

/* Shadow overlays for scrolling */
.shadow-overlay {
  position: absolute;
  top: 0;
  width: 20px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.shadow-overlay.active {
  opacity: 1;
}

.shadow-left {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.15), transparent);
}

.shadow-right {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent);
}

/* Interactive states */
.item:hover,
.item:focus-visible {
  background-color: var(--surface-hover);
}

/* Focus outline for accessibility */
button:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:focus-visible {
  outline: var(--border-med) solid var(--border-action);
  outline-offset: var(--border-extrathin);
}