/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Sidebar component */
@layer components {
  .sidebar {
    width: 240px;
    height: 100%;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    padding: var(--space-m);
    flex-shrink: 0;

    & .sidebar__brand {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      margin-bottom: var(--space-xl);
    }

    & .sidebar__logo {
      width: 32px;
      height: 32px;
      background: var(--color-accent-blue);
      border-radius: var(--radius-s);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: white;
    }

    & .sidebar__app-name {
      font-weight: 600;
      font-size: var(--size-step-0);
      color: var(--color-text-main);
    }

    & .sidebar__nav {
      display: flex;
      flex-direction: column;
      gap: var(--space-l);
    }

    & .sidebar__section {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    & .sidebar__label {
      font-size: var(--size-step--2);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-text-muted);
      margin-bottom: var(--space-xs);
      padding-left: var(--space-xs);
    }

    & .sidebar__item {
      display: flex;
      align-items: center;
      gap: var(--space-s);
      padding: var(--space-xs) var(--space-s);
      border-radius: var(--radius-s);
      color: var(--color-text-muted);
      text-decoration: none;
      background: transparent;
      border: none;
      cursor: pointer;
      width: 100%;
      text-align: left;
      transition: var(--transition-fast);
      font-size: var(--size-step--1);

      &:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--color-text-main);
      }

      &.is-active {
        background: rgba(0, 112, 243, 0.1);
        color: var(--color-accent-blue);
        box-shadow: inset 0 0 10px rgba(0, 112, 243, 0.05);
        border: 1px solid rgba(0, 112, 243, 0.2);
      }
    }

    & .sidebar__icon {
      width: 18px;
      height: 18px;
    }

    @media (max-width: 1024px) {
      width: 280px;
    }
  }
}