@use 'apps/dashboard/src/variables' as *;

.topbar {
  align-items: center;
  background-color: $color-light-stronger;
  border-bottom: 1px solid $color-neutral-light;
  display: flex;
  height: var(--app-topbar-height);
  justify-content: space-between;
  left: 0;
  padding: 0 var(--app-layout-padding-right) 0 rhythm(2);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--app-zindex-topbar);

  .is-stage {
    position: absolute;
    height: rhythm(4);
    width: rhythm(4);
    left: calc(rhythm(16) + rhythm(2));
    top: rhythm(1.5);
  }
  .topbar-logo {
    @include reset-button();
    cursor: pointer;

    .topbar-logo-expanded {
      display: block;
      width: var(--app-topbar-logo-width);
      height: auto;
      // this was based on Material. TODO: review breakpoints using pastanaga-angular variables
      @media screen and (max-width: 959px) {
        display: none;
      }
    }
  }

  .topbar-buttons {
    display: flex;
    gap: rhythm(2);
  }

  .topbar-actions {
    align-items: center;
    display: flex;
    gap: rhythm(2);
  }

  .topbar-separator {
    background-color: $color-neutral-lighter;
    height: 100%;
    margin: 0 rhythm(3);
    width: 1px;
  }

  .standalone-config {
    align-items: center;
    cursor: default;
    display: flex;
    gap: rhythm(1);

    .valid {
      color: $color-primary-regular;
    }
    .invalid {
      color: $color-secondary-strong;
    }
  }
}
