@use 'variable/breakpoint' as *;

.header {
  @apply relative mb-[2px];
  border-top: 1px solid var(--mat-sys-outline-variant);
  background-color: var(--mat-sys-surface-container-lowest);
  ::ng-deep {
    .logo {
      color: var(--mat-sys-primary);
    }
  }
  .actions {
    ::ng-deep {
      a {
        color: var(--mat-sys-on-primary);
      }
    }
  }
  ::ng-deep {
    .hover-menu {
      background-color: var(--mat-sys-surface);
      box-shadow: var(--mat-sys-level1);
      .child {
        background-color: var(--mat-sys-surface);
        box-shadow: var(--mat-sys-level1);
      }
    }
    .user {
      .name {
        color: var(--mat-sys-on-primary);
      }
    }
  }
}

:host-context(.header-inverse) {
  .header {
    @apply mb-0;
  }
}

.spacer {
  flex: 1;
}

.header-left {
  .version {
    font-size: 1.2rem;
    margin-left: 0.4rem;
  }
}
.main-menu {
  .item {
    ::ng-deep {
      app-link {
        a {
          color: var(--mat-sys-on-surface);
          &:hover,
          &:focus,
          &.active {
            color: var(--mat-sys-primary);
          }
          &.active {
            &:after {
              background-color: var(--mat-sys-primary);
            }
          }
        }
      }
    }
  }
}
@media #{$lt-lg} {
  .main-menu {
    .item {
      ::ng-deep a {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }
  }
}

.app-name {
  @apply font-bold;
}
