/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use './app-bar/core';
@use '../core/styles/theme';
@use '../core/styles/tokens/theme/color-emphasis';
@use '../focus-indicator';
@use '../state-layer';
@use '../icon';

.forge-app-bar {
  @include core.tokens;
  @include theme.provide(
    (
      primary: #{core.token(foreground)},
      on-primary: rgba(black, color-emphasis.value(highest)),
      text-high: rgba(white, color-emphasis.value(highest)),
      text-medium: rgba(white, color-emphasis.value(medium)),
      text-low: rgba(white, color-emphasis.value(medium-low)),
      outline-high: rgba(white, color-emphasis.value(highest)),
      outline-medium: rgba(white, color-emphasis.value(medium)),
      outline-low: rgba(white, color-emphasis.value(medium-low))
    )
  );
}

.forge-app-bar {
  @include core.base;
  @include core.row;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'start';

  &:has(.forge-app-bar__section-center),
  &:has(.forge-app-bar__section-end) {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: 'start center end';
  }

  &:has(.forge-app-bar__section-end):not(:has(.forge-app-bar__section-center)) {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'start end';
  }

  &--raised {
    @include core.elevation-raised;
  }

  &__logo {
    @include core.logo;

    @include icon.provide-theme(
      (
        font-size: #{core.token(logo-font-size)}
      )
    );
  }

  &__title,
  .forge-app-bar__title h1 {
    @include core.title;
  }

  &__title {
    display: grid;
    align-items: center;
  }

  a.forge-app-bar__title {
    @include core.anchor-base;

    @include focus-indicator.keyframes;
    @include focus-indicator.standalone($type: inward);
    @include focus-indicator.provide-theme(
      (
        color: currentColor,
        inward-offset: 2px,
        shape: var(--forge-shape-medium)
      )
    );
  }

  &__logo-title-container {
    @include core.logo-title-container;

    &:has(a.forge-app-bar__title) {
      cursor: pointer;
      height: 100%;

      @include state-layer.standalone;
      @include state-layer.provide-theme(
        (
          color: currentColor
        )
      );
    }
  }

  &__section {
    @include core.section;
  }

  &__section-start,
  &__section-center,
  &__section-end {
    @include core.section;
  }

  &__section-start,
  &__section-end {
    @include focus-indicator.provide-theme(
      (
        outward-offset: 0px // Required unit
      )
    );
  }

  &__section {
    &-start {
      grid-area: start;
    }

    &-center {
      grid-area: center;
      justify-content: center;
    }

    &-end {
      grid-area: end;
      justify-content: end;
    }
  }
}
