/*
 * 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 TopBar component */
@layer components {
  .top-bar {
    background: var(--color-surface);
    padding-block: var(--space-s);
    border-bottom: 1px solid color-mix(in oklab, var(--color-primary) 15%, transparent);
    position: sticky;
    top: 0;
    z-index: 100;

    & .top-bar__container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin-inline: auto;
      padding-inline: var(--space-m);
      position: relative;
    }

    & .top-bar__burger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--space-xs);
      z-index: 110;
      width: 44px;
      height: 44px;
      flex-direction: column;
      justify-content: center;
      gap: 6px;

      & .top-bar__burger-line {
        display: block;
        width: 28px;
        margin-inline: auto;
        height: 2px;
        background-color: var(--color-primary);
        transition: transform 0.3s ease, opacity 0.3s ease;
      }

      &[data-state="open"] {
        & .top-bar__burger-line:nth-child(1) {
          transform: translateY(8px) rotate(45deg);
        }
        & .top-bar__burger-line:nth-child(2) {
          opacity: 0;
        }
        & .top-bar__burger-line:nth-child(3) {
          transform: translateY(-8px) rotate(-45deg);
        }
      }
    }

    & .top-bar__logo a {
      display: block;
      line-height: 0;
      position: relative;
      z-index: 110;
    }

    & .top-bar__logo-img {
      height: 40px;
      width: auto;
      display: block;
      filter: drop-shadow(0 0 1px rgba(0,0,0,0.1));
    }

    & .top-bar__content {
      display: flex;
      align-items: center;
      gap: var(--space-l);
    }

    & .top-bar__actions {
      display: flex;
      align-items: center;
      gap: var(--space-m);
    }

    & .top-bar__lyre-btn {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      padding: 4px 12px;
      background: color-mix(in oklab, var(--color-primary) 10%, transparent);
      border: 1px solid color-mix(in oklab, var(--color-primary) 20%, transparent);
      border-radius: var(--radius-pill);
      color: var(--color-primary);
      text-decoration: none;
      font-weight: bold;
      transition: all 0.2s;

      &:hover {
        background: var(--color-primary);
        color: white;
      }
    }

    & .top-bar__lyre-count {
      font-size: var(--size-step-0);
      line-height: 1;
    }

    & .top-bar__lyre-label {
      font-size: var(--size-step--2);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1;
    }

    & .top-bar__nav ul {
      display: flex;
      gap: var(--space-m);
      list-style: none;
      margin: 0;
      padding: 0;

      & a {
        color: var(--color-text);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s ease;

        &:hover {
          color: var(--color-primary);
        }

        &.current {
          color: var(--color-primary);
        }
      }
    }

    @media (max-width: 768px) {
      & .top-bar {
        padding-block: var(--space-xs);
      }

      & .top-bar__burger {
        display: flex;
      }

      & .top-bar__content {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--color-surface);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--space-xl);
        z-index: 100;
        gap: var(--space-xl);
        overflow-y: auto;

        &[data-state="open"] {
          display: flex;
          animation: fadeIn 0.3s ease forwards;
        }

        & .top-bar__nav ul {
          flex-direction: column;
          align-items: center;
          gap: var(--space-l);

          & a {
            font-size: var(--size-step-2);
          }
        }

        & .top-bar__actions {
          width: 100%;
          display: flex;
          justify-content: center;
          padding-top: var(--space-l);
          border-top: 1px solid color-mix(in oklab, var(--color-primary) 10%, transparent);
        }
      }
    }

    /* Dark mode variants are handled by variables in app.css */
    &[data-variant="dark"] {
      background: var(--color-surface-variant);
      color: var(--color-text);

      & .top-bar__content {
         @media (max-width: 768px) {
            background: var(--color-surface-variant);
         }
      }
    }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  body.is-practice-active .top-bar {
    display: none;
  }

  body.menu-open {
    overflow: hidden;
  }
}