/*
 * 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 {
    position: sticky;
    top: var(--space-s);
    z-index: 100;
    margin-inline: auto;
    width: min(100% - 1rem, 1200px);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--color-border);
    margin-top: var(--space-s);

    @media (max-width: 640px) {
      width: 100%;
      border-radius: 0;
      top: 0;
      margin-top: 0;
      border-inline: none;
      border-top: none;
      padding-inline: var(--space-s);
    }

    & .top-bar__inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 100%;
      margin: 0;
      padding: 0;
    }

    & .top-bar__logo {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      font-weight: 700;
      font-size: var(--size-step-1);
      color: var(--color-text);
      white-space: nowrap;

      @media (max-width: 480px) {
        font-size: var(--size-step-0);
        gap: 0.25rem;
      }

      & .logo__icon {
        background: var(--color-primary);
        color: var(--clr-white);
        padding: 0.2rem 0.5rem;
        border-radius: 0.5rem;
        font-family: monospace;

        @media (max-width: 480px) {
          padding: 0.1rem 0.3rem;
          border-radius: 0.3rem;
          display: none;
        }
      }

      & .logo__text {
        @media (max-width: 480px) {
          font-size: var(--size-step-1);
        }
      }

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

    & .top-bar__nav {
      display: flex;
      gap: var(--space-m);

      @media (max-width: 768px) {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: calc(6 / 7 * 100%);
        background: var(--color-surface);
        flex-direction: column;
        padding: var(--space-xl) var(--space-m);
        z-index: 101;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: var(--shadow-xl);
      }
    }

    & .top-bar__hamburger {
      display: none;
      flex-direction: column;
      gap: 6px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
      z-index: 102;

      @media (max-width: 768px) {
        display: flex;
      }

      & .hamburger__line {
        width: 24px;
        height: 2px;
        background-color: var(--color-text);
        transition: all 0.3s ease-in-out;
        border-radius: 2px;
      }
    }

    & .top-bar__overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      z-index: 100;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    &[data-menu-open] {
      & .top-bar__nav {
        transform: translateX(0);
      }

      & .top-bar__overlay {
        display: block;
        opacity: 1;
      }

      & .top-bar__hamburger {
        & .hamburger__line:nth-child(1) {
          transform: translateY(8px) rotate(45deg);
        }
        & .hamburger__line:nth-child(2) {
          opacity: 0;
        }
        & .hamburger__line:nth-child(3) {
          transform: translateY(-8px) rotate(-45deg);
        }
      }
    }

    & .top-bar__link {
      text-decoration: none;
      color: var(--color-text);
      font-size: 0.9rem;
      font-weight: 500;
      opacity: 0.8;
      transition: opacity 0.2s;

      @media (max-width: 768px) {
        font-size: var(--size-step-1);
        padding-block: var(--space-s);
        border-bottom: 1px solid var(--color-border);
        width: 100%;

        &:last-child {
          border-bottom: none;
        }
      }

      &:hover {
        opacity: 1;
      }
    }
  }
}