/*
Title: Restaurant Navigation Shared Styles
Description: Shared horizontal scroll controls for restaurant food menu and wine list navigation.
Placement: Fluent Snippets > CSS > Front-end only.
*/

/* Navigation wrappers */
.restaurant-menu-nav,
.restaurant-wine-list-nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* Navigation bottom spacing */
:root {
  --restaurant-nav-bottom-gap: clamp(2rem, 4vw, 3rem);
  --restaurant-nav-bottom-gap-scrollable: clamp(3.25rem, 5vw, 4.25rem);
}

.restaurant-menu-nav,
.restaurant-wine-list-nav {
  margin-bottom: var(--restaurant-nav-bottom-gap);
}

.restaurant-menu-nav.is-scrollable,
.restaurant-wine-list-nav.is-scrollable {
  margin-bottom: var(--restaurant-nav-bottom-gap-scrollable);
}

/* Horizontal navigation lists */
.restaurant-menu-nav__list,
.restaurant-wine-list-nav__list {
  order: 1;
  flex: 0 0 100%;

  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  padding-bottom: 0 !important;

  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}

/* Center items when the navigation is not scrollable */
.restaurant-menu-nav:not(.is-scrollable) .restaurant-menu-nav__list,
.restaurant-wine-list-nav:not(.is-scrollable) .restaurant-wine-list-nav__list {
  justify-content: center !important;
}

/* Keep scrollable lists left-aligned */
.restaurant-menu-nav.is-scrollable .restaurant-menu-nav__list,
.restaurant-wine-list-nav.is-scrollable .restaurant-wine-list-nav__list {
  justify-content: flex-start !important;
}

/* Hide native scrollbar: Chrome, Edge, Safari */
.restaurant-menu-nav__list::-webkit-scrollbar,
.restaurant-wine-list-nav__list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Arrow controls */
.restaurant-menu-nav .restaurant-nav-scroll-button,
.restaurant-wine-list-nav .restaurant-nav-scroll-button {
  order: 2;

  display: none;

  position: static !important;

  width: 1.8rem !important;
  height: 1.8rem !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0.85rem 0.35rem 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  background: transparent !important;
  color: rgba(0, 0, 0, 0.32) !important;

  font-family: inherit !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition:
    color 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}

/* Show arrows only when the navigation is scrollable */
.restaurant-menu-nav.is-scrollable .restaurant-nav-scroll-button,
.restaurant-wine-list-nav.is-scrollable .restaurant-nav-scroll-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hover / focus / active states */
.restaurant-menu-nav .restaurant-nav-scroll-button:hover,
.restaurant-wine-list-nav .restaurant-nav-scroll-button:hover,
.restaurant-menu-nav .restaurant-nav-scroll-button:focus,
.restaurant-wine-list-nav .restaurant-nav-scroll-button:focus,
.restaurant-menu-nav .restaurant-nav-scroll-button:focus-visible,
.restaurant-wine-list-nav .restaurant-nav-scroll-button:focus-visible,
.restaurant-menu-nav .restaurant-nav-scroll-button:active,
.restaurant-wine-list-nav .restaurant-nav-scroll-button:active {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  background: transparent !important;
  color: rgba(0, 0, 0, 0.62) !important;
  text-decoration: none !important;
}

/* Subtle movement on hover */
.restaurant-menu-nav .restaurant-nav-scroll-button--prev:hover,
.restaurant-wine-list-nav .restaurant-nav-scroll-button--prev:hover,
.restaurant-menu-nav .restaurant-nav-scroll-button--prev:focus-visible,
.restaurant-wine-list-nav .restaurant-nav-scroll-button--prev:focus-visible {
  transform: translateX(-2px) !important;
}

.restaurant-menu-nav .restaurant-nav-scroll-button--next:hover,
.restaurant-wine-list-nav .restaurant-nav-scroll-button--next:hover,
.restaurant-menu-nav .restaurant-nav-scroll-button--next:focus-visible,
.restaurant-wine-list-nav .restaurant-nav-scroll-button--next:focus-visible {
  transform: translateX(2px) !important;
}

/* Disabled arrows */
.restaurant-menu-nav .restaurant-nav-scroll-button:disabled,
.restaurant-wine-list-nav .restaurant-nav-scroll-button:disabled {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  background: transparent !important;
  color: rgba(0, 0, 0, 0.26) !important;
  opacity: 0.22 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Desktop/laptop drag behaviour */
@media (min-width: 1025px) {
  .restaurant-menu-nav__list,
  .restaurant-wine-list-nav__list {
    cursor: grab;
  }

  .restaurant-menu-nav__list.is-dragging,
  .restaurant-wine-list-nav__list.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  .restaurant-menu-nav__list.is-dragging .restaurant-menu-nav__link,
  .restaurant-wine-list-nav__list.is-dragging .restaurant-wine-list-nav__link {
    pointer-events: none;
  }
}

/* Mobile tuning */
@media (max-width: 767px) {
  .restaurant-menu-nav .restaurant-nav-scroll-button,
  .restaurant-wine-list-nav .restaurant-nav-scroll-button {
    width: 1.7rem !important;
    height: 1.7rem !important;
    margin-top: 0.7rem !important;
    font-size: 1.4rem !important;
  }
}