/*
 * Copyright 2025 Marek Kobida
 * Last Updated: 14.08.2025
 */

:root {
  --HeaderMenu-z-index: 16;

  --HeaderMenuLeft-background-color: var(--body-background-color);
  --HeaderMenuLeft-box-shadow: 0 0 64px hsla(0, 0%, 0%, 0.5);
  --HeaderMenuLeft-color: var(--body-color);

  --HeaderMenuRight-background-color: hsla(0, 0%, 0%, 0.5);
}

.HeaderMenu {
  --border-color: currentColor;
  --icon-size: 20px;

  inset: 0;
  position: fixed;
  z-index: var(--HeaderMenu-z-index);

  .HeaderMenuLeft {
    background-color: var(--HeaderMenuLeft-background-color);
    box-shadow: var(--HeaderMenuLeft-box-shadow);
    color: var(--HeaderMenuLeft-color);
    flex-grow: 1;

    @media (min-width: 640px) {
      flex-basis: 640px;
      flex-grow: 0;
    }

    .HeaderMenuLink {
      .icon {
        opacity: 0.5;
      }

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

    input {
      background-color: transparent;
      border: 0;
    }
  }

  .HeaderMenuRight {
    background-color: var(--HeaderMenuRight-background-color);

    @media (min-width: 640px) {
      flex-grow: 1;
    }
  }
}