src/components/PageNavOverlay/PageNavOverlay.scss
@import '../../constants/styles';
@import '../../constants/overlay';

.PageNavOverlay {
  height: 32px;

  @include mobile {
    height: 36px;
  }

  font-family: 'Lato';
  font-weight: bold;
  color: var(--text-color);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  opacity: 0.85;

  position: relative;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inset-block-start: auto;
  margin-inline-start: auto;
  margin-inline-end: auto;
  background: var(--gray-8);
  border-radius: 4px;
  z-index: 0;
  inset-block-end: 20px;

  &.logo-bar-enabled {
    inset-block-end: 20px + $logo-bar-height;
  }

  .side-arrow-container {
    @include button-reset;
    width: 24px;
    height: 24px;

    @include mobile {
      width: 40px;
      height: 28px;
    }

    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;

    &:hover {
      background: var(--gray-10);
    }

    .side-arrow {
      width: 16px;
      height: 16px;
      color: var(--gray-0);
    }
  }

  .formContainer {
    height: 100%;
    display: flex;
    align-items: center;

    form {
      inset-block-start: -1px;
      position: relative;
      color: var(--gray-0);
      margin-bottom: 0;

      input {
        min-width: 8px;
        padding: 0;
        border: none;
        text-align: end;
        font-family: 'Lato';
        font-weight: bold;
        background: transparent;
        color: var(--gray-0);

        cursor: pointer;
        outline: none;
        border-bottom: 1px solid var(--icon-color);
        border-radius: 0px;
      }
    }
  }
}

.FadeOut {
  opacity: 0;
  transition: opacity 0.3s ease;
}
