@import "src/assets/scss/variables";

$header-height: 70px;
$header-logo-padding: 25px;
$header-menu-item-border-width: 3px;

.c-colllect-header {
  position: relative;
  z-index: 2;
}

.c-colllect-header,
.c-colllect-header--fixed {
  height: $header-height;
}

.c-colllect-header--fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  background: $color-white;
  box-shadow: 0 10px 20px rgba($color-rhino, 0.12);

  display: flex;
  align-items: stretch;
  justify-content: space-between;

  ul,
  li {
    padding: 0;
    margin: 0;
  }
}

.c-colllect-header--logo {
  display: flex;
  height: $header-height;
  padding: 0 $header-logo-padding;
  margin-left: $container-margin - $header-logo-padding;
  font-family: $font-family-cocogoose;
  font-size: 20px;
  line-height: $header-height;
  color: $color-shark;
  text-decoration: none;
  text-transform: lowercase;
  transition: background-color 150ms, color 150ms;

  align-items: stretch;

  &:hover {
    color: $color-white;
    background-color: $color-shark;
  }

  &-image {
    --colllect-logo-text-color: currentColor;
    width: 95px;
  }
}

.c-colllect-header--menu {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  ul {
    display: flex;
    height: $header-height;

    align-items: stretch;
    justify-content: space-between;
  }

  &-item {
    display: inline-block;
    padding-top: $header-menu-item-border-width;
    margin: 0 $header-logo-padding;
    font-weight: $font-weight-source-sans-pro-semibold;
    line-height: $header-height - $header-menu-item-border-width * 2;
    color: $color-gull-gray;
    text-decoration: none;

    &.router-link-active {
      border-bottom: $header-menu-item-border-width solid $color-chetwode-blue;
    }
  }
}

.c-colllect-header--right {
  display: flex;
}

.c-colllect-header--right-actions {
  display: flex;

  &-item {
    display: inline-block;
    padding-top: $header-menu-item-border-width;
    margin: 0 $header-logo-padding;
    line-height: $header-height - $header-menu-item-border-width * 2;
    text-decoration: none;

    align-items: stretch;
    justify-content: space-between;
  }
}

.c-colllect-header--right-user {
  display: flex;
  padding: 0 100px;
  line-height: $header-height;
  background-color: $color-chetwode-blue;
}
