@import '../../scss/styles.scss';

.app-header {
  position: relative;
  width: 100%;
  height: var(--app-header-height);
  z-index: var(--z-modal);

  &__mobile-nav-toggler {
    display: none;
  }

  // place the localizer outside the `overflow: hidden` container so that the popup is visible
  // this means we need to use a placeholder div so that the space is retained in the DOM
  [dir='rtl'] &__localizer {
    right: unset;
    left: base(4.5);
  }
  &__localizer {
    position: absolute;
    top: 50%;
    right: base(4.5);
    transform: translate3d(0, -50%, 0);
  }

  &__localizer-spacing {
    visibility: hidden;
  }

  &__bg {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  &--show-bg {
    opacity: 1;
  }

  &__content {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--gutter-h);
    position: relative;
    flex-grow: 1;
  }

  &__wrapper {
    display: flex;
    gap: calc(var(--base) / 2);
    align-items: center;
    height: 100%;
    flex-grow: 1;
    justify-content: space-between;
    overflow: hidden;
  }

  &__account {
    position: relative;

    &:focus:not(:focus-visible) {
      opacity: 1;
    }

    // Use a pseudo element for the accessability so that it doesn't take up DOM space
    // Also because the parent element has `overflow: hidden` which would clip an outline
    &:focus-visible {
      outline: none;

      &::after {
        content: '';
        border: var(--accessibility-outline);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
      }
    }
  }

  &__controls-wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
  }

  &__step-nav-wrapper {
    flex: 1;
    overflow: auto;
    display: flex;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__actions-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: calc(var(--base) / 2);
    margin-right: var(--base);
  }

  &__gradient-placeholder {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--base);
    height: var(--base);
    background: linear-gradient(to right, transparent, var(--theme-bg));
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: calc(var(--base) / 2);
    flex-shrink: 0;
    max-width: 600px;
    overflow: auto;
    white-space: nowrap;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__last-action {
    margin-right: var(--base);
  }

  @include large-break {
    &__actions {
      max-width: 500px;
    }
  }

  @include mid-break {
    &__gradient-placeholder {
      right: var(--base);
    }

    &__actions {
      max-width: 300px;
      margin-right: var(--base);
    }
  }

  @include small-break {
    &__localizer {
      right: base(2);
    }

    &--nav-open {
      .app-header__localizer {
        display: none;
      }
    }

    &__mobile-nav-toggler {
      display: flex;
      align-items: center;

      &.nav-toggler--is-open {
        opacity: 0.5;
      }
    }

    &__step-header {
      // TODO: overflow the step header instead of hide it
      display: none;
    }

    &__gradient-placeholder {
      right: 0;
    }

    &__actions {
      max-width: 150px;
      margin-right: 0;
    }
  }
}
