Untitled

@import '../../../../style-tokens/formats/scss/variables';

.header-bar {
  background-color: var(--beacon-header-color-background);
  display: flex;
  justify-content: space-between;
  max-height: var(--beacon-header-size-height);
}

.header-bar-brand-zone {
  display: flex;
}

.header-bar-brand-zone-wordmark {
  padding: var(--beacon-header-word-mark-space-padding-medium) var(--beacon-header-word-mark-space-padding-large) var(--beacon-header-word-mark-space-padding-large) var(--beacon-header-word-mark-space-padding-large);
}

.header-bar-brand-zone-brandmark {
  display: none;
}

.header-bar-action-zone {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

.header-bar-action-zone-navigation-icon {
  padding-right: var(--beacon-header-action-zone-space-padding-medium);
}

.header-bar-action-zone-register,
.header-bar-action-zone-sign-in {
  display: flex;
  margin-right: var(--beacon-header-action-zone-space-padding-medium);
}

.header-bar-back-section {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: var(--beacon-header-action-zone-space-padding-medium) var(--beacon-header-action-zone-space-padding-large);
}

.header-bar-text {
  color: var(--beacon-header-action-zone-color-text);
  cursor: pointer;
  font-size: var(--beacon-header-action-zone-font-size);
  line-height: var(--beacon-header-action-zone-font-line-height);
  margin: 0 0 0 var(--beacon-header-action-zone-space-margin-medium);
}

.header-bar-cross-section {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin-right: var(--beacon-header-action-zone-space-margin-large);
}

@media screen and (min-width: $beacon-breakpoint-large) {
  .header-bar {
    height: var(--beacon-header-brandmark-size-height);
  }

  .header-bar-action-zone-navigation-icon {
    display: none;
  }

  .header-bar-brand-zone-brandmark,
  .header-bar-action-zone-register,
  .header-bar-action-zone-sign-in {
    display: flex;
  }

  .header-bar-brand-zone-wordmark {
    border-right: var(--beacon-header-word-mark-border-small) solid var(--beacon-header-word-mark-border-default);
    margin: var(--beacon-header-word-mark-space-margin-large) var(--beacon-header-word-mark-space-margin-x-large) var(--beacon-header-word-mark-space-margin-large) 0;
    padding: 0 var(--beacon-header-word-mark-space-padding-x-large);
  }

  .header-bar-action-zone-navigation-icon {
    svg {
      path {
        stroke: var(--beacon-header-navigation-icon-color); 
      }
    }
  }
}