/* Sidebar base styles */
.sidebar {
  transition: var(--sidebar-common-transition);
  width: var(--sidebar-common-width);
  border-radius: var(--sidebar-common-border-radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  height: 100%;
  padding: var(--sidebar-common-padding);

  /* Theme-specific background */
  background: var(--sidebar-content-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .sidebar {
    width: var(--sidebar-common-width-md);
  }
}

.sidebar-header {
  padding: var(--sidebar-common-header-padding);
  border-bottom: var(--sidebar-common-header-border-bottom);
}

.sidebar-content {
  flex: 1 1 0%;
  background: transparent;
  background-image: var(--sidebar-content-gradient);
  padding: var(--sidebar-common-content-padding);
  border-radius: var(--sidebar-common-content-radius, var(--radius-3xl));
  position: relative;
}

.sidebar-nav {
  padding: var(--sidebar-common-content-padding);
}

.sidebar--minimized {
  width: var(--sidebar-common-width-minimized) !important;
  transition: var(--sidebar-common-transition);
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
}

.sidebar--minimized .sidebar-text,
.sidebar--minimized .text {
  display: none !important;
}

/* Logo sizing from tokens */
.logo-full {
  height: var(--sidebar-common-logo-full-height);
  width: var(--sidebar-common-logo-full-width);
}

.logo-minimal {
  height: var(--sidebar-common-logo-minimal-height);
  width: var(--sidebar-common-logo-minimal-width);
}

/* Logo visibility rules with smooth transitions */
.logo-minimal {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) scale(0.8);
}

.logo-full {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: relative;
}

.sidebar--minimized .logo-full {
  opacity: 0;
  transform: scale(0.8);
}

.sidebar--minimized .logo-minimal {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.sidebar-toggle-btn {
  width: var(--sidebar-common-toggle-width);
  height: var(--sidebar-common-toggle-height);
  padding: var(--sidebar-common-toggle-padding);
  border-radius: var(--sidebar-common-toggle-border-radius);
  background-color: var(--sidebar-common-toggle-background);
  color: var(--sidebar-common-toggle-color);
  transition: var(--sidebar-common-toggle-transition);
  opacity: 1;
  visibility: visible;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sidebar:not(.sidebar--minimized) .sidebar-toggle-btn {
  opacity: 1;
  visibility: visible;
}

.logo-container:hover .sidebar-toggle-btn {
  opacity: 1;
  visibility: visible;
}

.sidebar-toggle-btn:hover {
  background-color: var(--sidebar-common-toggle-background-hover);
  color: var(--sidebar-common-toggle-color-hover);
  transform: var(--sidebar-common-toggle-transform-hover);
}

/* Icon color adjustments */
.sidebar-toggle-btn .icon {
  color: var(--sidebar-common-toggle-icon-color);
  font-size: var(--sidebar-common-toggle-icon-size);
}

/* Minimized state adjustments */
.sidebar--minimized .sidebar-toggle-btn {
  opacity: 0;
  visibility: hidden;
}

.sidebar--minimized .logo-container:hover .sidebar-toggle-btn {
  opacity: 1;
  visibility: visible;
}

.sidebar--minimized nav ul {
  align-items: start;
}

/* Logo and brand styling */
.logo-container {
  text-wrap: nowrap;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  text-decoration: none;
  color: var(--sidebar-header-text-logo-color);
  font-size: var(--sidebar-header-text-logo-font-size);
  font-weight: var(--sidebar-header-text-logo-font-weight);
  height: 36px; /* Fixed height to prevent layout shifts */
  min-width: 36px; /* Minimum width for the minimal logo */
}

.logo-bg {
  background: var(--sidebar-logo-bg-bg);
  border-radius: var(--sidebar-common-logo-bg-border-radius);
  padding: var(--sidebar-logo-bg-padding);
  height: var(--sidebar-logo-bg-size);
  width: var(--sidebar-logo-bg-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-bg .icon {
  color: var(--sidebar-logo-icon-color);
  font-size: var(--sidebar-logo-icon-size);
}

/* Footer styling */
.sidebar-footer {
  padding: var(--sidebar-common-footer-padding);
  border-top: var(--sidebar-common-footer-border-top);
}

/* Theme inheritance from layout */
.layout--theme-light .sidebar {
  /* Content */
  --sidebar-content-bg: var(--sidebar-variants-light-content-bg);
  --sidebar-content-gradient: var(--sidebar-variants-light-content-gradient);

  /* Header */
  --sidebar-header-toggle-bg: var(--sidebar-variants-light-header-toggle-bg);
  --sidebar-header-toggle-border: var(
    --sidebar-variants-light-header-toggle-border
  );
  --sidebar-header-text-logo-color: var(
    --sidebar-variants-light-header-text-logo-color
  );
  --sidebar-header-text-logo-font-size: var(
    --sidebar-variants-light-header-text-logo-font-size
  );
  --sidebar-header-text-logo-font-weight: var(
    --sidebar-variants-light-header-text-logo-font-weight
  );

  /* Logo */
  --sidebar-logo-bg-bg: var(--sidebar-variants-light-header-logo-bg-bg);
  --sidebar-logo-bg-border-radius: var(
    --sidebar-variants-light-header-logo-bg-border-radius
  );
  --sidebar-logo-bg-padding: var(
    --sidebar-variants-light-header-logo-bg-padding
  );
  --sidebar-logo-bg-size: var(--sidebar-variants-light-header-logo-bg-size);
  --sidebar-logo-icon-color: var(--color-semantic-text-light);
  --sidebar-logo-icon-size: 1.5rem;

  /* Item states */
  --sidebar-item-states-default-bg: var(
    --sidebar-variants-light-item-states-default-bg
  );
  --sidebar-item-states-default-color: var(
    --sidebar-variants-light-item-states-default-color
  );
  --sidebar-item-states-default-circle-color: var(
    --sidebar-variants-light-item-states-default-circle-color
  );
  --sidebar-item-states-default-icon-color: var(
    --sidebar-variants-light-item-states-default-icon-color
  );
  --sidebar-item-states-hover-bg: var(
    --sidebar-variants-light-item-states-hover-bg
  );
  --sidebar-item-states-hover-color: var(
    --sidebar-variants-light-item-states-hover-color
  );
  --sidebar-item-states-hover-circle-color: var(
    --sidebar-variants-light-item-states-hover-circle-color
  );
  --sidebar-item-states-hover-icon-color: var(
    --sidebar-variants-light-item-states-hover-icon-color
  );
  --sidebar-item-states-active-bg: var(
    --sidebar-variants-light-item-states-active-bg
  );
  --sidebar-item-states-active-color: var(
    --sidebar-variants-light-item-states-active-color
  );
  --sidebar-item-states-active-link-color: var(
    --sidebar-variants-light-item-states-active-link-color
  );
  --sidebar-item-states-active-circle-color: var(
    --sidebar-variants-light-item-states-active-circle-color
  );
  --sidebar-item-states-active-icon-color: var(
    --sidebar-variants-light-item-states-active-icon-color
  );
}

.layout--theme-dark .sidebar {
  /* Content */
  --sidebar-content-bg: var(--sidebar-variants-dark-content-bg);
  --sidebar-content-gradient: var(--sidebar-variants-dark-content-gradient);

  /* Header */
  --sidebar-header-toggle-bg: var(--sidebar-variants-dark-header-toggle-bg);
  --sidebar-header-toggle-border: var(
    --sidebar-variants-dark-header-toggle-border
  );
  --sidebar-header-text-logo-color: var(
    --sidebar-variants-dark-header-text-logo-color
  );
  --sidebar-header-text-logo-font-size: var(
    --sidebar-variants-dark-header-text-logo-font-size
  );
  --sidebar-header-text-logo-font-weight: var(
    --sidebar-variants-dark-header-text-logo-font-weight
  );

  /* Logo */
  --sidebar-logo-bg-bg: var(--sidebar-variants-dark-header-logo-bg-bg);
  --sidebar-logo-bg-border-radius: var(
    --sidebar-variants-dark-header-logo-bg-border-radius
  );
  --sidebar-logo-bg-padding: var(
    --sidebar-variants-dark-header-logo-bg-padding
  );
  --sidebar-logo-bg-size: var(--sidebar-variants-dark-header-logo-bg-size);
  --sidebar-logo-icon-color: var(--color-semantic-text-light);
  --sidebar-logo-icon-size: 1.5rem;

  /* Item states */
  --sidebar-item-states-default-bg: var(
    --sidebar-variants-dark-item-states-default-bg
  );
  --sidebar-item-states-default-color: var(
    --sidebar-variants-dark-item-states-default-color
  );
  --sidebar-item-states-default-circle-color: var(
    --sidebar-variants-dark-item-states-default-circle-color
  );
  --sidebar-item-states-default-icon-color: var(
    --sidebar-variants-dark-item-states-default-icon-color
  );
  --sidebar-item-states-hover-bg: var(
    --sidebar-variants-dark-item-states-hover-bg
  );
  --sidebar-item-states-hover-color: var(
    --sidebar-variants-dark-item-states-hover-color
  );
  --sidebar-item-states-hover-circle-color: var(
    --sidebar-variants-dark-item-states-hover-circle-color
  );
  --sidebar-item-states-hover-icon-color: var(
    --sidebar-variants-dark-item-states-hover-icon-color
  );
  --sidebar-item-states-active-bg: var(
    --sidebar-variants-dark-item-states-active-bg
  );
  --sidebar-item-states-active-color: var(
    --sidebar-variants-dark-item-states-active-color
  );
  --sidebar-item-states-active-link-color: var(
    --sidebar-variants-dark-item-states-active-link-color
  );
  --sidebar-item-states-active-circle-color: var(
    --sidebar-variants-dark-item-states-active-circle-color
  );
  --sidebar-item-states-active-icon-color: var(
    --sidebar-variants-dark-item-states-active-icon-color
  );
}