.tox-floating-sidebar when (@custom-properties-enabled = true) {
  --tox-private-floating-sidebar-box-shadow: 0 0 40px 1px hsl( from var(--tox-private-color-black) h s l / 15%), 0 16px 16px -10px hsl( from var(--tox-private-color-black) h s l / 15%);
  --tox-private-floating-sidebar-background-color: light-dark(hsl( from var(--tox-private-background-color) h s calc(l - 6)), hsl( from var(--tox-private-background-color) h s calc(l + 10)));
}

.tox {
  .tox-floating-sidebar {
    // This is our internal variable, it's not meant to be a part of an external skinning API. It is not behind a feature flag on purpose.
    --tox-private-floating-sidebar-width: min(380px, 90vw);
    --tox-private-floating-sidebar-height: 80vh;

    position: fixed;
    z-index: var(--tox-private-z-index-floatingsidebar, @z-index-floatingsidebar);
    box-shadow: var(--tox-private-floating-sidebar-box-shadow, 0 0 40px 1px fade(@color-black, 15%), 0 16px 16px -10px fade(@color-black, 15%));
    width: var(--tox-private-floating-sidebar-width);
    height: var(--tox-private-floating-sidebar-height);
    background-color: var(--tox-private-floating-sidebar-background-color, @sidebar-background-color);
    border-radius: var(--tox-private-panel-border-radius, @panel-border-radius);
    overflow: hidden;

    &:not(&--open) {
      display: none;
    }

    &--open {
      display: block;
    }
  }

  .tox-floating-sidebar__content-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .tox-floating-sidebar__header {
    position: relative;
  }

  .tox-floating-sidebar .tox-ai__scroll:has(.tox-card-list) {
    background-color: inherit;
  }
}