menu.scss

:host {
  margin: 0;
  padding: 0;
}

.hy-menu-mobile {
  // TODO: Fix styles when mobile menu is implemented to header component.
  display: flex;
  min-height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  overflow-y: auto;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: 0.45s;
  width: 100%;
  z-index: 100;

  &.is-open {
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);

    &::after {
      opacity: 1;
      visibility: visible;
    }
  }

  &-breadcrumb-container {
    display: flex;
    flex-flow: column;
  }
}