@import '../config/import';
@import './skip-link';

.crayons-header {
  height: var(--header-height);
  background: var(--header-bg);
  box-shadow: 0 1px 1px var(--header-shadow);
  z-index: var(--z-sticky);

  .default-header & {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
  }

  &__container {
    max-width: var(--site-width);
    padding: 0 var(--layout-padding);
    margin: auto;
    display: flex;
    align-items: center;
    position: relative;
    height: var(--header-height);
  }

  .c-indicator {
    position: absolute;
    top: calc(var(--su-1) * -1);
    right: 0;
    box-shadow: 0 0 0 2px var(--header-bg);
  }
}

// Search bar
.crayons-header--search {
  max-width: 680px;
  flex: 1 auto;
  margin: 0 var(--su-2);
  display: none;

  @media (min-width: $breakpoint-m) {
    margin: 0 var(--su-4);
    display: block;
  }
  .crayons-header--search-input {
    padding-left: 40px;
    padding-right: 142px;
  }  
}

.main-search-page {
  .crayons-textfield {
    padding-left: 40px;
  }
}

.crayons-header--search-typeahead {
  border: 1px solid var(--base-20);
  border-radius: var(--radius);
  background: var(--card-bg);
  position: absolute;
  box-shadow: var(--shadow-smooth);
  top: 41px;
  left: 0;
  right: 0;
  li {
    padding: 8px;
    border-bottom: 1px solid var(--base-3);
    &:first-child {
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
    }
    &:hover {
      background: var(--base-10);
    }
    &.crayons-header--search-typeahead-item-selected {
      background: var(--base-20);
    }
    strong {
      color: var(--body-color);
      display: block;
    }
    .crayons-header--search-typeahead-item-preheader {
      font-size: 12px;
      color: var(--base-60);
    }
    .crayons-header--search-typeahead-item-subheader {
      font-size: 12px;
      color: var(--base-60);
    }
  }
  .crayons-header--search-typeahead-footer {
    background: var(--base-10);
    font-size: 13px;
    border-top: 1px solid var(--card-border);
    border-bottom-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    padding: 12px 8px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    span {
      font-size: 14px;
    }
    a {
      color: var(--body-color);
      font-weight: bold;
      padding-left: 4px;
    }
  }
}

.crayons-header--search-brand-indicator {
  position: absolute;
  right: 8px;
  top: 3px;
  display: block;
  font-size:13px;
  color: var(--base-60);
  background: var(--form-bg);
  padding-left:3px;
  svg {
    fill: var(--base-60);
    height: 14px;
    width:14px;
    vertical-align: -2px;
  }
}

// Dropdown under profile picture / hamburger icon
.crayons-header__menu {
  @media (min-width: $breakpoint-s) {
    perspective: 1000px;
  }

  &__dropdown {
    transform-style: preserve-3d;
    transform-origin: top right;
    transition: all var(--transition-props);
    transform: var(
      --dropdown-transform,
      translateY(calc(1 * var(--su-1))) rotateX(-10deg)
    );
    opacity: var(--dropdown-opacity, 0);
    visibility: var(--dropdown-visibility, hidden);
  }

  &.showing {
    --dropdown-transform: translateY(0) rotateX(0);
    --dropdown-opacity: 1;
    --dropdown-visibility: visible;
  }
}

.navigation-progress {
  --duration: 3600ms;
  --delay: 250ms;
  position: fixed;
  top: 0;
  background: var(--accent-brand);
  z-index: var(--z-popover);
  height: var(--su-1);
  width: 0;
  &.showing {
    display: block;
    animation: showProgressBar var(--duration) ease-in-out;
    animation-delay: var(--delay);
    animation-fill-mode: forwards;
  }
}

@keyframes showProgressBar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
