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

1. .navigation
2. .menu-main
3. .menu
4. .section-navigation
5. .section-menu
-------------------------------------------------------------------*/
/*---------------------
    1. NAVIGATION
---------------------*/
.navigation {
  height: 80px;
}

/*---------------------
    2. MENU MAIN
---------------------*/
.menu-main {
  display: flex;

  .menu-main-item {
    flex-shrink: 0;
    position: relative;

    .menu-main-item-link {
      padding: 0 24px;
      display: block;
      color: var(--color-header-text);
      font-size: $fs-14;
      font-weight: $weight-bold;
      line-height: 80px;
      cursor: pointer;
      transition: color .2s ease-in-out;
      word-break: break-word;

      .icon-dots {
        transition: fill .2s ease-in-out;
      }

      .menu-sub-item-icon {
        fill: var(--color-header-text);
        position: absolute;
        top: 11px;
        right: 10px;
        pointer-events: none;
        transition: fill .2s ease-in-out;
      }

      .menu-main-item-link-icon {
        fill: var(--color-header-text);
        width: 6px;
        height: 6px;
        margin-left: 8px;
        transform: rotate(90deg);
        transition: fill .2s ease-in-out;
      }
    }

    &:hover {
      & > {
        .menu-main-item-link {
          color: var(--color-primary-light);
  
          .menu-sub-item-icon,
          .menu-main-item-link-icon,
          .icon-dots {
            fill: var(--color-primary-light);
          }
        }

        .menu-main,
        .menu-wide {
          transform: translate(0, 0);
          opacity: 1;
          visibility: visible;
          animation: .6s linear forwards menuSlideDownPointerEvents;

          .menu-main-item {
            &:hover {
              & > {
                .menu-main {
                  transform: translate(0, 0);
                }
              }
            }
          }
        }
      }
    }

    .menu-wide,
    .menu-main {
      position: absolute;
      z-index: 99997;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out;
      transform: translate(0, -40px);

      .menu-main {
        top: -8px;
        left: 100%;
        transform: translate(-40px, 0);
      }
    }

    .menu-wide {
      top: 72px;
    }

    .menu-main {
      display: block;
      min-width: 120px;
      padding: 8px 0;
      border-radius: 10px;
      background-color: var(--color-header-background);
      top: 64px;

      .menu-main-item {
        display: block;

        .menu-main-item-link {
          padding: 8px 18px;
          line-height: 1em;
          white-space: nowrap;
        }
      }
    }
  }
}

/*---------------
    3. MENU
---------------*/
.menu {
  &.small {
    .menu-item {
      &.active {
        .menu-item-link {
          &:hover {
            padding-left: 0;
          }
        }
      }

      .menu-item-link {
        padding-left: 0;

        &:focus,
        &:hover {
          padding-left: 0;
        }
      }
    }
  }

  .menu-item {
    padding: 0 16px;
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    &.active {
      & > {
        .menu-item-link {
          color: $white;
          background-color: var(--color-primary);
          box-shadow: var(--color-primary-shadow);
  
          &:hover {
            background-color: var(--color-primary);
            color: $white;
            padding-left: 62px;
            box-shadow: var(--color-primary-shadow);
    
            .menu-item-link-icon {
              fill: $white;
            }
          }
          
          .menu-item-link-icon {
            fill: $white;
          }
        }
      }
    }

    .menu {
      margin: 12px 0;
    }

    .menu-item-link {
      display: flex;
      align-items: center;
      height: 48px;
      padding-left: 62px;
      border-radius: 12px;
      font-size: $fs-14;
      font-weight: $weight-bold;
      line-height: (18 / 14) * 1em;
      position: relative;
      transition: all .2s ease-in-out;

      &:focus,
      &:hover {
        background-color: var(--color-box-over-box-light-background);
        color: var(--color-text);
        padding-left: 70px;
        box-shadow: var(--color-overbox-shadow);

        .menu-item-link-icon {
          fill: var(--color-primary);
        }
      }

      .menu-item-link-icon {
        fill: var(--color-icon);
        position: absolute;
        top: 14px;
        left: 14px;
        pointer-events: none;
        transition: all .2s ease-in-out;
      }
    }
  }
}

/*-----------------------------
    4. SECTION NAVIGATION
-----------------------------*/
.section-navigation {
  height: 80px;
  padding: 0 43px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  position: relative;

  .slider-controls {
    .slider-control {
      width: 43px;
      height: 80px;
      position: absolute;
      top: 0;

      &.left {
        left: 0;
      }

      &.right {
        right: 0;
      }
    }
  }
}

/*----------------------
    5. SECTION MENU
----------------------*/
.section-menu {
  height: 80px;

  &.secondary {
    .section-menu-item {
      &.active,
      &:hover {
        border-bottom: 4px solid var(--color-secondary);
      }

      &.active {
        .section-menu-item-icon {
          fill: var(--color-icon-highlighted);
        }
      }
    }
  }

  &.medium {
    .section-menu-item {
      width: 160px;
    }
  }

  .section-menu-item {
    float: left;
    width: 122px;
    height: 80px;
    position: relative;

    &.active {
      border-bottom: 4px solid var(--color-primary);

      .section-menu-item-icon {
        fill: var(--color-icon-highlighted);
        opacity: 1;
      }
    }

    &:hover {
      border-bottom: 4px solid var(--color-primary);

      .section-menu-item-icon {
        transform: translate(0, -20px);
        opacity: 0;
        visibility: hidden;
      }

      .section-menu-item-text {
        transform: translate(0, 0);
        opacity: 1;
        visibility: visible;
      }
    }

    &.no-icon {
      .section-menu-item-text {
        transform: translate(0, 0);
        opacity: .6;
        visibility: visible;
      }

      &:hover,
      &.active {
        .section-menu-item-text {
          opacity: 1;
        }
      }
    }

    &::after {
      content: '';
      width: 1px;
      height: 20px;
      background-color: var(--color-divider);
      position: absolute;
      top: 30px;
      right: 0;
    }

    &:first-child {
      &::before {
        content: '';
        width: 1px;
        height: 20px;
        background-color: var(--color-divider);
        position: absolute;
        top: 30px;
        left: 0;
      }
    }

    .section-menu-item-icon {
      fill: var(--color-icon);
      opacity: .6;
      position: absolute;
      top: 30px;
      left: 50%;
      margin-left: -10px;
      transition: opacity .25s ease-in-out, visibility .25s ease-in-out, transform .25s ease-in-out;
    }

    .section-menu-item-text {
      width: 100%;
      color: var(--color-text);
      font-size: $fs-14;
      font-weight: $weight-bold;
      text-align: center;
      position: absolute;
      top: 34px;
      transform: translate(0, 20px);
      opacity: 0;
      visibility: hidden;
      transition: opacity .25s ease-in-out, visibility .25s ease-in-out, transform .25s ease-in-out;
    }
  }
}

/*---------------------
    6. MENU WIDE
---------------------*/
.menu-wide {
  display: flex;
  padding: 50px 16px 50px 60px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);

  .navigation-section {
    width: 184px;
    margin-right: 16px;

    &:last-child {
      margin-right: 0;
    }
  }
}

@keyframes menuSlideDownPointerEvents {
  0% {
    pointer-events: none;
  }

  100% {
    pointer-events: auto;
  }
}