/*------------------------------------------------------------------
[Table of contents]

1. .header
2. .sidemenu-trigger
3. .floaty-bar
-------------------------------------------------------------------*/
/*-----------------
    1. HEADER
-----------------*/
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 80px;
  background-color: var(--color-header-background);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;

  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 80px;
    height: 100%;

    &.logo-encased {
      background-color: var(--color-header-logo-background);
    }
  }

  .header-actions {
    display: flex;
    align-items: center;

    &.header-actions-full {
      height: 100%;
    }

    &.search-bar {
      width: 30%;
      margin-right: 26px;

      #vk-search-form,
      .header-search-dropdown {
        width: 100%;
        height: 100%;
      }

      .search-form-wrap {
        width: 100%;
        height: 100%;

        .dropdown-box {
          width: 100%;
          padding-bottom: 0;

          .loader-spinner-wrap {
            display: flex;
            justify-content: center;
          }
        }
      }
    }

    .navigation {
      margin-right: 16px;
    }

    .progress-stat {
      width: 110px;
      margin-right: 36px;
    }

    .login-button,
    .register-button {
      padding: 0 26px;
      margin-right: 12px;

      &:last-child {
        margin-right: 28px;
      }
    }

    .login-form {
      margin: 0 14px 0 12px;

      .button {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
      }
    }

    .point-item-list {
      margin-right: 26px;
    }
  }

  .header-brand {
    display: flex;
    align-items: center;

    .header-brand-text {
      color: var(--color-header-text);
      font-family: var(--font-secondary);
      font-size: $fs-20;
      font-weight: $weight-black;
      text-transform: uppercase;

      &:first-child {
        margin-left: 20px;
      }
    }
  }

  .sidemenu-trigger,
  .mobilemenu-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    cursor: pointer;
  }

  .sidemenu-trigger {
    &.active,
    &:hover {
      .icon-grid {
        fill: var(--color-header-icon-hover);
      }
    }

    .icon-grid {
      pointer-events: none;
      transition: fill .3s ease-in-out;
    }
  }

  .mobilemenu-trigger {
    display: none;

    .burger-icon {
      .burger-icon-bar {
        background-color: var(--color-header-mobilemenu-trigger-icon);
      }
    }
  }

  .input-search {
    width: 100%;
  }

  .action-list {
    height: 80px;

    &.action-list-small {
      height: 60px;

      &::before,
      &::after {
        display: none;
      }

      .action-list-item {
        &.unread {
          &::after {
            top: 16px;
          }
        }
      }
    }

    &.action-list-mobile {
      padding: 0;
      display: none;
    }

    &::before,
    &::after {
      top: 24px;
    }
  }

  .action-item-wrap {
    margin-left: 18px;

    &:last-child {
      margin-right: 18px;
    }

    & + {
      .action-item-wrap {
        margin: 0 18px 0 0;
      }
    }
  }

  .action-item {
    height: 80px;
    padding: 0 14px;
  }

  .progress-stat {
    .bar-progress-wrap {
      .bar-progress-info {
        color: var(--color-header-text);
      }
    }
  }

  .point-item {
    .point-item-text {
      color: var(--color-header-text);
    }
  }
}

/*--------------------------
    2. SIDEMENU TRIGGER
--------------------------*/
.sidemenu-trigger {
  .icon-grid {
    fill: var(--color-header-icon);
  }

  &.active {
    .icon-grid {
      fill: var(--color-icon-highlighted);
    }
  }
}

/*---------------------
    3. FLOATY BAR
---------------------*/
.floaty-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  background-color: var(--color-header-background);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10000;
  display: none;

  .login-button {
    padding: 0 26px;
  }
}

/*--------------------
    MEDIA QUERIES 
--------------------*/
@media screen and (max-width: 1500px) {
  .header {
    .header-brand {
      .header-brand-text {
        display: none;
      }
    }
  }
}

@media screen and (max-width: 1365px) {
  .header {
    &.logged-out {
      .header-actions {
        .mobilemenu-trigger {
          display: flex;
        }
      }
    }

    .header-actions {
      .sidemenu-trigger,
      .navigation,
      .point-item-list {
        display: none;
      }

      &:last-child {
        .action-item-wrap {
          display: none;
        }
      }

      #header-notifications {
        .action-list {
          &::before {
            display: none;
          }
        }
      }
  
      .mobilemenu-trigger {
        display: flex;
      }

      &.search-bar {
        width: 50%;
      }

      .progress-stat {
        margin-right: 26px;
      }
    }
  }
}

@media screen and (max-width: 960px) {
  .header {
    height: 60px;
    
    .logo {
      width: 60px;
    }

    &.logged-out {
      .header-actions {
        &:nth-last-child(2) {
          display: block;
        }

        &:last-child {
          display: none;
        }

        .navigation {
          display: none;
        }
      }
    }

    .action-list {
      &.action-list-mobile {
        display: flex;
      }
    }

    .header-actions {
      &:last-child {
        display: none;
      }

      .header-brand {
        .logo {
          display: flex;
          justify-content: center;
          width: 60px;
          margin-left: 0;
        }
      }

      .mobilemenu-trigger {
        width: 60px;
        height: 60px;
      }

      &.search-bar {
        width: 100%;
        margin-right: 0;
        position: fixed;
        top: 60px;
        height: 60px;
        opacity: 0;
        visibility: hidden;
        transform: translate(0, -20px);
        transition: transform .2s ease-in-out, opacity .2s ease-in-out, visibility .2s ease-in-out;

        &.search-bar-active {
          opacity: 1;
          visibility: visible;
          transform: translate(0, 0);
        }

        .interactive-input {
          height: 100%;

          input {
            border-radius: 0;
          }

          .interactive-input-action,
          .interactive-input-icon-wrap {
            display: none;
          }
        }
      }

      .progress-stat {
        display: none;
      }
    }
  }

  .floaty-bar {
    display: flex;
  }

  body {
    &.vikinger-logged-out {
      padding-bottom: 60px;
    }
  }
}