/* stylelint-disable no-descending-specificity -- There are many non-trivial fixes in here */
.abs-box(@top: 0, @right: 0, @bottom: 0, @left: 0) {
  position: absolute;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}

.truncate (@max-width) {
  max-width: @max-width;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.gradient(@origin: top, @start: rgba(255, 255, 255, 0), @stop: rgba(255, 255, 255, 1)) {
  background-color: @start;
  background-image: -webkit-linear-gradient(@origin, @start, @stop);
  background-image: -moz-linear-gradient(@origin, @start, @stop);
  background-image: -o-linear-gradient(@origin, @start, @stop);
  background-image: -ms-linear-gradient(@origin, @start, @stop);
  background-image: linear-gradient(@origin, @start, @stop);
}

.hamburger-button() {
  border: none;
  background-color: transparent;
  outline: none;

  > span {
    height: 2px;
    display: block;
    width: 100%;
    min-width: 16px;
    margin: 3px 0;
    background-color: @navbar-default-link-color;
    transition:
      transform 0.218s ease,
      opacity 0.218s ease;

    &:first-of-type {
      margin-top: 0;
    }

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  &:hover {
    > span {
      background-color: @navbar-default-link-hover-color;

      &:first-of-type {
        transform: translateY(-2px);
      }

      &:last-of-type {
        transform: translateY(2px);
      }
    }
  }
}

.hamburger-button-open() {
  > span {
    opacity: 0;

    &:first-of-type {
      opacity: 1;
      transform: translateY(5px) rotateZ(45deg);
    }

    &:last-of-type {
      opacity: 1;
      transform: translateY(-5px) rotateZ(-45deg);
    }
  }
}

.navbar-a(
@color: @navbar-default-link-color;
@hover-color: @navbar-default-link-hover-color
) {
  font-size: @menu-font-size;
  color: @color;

  &:hover,
  &:focus {
    background-color: transparent;
    color: @hover-color;
  }
}

.navbar-li(
@hover-color: @navbar-default-link-hover-color;
@hover-bg: @navbar-default-link-hover-bg;
@active-color: @navbar-default-link-active-color;
@active-bg: @navbar-default-link-active-bg;
@height: @header-computed-height
) {
  margin: 0;
  padding: 0 @padding-base-horizontal;
  float: left;
  display: inline-block;
  height: @height;

  @media (max-width: 875px) {
    padding: 0 (@padding-base-horizontal * 0.5);
  }

  &:hover,
  &:focus {
    background-color: @hover-bg;

    &.external {
      background-color: transparent;
    }
  }

  &.active,
  &.active:hover,
  &.active:focus {
    background-color: @active-bg;
  }

  > a,
  > view > a {
    .navbar-a();

    display: inline-block;
    line-height: @header-height;
    height: @height;
  }

  &.active {
    > a,
    > view > a {
      color: @active-color;
    }
  }

  &.divider {
    width: 1px;
    background-color: darken(@gray-lighter, 10%);
    display: block;
    height: @height;
    margin: 0;
    border: none;
  }
}

.menu-a(
@size: @menu-font-size;
@line-height: @menu-line-height;
@hover-color: @navbar-default-link-hover-bg;
) {
  display: block;
  font-size: @size;
  line-height: @line-height;
  padding: 0 @padding-base-horizontal;
  text-decoration: none;
  position: relative;
  background-color: transparent;
}

.menu-li(
@hover-color: @navbar-default-link-hover-bg;
@active-color: @gray-base;
@size: @menu-font-size;
@line-height: @menu-line-height;
) {
  list-style: none;
  display: block;
  padding: 0;
  margin: 0 0 @padding-base-vertical 0;

  a {
    .menu-a(@size, @line-height, @hover-color);
  }

  &.active {
    > a {
      color: @active-color;
    }
  }
}

.menu-ul(
@size;
@line-height;
@hover-color: @navbar-default-link-hover-bg;
@active-color: @gray-base;
) {
  display: block;
  margin: 0;
  padding: 0;

  li {
    .menu-li(@hover-color, @active-color, @size, @line-height);
  }
}

.cam-corporate-header() {
  .cam-corporate-header-base();

  a {
    .cam-corporate-header-link();
  }

  .navbar-brand {
    .cam-corporate-header-branding();
  }

  .container .navbar-brand {
    padding-left: 0;
  }

  .navbar-toggle {
    .cam-corporate-header-hamburger();
  }

  .sections-menu > ul {
    .cam-corporate-header-menu();
  }

  .app-menu > ul {
    .cam-corporate-header-nav();
  }
}

.cam-corporate-header-base() {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: @header-height;
  z-index: @zindex-navbar-fixed;
  margin-bottom: 0;
  border-top: @header-border-bottom-width solid @brand-primary;
  box-shadow: @box-shadow;
  color: @navbar-default-color;
  background-color: @navbar-default-bg;
  font-size: @navbar-font-size;

  ul {
    margin: 0;
    padding: 0;

    &.dropdown-menu {
      &::before {
        content: '';
        width: 100%;
        height: 4px;
        margin-top: -2px;
        display: block;
        background-color: inherit;
      }
      // not sure... all or only the top border
      border-top: none;
      box-shadow: @box-shadow;
    }
  }
}

.cam-corporate-header-link() {
  color: @navbar-default-link-color;
  text-decoration: none;

  &:hover,
  &:focus {
    color: @navbar-default-link-hover-color;
    text-decoration: none;
  }
}

.cam-corporate-header-branding() {
  font-size: @header-site-name-size;
  line-height: @header-computed-height;
  height: @header-computed-height;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: @header-computed-height / 4;
  padding-right: @grid-gutter-width / 2;
  color: @gray-base;
  .brand-logo when not (@header-brand-logo-font-size) {
    font-size: (@header-computed-height / 2);
  }
  .brand-logo when (@header-brand-logo-font-size) {
    font-size: @header-brand-logo-font-size;
  }
}

.cam-corporate-header-hamburger() {
  .hamburger-button();

  margin-top: 0;
  margin-bottom: 0;
  padding: 1px 6px;
  height: @header-computed-height;

  &.open {
    .hamburger-button-open();
  }
}

.cam-corporate-header-menu-item-link() {
  display: block;
  height: @header-computed-height;
  line-height: @header-height;
  padding: 0 6px;

  @media screen and (max-width: (@grid-float-breakpoint-max)) {
    height: auto;
    line-height: 1.6;
  }

  &:hover,
  &:focus {
    background-color: transparent;
  }

  &:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }
}

.cam-corporate-header-menu-item-button() {
  .cam-corporate-header-menu-item-link();

  background-color: transparent;
  border: none;
  color: @navbar-default-link-color;

  &:hover,
  &:focus {
    color: @navbar-default-link-hover-color;
  }
}

// menu is for links which will allow actions and are positioned on the left
.cam-corporate-header-menu() {
  float: left;

  > li {
    display: inline-block;
    list-style: none;
    background-color: transparent;

    &:empty {
      display: none;
    }

    > a {
      .cam-corporate-header-menu-item-link();
    }

    &:hover,
    &:focus {
      background-color: transparent;

      > a {
        background-color: transparent;
      }
    }

    &.active {
      background-color: @gray-lighter;

      > a {
        color: @gray-base;
      }
    }

    @media screen and (max-width: (@grid-float-breakpoint-max)) {
      padding: 0 (@header-computed-height * 0.25);
    }
  }

  &.collapse {
    visibility: visible;
    display: block;

    @media screen and (max-width: (@grid-float-breakpoint-max)) {
      visibility: hidden;
      display: none;
    }
  }

  @media screen and (max-width: (@grid-float-breakpoint-max)) {
    text-align: right;
    margin-left: 0;
    width: auto;
    border: none;
  }
}

// navigation is for links which will keep the user in the page/app context
// and are positioned on the right
// it extends/overrides some parts of .cam-corporate-header-menu()
.cam-corporate-header-nav() {
  .cam-corporate-header-menu();

  float: right;

  > li {
    > view > a {
      .cam-corporate-header-menu-item-link();
    }

    &.active > view > a {
      color: @gray-base;
    }
  }
}

.cam-corporate-footer-base() {
  position: fixed;
  z-index: 99;
  height: @footer-height;
  line-height: @footer-height;
  font-size: smaller;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: @body-bg;
  border-top: 1px solid @gray-lighter;
  color: @gray-light;
}
