/* top code here more related to the animation
   a bit lower down is the anchor positioning
   and then general styling */

/* Getting the menu in the right spot
   with anchor positioning */

.user-button {
  padding: 0;
  border-radius: 100vw;
  aspect-ratio: 1;
  anchor-name: --profile-button;
}

.profile-menu {
  display: none;
  /* anchoring to the button */
  position: absolute;
  position-anchor: --profile-button;
  margin: 0;
  inset: auto;
  /* bottom: anchor(bottom); */
  top: anchor(bottom);
  left: anchor(right);
  opacity: 0;
  /* for display animations */
  transition: opacity 1s, display 1s, overlay 1s; 
  transition-behavior: allow-discrete;

  position-try-fallbacks: --left;

  margin-left: 0.25rem;

  & > * {
    padding: 0.5rem;
  }

  &:popover-open {
    display: grid;
    opacity: 1;

    @starting-style {
      display: grid;
      opacity: 0;
    }
  }
}

@position-try --left {
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);
}

@layer general-styling {
  :root {
    --clr-surface-1: hsl(240, 29%, 8%);
    --clr-surface-2: hsl(240, 29%, 12%);
    --clr-surface-3: hsl(240, 29%, 16%);
    --pop-bg: hsl(197deg 2.16% 21.09%);
    /* BUTTONS */
    --btn-border-radius: 0.25rem;
    --btn-default-surface: var(--clr-surface-2);
    --btn-default-text: var(--clr-text-2);
    --btn-default-surface-hover: var(--clr-surface-3);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
  }

  body {
    margin: 0;
    background-color: var(--clr-surface-1);
    color: white;
    min-height: 100dvh;

    font-size: 1rem;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin-block-end: 0;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1;
  }

  h1 {
    font-size: 1rem;
    text-align: center;
    margin-block-start: 2rem;
  }

  img,
  picture {
    max-width: 100%;
    display: block;
  }

  input,
  button,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
  }

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  :is(button, .button) {
    display: inline-flex;
    cursor: pointer;
    text-decoration: none;
    padding: 1rem 2rem;
    font-weight: 500;
    background-color: var(--btn-surface, var(--btn-default-surface));
    color: white;
    border: 0;
    border-radius: 1rem;
    transition: scale 0.125s;
  }

  :is(button, .button):is(:hover, :focus-visible) {
    background-color: var(
      --btn-surface-hover,
      var(--btn-default-surface-hover)
    );
  }

  :is(button, .button):active {
    scale: 0.95;
  }

  html {
    font-size: 2rem;
  }

  nav {
    max-inline-size: 900px;
    margin: var(--size-900) auto;
    background-color: var(--clr-surface-3);
    border-radius: 1rem;
    margin: 3rem auto;
    padding: 1rem 2rem;
  }

  ul {
    list-style: none;
    margin: 0;

    padding-inline: 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .user-button {
    border: 6px solid var(--clr-surface-3);
    &:hover,
    &:focus-visible {
      outline: 0;
      border-color: hsl(from var(--clr-surface-2) h s 45%);
    }
  }

  .profile-image {
    aspect-ratio: 1;
    border-radius: 100%;
    width: 75px;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .profile {
    display: grid;
    gap: 0.25rem;
  }

  .profile-menu {
    /* general styling for the dialog */
    border: 0;
    padding: 0;
    border-radius: 0.25rem;
    background: var(--pop-bg);
    color: white;
    font-size: 0.5rem;
    overflow: hidden;
  }

  .profile-menu button {
    padding: var(--size-300);
    border-top: 1px solid var(--clr-surface--1);
    border-radius: 0;
    background-color: var(--pop-bg);
  }
}