@c8y/style/styles/components/navigation-and-layout/navigation/_c8y-nav-stacked.less

Styles for Cumulocity IoT applications

@import "../../../mixins/_tab-focus.less";
@import "../../../mixins/_vendor-prefixes.less";

/**
 * C8Y Nav Stacked - Stacked navigation list component
 *
 * Note: Uses @size-* tokens for spacing; @size-base for calculations, and component color variables.
 *
 * Intentionally hardcoded values:
 * - Border widths (1px): Standard borders
 * - Percentages (100%): Layout
 * - Transition durations (0.25s): Animation timing
 * - Box-shadow values: Borders and focus effects
 * - Z-index values (10): Stacking order
 */

.c8y-nav-stacked {
  position: relative;
  z-index: 10;
  display: block;
  margin-bottom: 0;
  padding-left: 0;
  width: 100%;
  list-style: none;

  .c8y-stacked-item {
    position: relative;
    display: flex;
    float: none;
    align-items: center;
    flex-flow: row nowrap;
    padding: @size-8 0 @size-8 @size-16;
    width: 100%;
    border: 0;
    background-color: @component-background-expanded;
    background-image: none;
    box-shadow: inset 0 -1px 0 @component-border-color;
    cursor: pointer;
    appearance: none;
    transition: all 0.25s ease;

    &:hover:not(.active) {
      background-color: @component-background-active;
      box-shadow: inset 0 0 0 1px @component-color-actions-hover;
      .ui-sortable-handle {
        margin-left: calc(-1 * @size-8);
        margin-right: @size-8;
        outline: none;
      }
    }
    &:focus-within,
    &:focus {
      .c8y-focus-inset();
    }

    .btn-clean:focus {
      outline: none;
    }

    &.active {
      border-left: @size-4 solid @component-brand-primary;
      background-color: @component-background-default;
    }
    > .c8y-switch {
      margin: calc(@size-base * -1 - 1px) 0 calc(@size-base * -1);
    }
    .msgid {
      display: inline-block;
      min-width: @size-40;
    }
  }

  &.ui-sortable .c8y-stacked-item {
    .ui-sortable-handle {
      overflow: hidden;
      margin-left: 0;
      margin-right: 0;
      width: 0;
      text-align: center;
      transition: all 0.25s ease;
    }
  }
}