@use '../layout' as *;

.hc-c-header {
  --shadow: 10px;

  background-color: var(--color-background);
  box-shadow: 0 var(--shadow) var(--shadow) (calc(var(--shadow) * -1)) var(--color-gray-light);
  position: relative;
  z-index: 1;

  > .ds-l-container {
    position: relative;
  }
}

// Add `ds-l-col.ds-l-col--auto` to give a higher specificity. This fixes the
// grid utility classes taking precedence over this class, which results in
// `flex-shrink` not getting applied on small width screen.
.hc-c-logo-link.ds-l-col.ds-l-col--auto {
  bottom: -2px; // optically aligns logo
  flex-shrink: 1;
  line-height: 1;
  position: relative;

  svg {
    max-width: 100%;
  }
}

.hc-c-header__name {
  color: var(--color-base);
}

.hc-c-header__actions {
  .hc-c-logged-out-links {
    flex-direction: row;
    gap: $spacer-4;
  }
}

.hc-c-action-menu-button {
  // We should add the ability to add a className to the
  // ClearIcon like we are doing for Menu Icon.
  // This would need to be done at the core design system
  .ds-c-clear-icon {
    margin-right: 8px;
  }
}

.hc-c-menu {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-lighter);
  box-shadow: 0 7px 10px -5px var(--color-gray-light);
  color: var(--color-primary-darker);
  left: 0;
  padding: $spacer-1;
  position: absolute;
  right: 0;

  // @TODO: marked for refactoring this calc
  top: calc(4em - 2px);
  z-index: 1;
}

.hc-c-header--logged-in .hc-c-menu {
  @media (min-width: $media-width-sm) {
    // Span only part of non-mobile screens
    left: auto;
    max-width: 30ch;
    min-width: 20ch;
  }
}

.hc-c-menu__links {
  gap: 0;

  li {
    padding: $spacer-1;
  }
}

.hc-c-menu__link {
  text-decoration: none;
}