@import "./variables";

header {
  display: flex;
  width: 100%;
  background: #1d232b;
  position: sticky;
  top: 0;
  z-index: $zIndex * 2;
  box-shadow: 0 5px 5px rgba($cardColor, 0.5);
  .f-logo {
    max-width: $logoSize;
    margin-right: 1rem;
    img {
      width: 100%;
    }
  }
  .f-header-title {
    font-size: 1.5rem;
    margin: 0;
    margin-right: 1rem;
    min-width: max-content;
  }
  .f-header-items {
    width: 100%;
  }
  .f-header-link {
    list-style: none;
    margin: 0;
    li {
      float: left;
      margin-right: 1rem;
    }
  }
  .f-input-group {
    margin-bottom: 0;
  }
  .header-collapse-toggler {
    float: right;
    width: 40px;
    height: 30px;
    // margin-left: auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    z-index: $zIndex * 5;
    position: relative;
    // right: 25rem;
    // top: 1.5rem;
    span {
      background: white;
      display: block;
      position: absolute;
      height: 3px;
      width: 100%;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: 0.25s ease-in-out;
      -moz-transition: 0.25s ease-in-out;
      -o-transition: 0.25s ease-in-out;
      transition: 0.25s ease-in-out;
      &:nth-child(1) {
        top: 0px;
        width: 100%;
      }
      &:nth-child(2) {
        top: 12px;
        width: 90%;
      }
      &:nth-child(3) {
        top: 24px;
        width: 80%;
      }
    }
    &.open {
      position: fixed;
      top: 1rem;
      right: 1rem;
      span {
        width: 100%;
        &:nth-child(1) {
          top: 14px;
          -webkit-transform: rotate(135deg);
          -moz-transform: rotate(135deg);
          -o-transform: rotate(135deg);
          transform: rotate(135deg);
        }
        &:nth-child(2) {
          opacity: 0;
          left: -60px;
        }
        &:nth-child(3) {
          top: 14px;
          -webkit-transform: rotate(-135deg);
          -moz-transform: rotate(-135deg);
          -o-transform: rotate(-135deg);
          transform: rotate(-135deg);
        }
      }
    }
  }
  .f-header-collapse {
    padding: 1rem 0;
    top: 0;
    bottom: 0;
    max-width: $siderCollapsedWidth;
    width: 100%;
    height: 100vh;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5);
    transition: $transition;
    position: fixed;
    top: 0;
    right: 0;
    z-index: $zIndex * 3;
    background: rgba($cardColor, 1);
    .f-header-menu-item {
      display: block;
      width: 100%;
      background: none;
      padding: 0.75rem 0;
      .f-item-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        transition: $transition;
        font-size: 0.9rem;
        line-height: 1.5;
        color: white;
        text-decoration: none;
        transition: $transition;
        .f-item-icon {
          margin-right: 0.5rem;
          line-height: 0;
          vertical-align: -2px;
          font-size: 1.5rem;
          min-width: 25px;
          margin-right: 0.5rem;
          transition: transform $transition;
          color: white;
          svg {
            fill: white;
            font-size: 1.5rem;
          }
          &:last-child {
            margin-right: 0;
            transform-origin: 7px 4px;
          }
        }
        .f-item-text {
          display: none;
          transition: $transition;
        }
      }
      &:hover {
        background: $themePrimaryColor;
      }
      &.active {
        background: $themePrimaryColor;
      }
    }
    &.collapsed {
      transform: translateX(100%);
      padding: 0.5rem;
      .f-header-item {
        padding: 0.5rem 0.75rem;
        .f-item-link {
          .f-item-icon {
            margin-right: 0;
          }
        }
      }
      .has-child {
        &.f-header-item {
          position: relative;
          > .f-item-link {
            // pointer-events: none;
          }
          .f-item-link {
            .f-item-icon {
              &:last-child {
                position: absolute;
                right: -0.45rem;
                transform: rotate(-90deg);
              }
            }
          }
          .f-header-submenu-item {
            display: none;
            position: absolute;
            z-index: $zIndex * 2;
            .f-header-item {
              padding: 0.5rem 0.75rem;
              min-width: 200px;
              .f-item-link {
                .f-item-text {
                  display: inline;
                  white-space: nowrap;
                }
              }
            }
          }
          // &:hover,
          &.submenu-open {
            .f-item-link {
              .f-item-icon {
                &:last-child {
                  transform: rotate(90deg);
                }
              }
            }
            .f-header-submenu-item {
              background: #212b36;
              transform: translateX(57px);
              top: 0;
              left: 0;
              display: inline;
            }
          }
        }
      }
    }
    &.expanded {
      transform: translateX(0);
      max-width: $siderExpandedWidth;
      min-width: $siderExpandedWidth;
      width: 100%;
      // &:before {
      //   content: "";
      //   background: rgba($cardColor, 0.5);
      //   width: 100%;
      //   height: 100%;
      //   position: fixed;
      //   top: 0;
      //   left: 0;
      //   right: 0;
      //   bottom: 0;
      //   z-index: $zIndex * 2;
      // }
      .f-header-collapse-items {
        padding-top: 3rem;
        .f-header-menu-item {
          border-bottom: 1px solid $borderColor;
          padding: 0.75rem $spacer;
          &:last-child {
            border-bottom: 0 !important;
          }
          .f-item-link {
            display: flex;
            .f-item-text {
              display: inline;
              width: 100%;
            }
          }
          &.has-child {
            transition: all $transition;

            &.f-header-item {
              background: none;
              border-bottom: 1px solid $borderColor;
              > .f-item-link {
                // pointer-events: none;
              }
              &:hover {
                cursor: pointer;
              }
            }
            .f-header-submenu-item {
              display: none;
              border-bottom: 0 solid $themePrimaryColor;
              .f-header-item {
                padding: 0.75rem $spacer * 2;
                border: 0;
                width: calc(100% + 3rem);
                margin-left: -1.5rem;
              }
              &:first-child {
                border-top: 0 solid $themePrimaryColor;
              }
              &:last-child {
                border: 0;
              }
            }
          }
          &.submenu-open {
            &.f-header-item {
              // padding-bottom: 0;
              .f-item-link {
                .f-item-icon {
                  &:last-child {
                    transform: rotate(90deg);
                  }
                }
              }
            }
            .f-header-submenu-item {
              margin: 0.5rem 0;
              display: block;
              // background: lighten($baseColor, 20) !important;
            }
          }
        }
      }
    }
  }
}