/** menu-button[data-side=down]>button>ul **/
@media screen {
  #body:has(#down-left:checked) menu-button[data-side=down]>button>ul {
    left: 50%;
  }

  #body:has(#down-top:checked) menu-button[data-side=down]>button>ul {
    top: 100%;
  }

  #body:has(#down-trans:checked) menu-button[data-side=down]>button>ul {
    transform: translateX(-50%) translateY(2px);
  }
}

/** menu-button[data-side=down-left]>button>ul **/
@media screen {
  #body:has(#downleft-right:checked) menu-button[data-side=down-left]>button>ul {
    right: 0;
  }

  #body:has(#downleft-top:checked) menu-button[data-side=down-left]>button>ul {
    top: 100%;
  }

  #body:has(#downleft-trans:checked) menu-button[data-side=down-left]>button>ul {
    transform: translateY(2px);
  }
}

/** menu-button[data-side=down-right]>button>ul **/
@media screen {
  #body:has(#downright-left:checked) menu-button[data-side=down-right]>button>ul {
    left: 0;
  }

  #body:has(#downright-top:checked) menu-button[data-side=down-right]>button>ul {
    top: 100%;
  }

  #body:has(#downright-trans:checked) menu-button[data-side=down-right]>button>ul {
    transform: translateY(2px);
  }
}

/** menu-button[data-side=up]>button>ul **/
@media screen {
  #body:has(#up-left:checked) menu-button[data-side=up]>button>ul {
    left: 50%;
  }

  #body:has(#up-bottom:checked) menu-button[data-side=up]>button>ul {
    bottom: 100%;
  }

  #body:has(#up-trans:checked) menu-button[data-side=up]>button>ul {
    transform: translateX(-50%) translateY(-2px);
  }
}

/** menu-button[data-side=up-left]>button>ul **/
@media screen {
  #body:has(#upleft-right:checked) menu-button[data-side=up-left]>button>ul {
    right: 0;
  }

  #body:has(#upleft-bottom:checked) menu-button[data-side=up-left]>button>ul {
    bottom: 100%;
  }

  #body:has(#upleft-trans:checked) menu-button[data-side=up-left]>button>ul {
    transform: translateY(-2px);
  }
}

/** menu-button[data-side=up-right]>button>ul **/
@media screen {
  #body:has(#upright-left:checked) menu-button[data-side=up-right]>button>ul {
    left: 0;
  }

  #body:has(#upright-bottom:checked) menu-button[data-side=up-right]>button>ul {
    bottom: 100%;
  }

  #body:has(#upright-trans:checked) menu-button[data-side=up-right]>button>ul {
    transform: translateY(-2px);
  }
}

/** menu-button[data-side=left]>button>ul **/
@media screen {
  #body:has(#left-right:checked) menu-button[data-side=left]>button>ul {
    right: 100%;
  }

  #body:has(#left-top:checked) menu-button[data-side=left]>button>ul {
    top: 50%;
  }

  #body:has(#left-trans:checked) menu-button[data-side=left]>button>ul {
    transform: translateX(-2px) translateY(-50%);
  }
}

/** menu-button[data-side=left-up]>button>ul **/
@media screen {
  #body:has(#leftup-right:checked) menu-button[data-side=left-up]>button>ul {
    right: 100%;
  }

  #body:has(#leftup-bottom:checked) menu-button[data-side=left-up]>button>ul {
    bottom: 0;
  }

  #body:has(#leftup-trans:checked) menu-button[data-side=left-up]>button>ul {
    transform: translateX(-2px);
  }
}

/** menu-button[data-side=left-down]>button>ul **/
@media screen {
  #body:has(#leftdown-right:checked) menu-button[data-side=left-down]>button>ul {
    right: 100%;
  }

  #body:has(#leftdown-top:checked) menu-button[data-side=left-down]>button>ul {
    top: 0;
  }

  #body:has(#leftdown-trans:checked) menu-button[data-side=left-down]>button>ul {
    transform: translateX(-2px);
  }
}

/** menu-button[data-side=right]>button>ul **/
@media screen {
  #body:has(#right-left:checked) menu-button[data-side=right]>button>ul {
    left: 100%;
  }

  #body:has(#right-top:checked) menu-button[data-side=right]>button>ul {
    top: 50%;
  }

  #body:has(#right-trans:checked) menu-button[data-side=right]>button>ul {
    transform: translateX(2px) translateY(-50%);
  }
}

/** menu-button[data-side=right-up]>button>ul **/
@media screen {
  #body:has(#rightup-left:checked) menu-button[data-side=right-up]>button>ul {
    left: 100%;
  }

  #body:has(#rightup-bottom:checked) menu-button[data-side=right-up]>button>ul {
    bottom: 0;
  }

  #body:has(#rightup-trans:checked) menu-button[data-side=right-up]>button>ul {
    transform: translateX(2px);
  }
}

/** menu-button[data-side=right-down]>button>ul **/
@media screen {
  #body:has(#rightdown-left:checked) menu-button[data-side=right-down]>button>ul {
    left: 100%;
  }

  #body:has(#rightdown-top:checked) menu-button[data-side=right-down]>button>ul {
    top: 0;
  }

  #body:has(#rightdown-trans:checked) menu-button[data-side=right-down]>button>ul {
    transform: translateX(2px);
  }
}

/** menu-button[data-side=center]>button>ul **/
@media screen {
  #body:has(#center-fixed:checked) menu-button[data-side=center]>button>ul {
    position: fixed;
  }

  #body:has(#center-left:checked) menu-button[data-side=center]>button>ul {
    left: 50%;
  }

  #body:has(#center-top:checked) menu-button[data-side=center]>button>ul {
    top: 50%;
  }

  #body:has(#center-trans:checked) menu-button[data-side=center]>button>ul {
    transform: translateX(-50%) translateY(-50%);
  }
}

/** menu-button[data-side=own-center]>button>ul **/
@media screen {
  #body:has(#owncenter-left:checked) menu-button[data-side=own-center]>button>ul {
    left: 50%;
  }

  #body:has(#owncenter-top:checked) menu-button[data-side=own-center]>button>ul {
    top: 50%;
  }

  #body:has(#owncenter-trans:checked) menu-button[data-side=own-center]>button>ul {
    transform: translateX(-50%) translateY(-50%);
  }
}