@layer components, responsive;

@layer components {
  [data-state-icon] { display: inline-grid; place-items: center; }
  [data-state-icon][hidden] { display: none; }

  html [data-menu-panel].profile-menu-panel {
    width: min(280px, calc(100vw - 24px));
    min-width: 240px;
    max-height: min(570px, calc(100dvh - 96px));
    padding: 8px;
    overflow-y: auto;
  }

  html .profile-menu-panel a,
  html .profile-menu-panel button { min-height: 42px; font-size: 12px; font-weight: 750; }

  html .profile-menu-panel a > svg,
  html .profile-menu-panel button > svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
  }
}

@layer responsive {
  @media (max-width: 768px) {
    html .header-main__tools--end .notification-link { display: inline-flex; }
  }

  @media (max-width: 640px) {
    html .header-main { grid-template-columns: minmax(112px, 1fr) auto minmax(112px, 1fr); }
    html .header-main__tools { min-width: 0; }
    html .header-main__tools--end { gap: 3px; }
    html .header-main__tools--end .icon-button,
    html .header-main__tools--end .profile-trigger { width: 36px; min-height: 36px; }
    html [data-menu-panel].profile-menu-panel { position: fixed; inset-block-start: 58px; inset-inline: 10px; width: auto; max-height: calc(100dvh - 76px); }
  }
}