@use '@/scss/underscore' as _;

.navBar {
  width: 100%;
  min-height: 44px;
  @include _.flex-row;
  justify-content: center;
  padding: _.unit(3) _.unit(10);
  position: relative;
  color: var(--color-type-primary);

  > svg {
    fill: current-color;
  }

  .title {
    font: var(--font-title-3);
  }
}

.backButton {
  position: absolute;
  left: _.unit(-2);
  top: 50%;
  transform: translateY(-50%);
  font: var(--font-label-2);
  @include _.flex-row;
  cursor: pointer;
}

:global(body.mobile) {
  .backButton > span {
    display: none;
  }
}

:global(body.desktop) {
  .backButton {
    &:hover {
      text-decoration: underline;
    }
  }
}
