#sidebar-header,
#sidebar {
  min-width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;

  will-change: min-width, max-width;
}

#sidebar-box:is(:hover, :focus-within),
#sidebar-box:has(#sidebar-switcher-target.active) {
  --uc-sidebar-shadow-width: calc(var(--uc-sidebar-activate-width) - var(--uc-sidebar-width));

  > {
    #sidebar-header,
    #sidebar {
      min-width: var(--uc-sidebar-activate-width) !important;
      max-width: var(--uc-sidebar-activate-width) !important;
    }
  }
}

:root[inFullscreen="true"] #sidebar-box {
  --uc-sidebar-shadow-width: var(--uc-sidebar-fullscreen-width);

  margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
  padding-inline-start: var(--uc-sidebar-fullscreen-width);
  will-change: padding-inline-start, opacity, box-shadow, visibility;

  &:is(:hover, :focus-within) {
    --uc-sidebar-shadow-width: var(--uc-sidebar-activate-width);

    padding-inline-start: var(--uc-sidebar-activate-width);
  }

  #sidebar-header,
  #sidebar {
    min-width: calc(var(--uc-sidebar-activate-width)) !important;
    max-width: calc(var(--uc-sidebar-activate-width)) !important;

    will-change: unset;
  }
}

@include Animate {
  #sidebar-header,
  #sidebar {
    transition: min-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
  }

  #sidebar-box:is(:hover, :focus-within),
  #sidebar-box:has(#sidebar-switcher-target.active) {
    transition: margin-inline-start var(--uc-autohide-sidebar-speed) var(--animation-easing-function), opacity var(--uc-autohide-sidebar-speed) ease-in-out,
                box-shadow var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-speed), visibility 0s linear !important;
    > {
      #sidebar-header,
      #sidebar {
        transition-delay: 0ms !important;
      }
    }
  }

  :root[inFullscreen="true"] #sidebar-box {
    transition: padding-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay),
                opacity var(--uc-autohide-fullscreen-sidebar-speed) ease-in-out,
                box-shadow calc(var(--uc-autohide-fullscreen-sidebar-speed) + 0.05s) var(--animation-easing-function),
                visibility 0s linear !important;

    &:is(:hover, :focus-within),
    &:has(#sidebar-switcher-target.active) {
      transition-delay: 0ms !important;
    }
  }
}
