payload/packages/ui/src/elements/AppHeader/index.scss

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

@layer payload-default {
  .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.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;
      width: 100%;
    }

    &__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;
      width: 100%;
    }

    &__step-nav-wrapper {
      flex-grow: 0;
      overflow: auto;
      display: flex;
      width: 100%;

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

    &__actions-wrapper {
      position: relative;
      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;
      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.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;
      }
    }
  }
}