/* Sidebar container transition for width and base styles */

.sidebar--minimized {
  width: var(--sidebar-common-width-minimized) !important;
}

/* Link base */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--sidebar-common-item-padding);
  margin: var(--sidebar-common-item-margin);
  border-radius: var(--sidebar-common-item-border-radius);
  transition: var(--sidebar-common-item-transition);
  background: var(--sidebar-item-states-default-bg);
  color: var(--sidebar-item-states-default-color);
}

.sidebar-link--active {
  background: var(--sidebar-item-states-active-bg);
  color: var(--sidebar-item-states-active-color);
}

.sidebar-link--inactive {
  background: var(--sidebar-item-states-default-bg);
  color: var(--sidebar-item-states-default-color);
  position: relative;
  overflow: hidden;
}

.sidebar-link--inactive:hover {
  background: var(--sidebar-item-states-hover-bg);
  color: var(--sidebar-item-states-hover-color);
}

/* Icon circle */
.sidebar-icon-circle {
  position: relative;
  flex: none;
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sidebar-item-states-default-circle-color);
  transition: var(--transition-duration-normal) var(--transition-easing);
}

.sidebar-icon-circle--active {
  background-color: var(--sidebar-item-states-active-circle-color);
}

.sidebar-link--inactive:hover .sidebar-icon-circle {
  background-color: var(--sidebar-item-states-hover-circle-color);
}

/* Icon styling */
.sidebar-icon {
  color: var(--sidebar-item-states-default-icon-color);
  transition: var(--transition-duration-normal) var(--transition-easing);
}

.sidebar-link--active .sidebar-icon {
  color: var(--sidebar-item-states-active-icon-color);
}

.sidebar-link--inactive:hover .sidebar-icon {
  color: var(--sidebar-item-states-hover-icon-color);
}

/* Text styling */
.sidebar-text {
  white-space: nowrap;
  color: inherit;
  font-weight: var(--font-weight-medium);
  transition: var(--transition-duration-normal) var(--transition-easing);
}

.sidebar-link--active .sidebar-text {
  color: var(--sidebar-item-states-active-link-color);
}