/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:08 GMT
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:08 GMT
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:08 GMT
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:08 GMT
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:06 GMT
 */
/* mixins & extensions */
/* helper to properly scale internal durations */
/**
* Currently only used in Checkbox.
*/
/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-navigation-width: Specifies the width of the component's content area.
* @prop --calcite-navigation-background: Specifies the background color of the component.
* @prop --calcite-navigation-border-color: Specifies the border color of the component.
*/
:host([hidden]) {
  display: none;
}

[hidden] {
  display: none;
}

.container {
  margin-inline: auto;
  display: flex;
  inline-size: 100%;
  flex-direction: column;
  margin-block: 0;
  margin-inline: auto;
  background-color: var(--calcite-navigation-background, var(--calcite-color-foreground-1));
}
.container.primary, .container.secondary, .container.tertiary {
  border-block-end: 1px solid;
  border-block-end-color: var(--calcite-navigation-border-color, var(--calcite-color-border-3));
}

.user,
.logo {
  display: flex;
}

.hide {
  display: none;
}

.primary {
  block-size: 4rem;
}

.secondary {
  block-size: 3rem;
}

.tertiary {
  block-size: 3rem;
}

.container-content {
  margin-inline: auto;
  display: flex;
  block-size: 100%;
  inline-size: 100%;
  margin-block: 0;
  inline-size: var(--calcite-navigation-width, 100%);
  max-inline-size: 100%;
}
.container-content.progress-bar {
  margin-block-start: 0.125rem;
}

slot[name] {
  display: flex;
  flex-direction: row;
}

slot[name=navigation-secondary]::slotted(calcite-navigation),
slot[name=navigation-tertiary]::slotted(calcite-navigation) {
  inline-size: 100%;
}

slot[name=content-start]::slotted(*),
slot[name=content-center]::slotted(*),
slot[name=content-end]::slotted(*) {
  display: flex;
  flex-direction: row;
  align-items: center;
}

slot[name=progress],
slot[name=progress] calcite-progress {
  inset-block-start: 0;
  inset-inline: 0;
}

slot[name=content-end] {
  margin-inline-start: auto;
}

slot[name=content-start] {
  margin-inline-end: auto;
}

slot[name=content-end],
slot[name=logo] ~ slot[name=user],
slot[name=user]:only-child {
  margin-inline-start: auto;
}

slot[name=content-center] {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

slot[name=content-start] ~ slot[name=content-center] {
  margin-inline-start: 0px;
}

slot[name=content-start] ~ slot[name=content-end],
slot[name=content-center] ~ slot[name=content-end],
slot[name=content-center] ~ slot[name=user],
slot[name=content-end] ~ slot[name=user] {
  margin: 0px;
}