/*
 * 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 {
    display: flex;
    flex-direction: row;
    height: 100%;
    padding-right: var(--space-3xs);
    position: sticky;
    top: var(--space-m);
    width: min-content;

    @media (max-width: 768px) {
      width: 100%;
      flex-direction: column;
      position: static;
      padding-right: 0;
      height: auto;
    }

    & .sidebar__holes {
      flex-shrink: 0;
      width: 12px;
      height: 100%;
      background-image: radial-gradient(
        circle at 6px 10px,
        var(--color-surface) 0,
        var(--color-surface) 3px,
        transparent 3px,
        transparent 100%
      );
      background-size: 12px 20px;
      background-position: 0 0;
      background-repeat: repeat-y;
      margin-right: var(--space-3xs);

      @media (max-width: 768px) {
        width: 100%;
        height: 12px;
        background-image: radial-gradient(
          circle at 10px 6px,
          var(--color-surface) 0,
          var(--color-surface) 3px,
          transparent 3px,
          transparent 100%
        );
        background-size: 20px 12px;
        background-repeat: repeat-x;
        margin-right: 0;
        margin-bottom: var(--space-3xs);
      }
    }

    & .sidebar__content {
      writing-mode: vertical-rl;
      display: flex;
      flex-direction: column;
      gap: var(0.5rem);
      padding-block: var(0.5rem);
      font-size: var(--size-step--2);
      text-transform: uppercase;
      opacity: 0.7;

      @media (max-width: 768px) {
        writing-mode: horizontal-tb;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-s);
      }
    }

    & .sidebar__item {
      display: flex;
      gap: 2px;
    }

    & .sidebar__label {
      font-weight: bold;
    }
  }

  [data-theme="dark"] .sidebar {
    & .sidebar__holes {
        background-image: radial-gradient(
          circle at 6px 10px,
          var(--color-surface) 0,
          var(--color-surface) 3px,
          transparent 3px,
          transparent 100%
        );
    }
  }
}