@import 'styles/settings';
@import 'styles/functions';

.c-header {
  background: white;
  width: 100%;
  height: $size-header;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 10000;

  nav {
    display: flex;
    justify-content: flex-end;;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 100%;
    background: white;

    ul {
      display: flex;
      justify-content: space-between;

      > li {
        list-style: none;
        position: relative;

        > a {
          position: relative;
          z-index: 2;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          height: $size-header;
          padding: 0 ($space-1 * 2);
          background: white;
          color: $color-primary;
          fill: $color-primary;
          font-size: 12px;
          font-weight: 500;
          letter-spacing: 1.4px;
          transition: all $animation-time $ease-in-out-sine;
          text-transform: uppercase;

          > * {
            margin: 0 $space-1 0 0;
            &:last-child { margin: 0; }
          }

          &:hover { background: darken(white, 5%); }
          &:active { background: darken(white, 10%);}
          &.-active {
            background: $color-primary;
            color: white;
            fill: white;
          }
        }
      }
    }
  }

  // LOGO
  .c-header-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 ($space-1 * 2);
    margin: 0;

    .header-logo {
      position: relative;
      display: block;
      width: 160px;
      height: $size-header;
      background: url('https://rawcdn.githack.com/Vizzuality/aqueduct-water-risk/f84043796b88afd1903022b1eb1047b20fb26f07/public/images/logo.png') center no-repeat;
      background-size: contain;

      span {
        display: block;
        text-indent: -9999px;
      }
    }

    .header-title {
      display: block;
      padding: 0 0 0 ($space-1 * 2);
      font-size: $font-size-small;
      color: $color-primary;
      text-transform: uppercase;
      letter-spacing: 1.4px;
      white-space: nowrap;
    }
  }
}