@use 'ui-design-system/src/styles/semantic/index' as *;
/**
 * ==========================================================================
 * APPBAR COMPONENT STYLES
 * ==========================================================================
 * Material Design 3 inspired appbar component with design token integration.
 * Supports multiple height variants, positioning options, and content slots.
 * ==========================================================================
 */


// Tokens available globally via main application styles

.ui-appbar {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  z-index: $semantic-layer-appbar;
  transition: all $semantic-duration-short $semantic-easing-standard;
  background-color: $semantic-color-surface-primary;
  color: $semantic-color-text-primary;
  border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
  padding-left: $semantic-spacing-component-lg;
  padding-right: $semantic-spacing-component-lg;

  // Variant heights
  &[data-variant="compact"] {
    height: $semantic-sizing-appbar-compact;
    min-height: $semantic-sizing-appbar-compact;
  }

  &[data-variant="standard"] {
    height: $semantic-sizing-appbar-standard;
    min-height: $semantic-sizing-appbar-standard;
  }

  &[data-variant="large"] {
    height: $semantic-sizing-appbar-large;
    min-height: $semantic-sizing-appbar-large;
  }

  &[data-variant="prominent"] {
    height: $semantic-sizing-appbar-prominent;
    min-height: $semantic-sizing-appbar-prominent;
  }

  // Position variants
  &[data-position="fixed"] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  &[data-position="sticky"] {
    position: sticky;
    top: 0;
  }

  // Elevated state
  &[data-elevated="true"] {
    box-shadow: $semantic-shadow-elevation-2;
  }

  // Responsive adjustments
  @media (max-width: calc($semantic-breakpoint-md - 1px)) {
    padding-left: $semantic-spacing-component-md;
    padding-right: $semantic-spacing-component-md;

    &[data-variant="large"] {
      height: $semantic-sizing-appbar-standard;
      min-height: $semantic-sizing-appbar-standard;
    }

    &[data-variant="prominent"] {
      height: $semantic-sizing-appbar-large;
      min-height: $semantic-sizing-appbar-large;
    }
  }

  @media (max-width: calc($semantic-breakpoint-sm - 1px)) {
    &[data-variant="large"],
    &[data-variant="prominent"] {
      height: $semantic-sizing-appbar-compact;
      min-height: $semantic-sizing-appbar-compact;
    }
  }
}

// Left side components
.ui-appbar__left-icon {
  flex: 0 0 $semantic-sizing-touch-target;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  padding: $semantic-spacing-component-xs;
}

.ui-appbar__left-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: $semantic-spacing-component-xs;
  user-select: none;
  overflow: hidden;
  box-sizing: border-box;

  ::ng-deep img {
    max-height: calc(100% - #{$semantic-spacing-component-sm});
    width: auto;
    object-fit: contain;
  }
}

.ui-appbar__left-avatar {
  flex: 0 0 $semantic-sizing-touch-target;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $semantic-spacing-component-xs;
  box-sizing: border-box;
  overflow: hidden;
}

// Center title
.ui-appbar__title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: $semantic-typography-font-size-lg;
  font-weight: $semantic-typography-font-weight-medium;
  line-height: $semantic-typography-line-height-normal;
  padding: 0 $semantic-spacing-component-sm;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  // Adjust for prominent variant
  [data-variant="prominent"] & {
    font-size: $semantic-typography-font-size-lg;
    font-weight: $semantic-typography-font-weight-semibold;
    line-height: $semantic-typography-line-height-normal;
  }

  // Responsive adjustments
  @media (max-width: calc($semantic-breakpoint-sm - 1px)) {
    font-size: $semantic-typography-font-size-md;
    font-weight: $semantic-typography-font-weight-medium;
    line-height: $semantic-typography-line-height-normal;
  }
}

.ui-appbar__spacer {
  flex: 1 1 auto;
}

// Right side components
.ui-appbar__right-icon {
  flex: 0 0 $semantic-sizing-touch-target;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  padding: $semantic-spacing-component-xs;
}

.ui-appbar__right-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: $semantic-spacing-component-xs;
  user-select: none;
  overflow: hidden;
  box-sizing: border-box;

  ::ng-deep img {
    max-height: calc(100% - #{$semantic-spacing-component-sm});
    width: auto;
    object-fit: contain;
  }
}

.ui-appbar__right-avatar {
  flex: 0 0 $semantic-sizing-touch-target;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $semantic-spacing-component-xs;
  box-sizing: border-box;
  overflow: hidden;
}

.ui-appbar__right-menu {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: $semantic-spacing-component-xs;
  user-select: none;
}

// Icon styling for all slots
.ui-appbar__left-icon,
.ui-appbar__right-icon,
.ui-appbar__right-menu {
  ::ng-deep i,
  ::ng-deep mat-icon,
  ::ng-deep [class*="icon"] {
    font-size: $semantic-typography-font-size-lg;
    line-height: 1;
    color: $semantic-color-text-secondary;
    transition: color $semantic-duration-short $semantic-easing-standard;

    &:hover {
      color: $semantic-color-text-primary;
    }
  }
}