.nav_component {
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  .nav_desktop_contain,
  .nav_mobile_layout {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  &:has(.w-nav-button.w--open) {
    .nav_mobile_layout {
      border-radius: var(--radius--small);
      border: 1px solid transparent;
      padding-left: var(--_spacing---space--3);
      padding-right: var(--_spacing---space--3);
    }
  }
}

.nav_component.is-scrolling-down {
  transform: translateY(-100%);
  .nav_desktop_contain {
    padding-left: var(--_spacing---space--2);
    padding-right: var(--_spacing---space--2);
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.07);
  }

  .nav_mobile_layout {
    padding-left: var(--_spacing---space--3);
    padding-right: var(--_spacing---space--3);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
  }
}

.nav_component.is-stopped {
  transform: translateY(0%);
  .nav_desktop_contain {
    padding-left: var(--_spacing---space--2);
    padding-right: var(--_spacing---space--2);
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.07);
  }

  .nav_mobile_layout {
    padding-left: var(--_spacing---space--3);
    padding-right: var(--_spacing---space--3);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
  }
}

.nav_component.is-scrolling-up {
  transform: translateY(0%);
  .nav_desktop_contain {
    padding-left: var(--_spacing---space--2);
    padding-right: var(--_spacing---space--2);
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.07);
  }

  .nav_mobile_layout {
    padding-left: var(--_spacing---space--3);
    padding-right: var(--_spacing---space--3);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
  }
}