// sass-lint:disable no-mergeable-selectors

.block {
  &.megaMenu {
    &.navbar {
      &.navbar-light {
        display: none;

        @media (min-width: 992px) {
          display: block;
          padding: 0;
          flex-grow: 10;
          min-height: 53px;
        }

        #megaMenuContent {
          @media (min-width: 992px) {
            height: auto !important;
          }

          &.navbar-collapse {
            &.collapse,
            &.collapsing {
              z-index: 3;
              position: relative;
              top: -7px;

              @media (min-width: 992px) {
                top: 15px;
              }
            }
          }
        }

        ul {
          &.menu {
            &.navbar-nav {
              &#megaMenu {
                @media (min-width: 992px) {
                  padding: 0;
                  margin: 0;
                  float: left;
                  width: 100%;
                  list-style: none;
                  clear: both;
                }

                li {
                  &.item {
                    &.nav-item {
                      &.homeItem {
                        .headerItem {
                          margin-right: 1.25rem;

                          &.active {
                            a {
                              &.nav-link {
                                border-bottom: 0;
                                padding: 0 4px;

                                @media (min-width: 992px) {
                                  padding: 0 1.25rem 0 0;
                                }
                              }
                            }
                          }

                          a {
                            &.nav-link {
                              margin-top: 8px;
                              margin-bottom: 8px;
                              padding: 0 28px 0 5px;

                              @media (min-width: 992px) {
                                border-right: 1px solid $borderGrey;
                                padding: 0 1.25rem 0 0;
                              }
                            }
                          }
                        }
                      }

                      @media (min-width: 992px) {
                        padding: 0;
                        margin: 0;
                        float: left;
                        position: relative;
                      }

                      .headerItem {
                        padding: 0;
                        margin: 0 1.5rem 0 0;
                        color: $black;
                        line-height: 2;
                        font-weight: normal;

                        &.active {
                          a {
                            &.nav-link {
                              @media (min-width: 992px) {
                                border-bottom: $halfSpacing solid $blue;
                                padding: 8px 3px 3px;
                              }
                            }
                          }
                        }

                        @media (min-width: 992px) {
                          text-align: center;
                        }

                        a {
                          &.nav-link {
                            color: $black;
                            font-family: $sansSerif;
                            font-size: 1.25rem;
                            line-height: 1.375;
                            padding: 8px 3px;
                            border-color: transparent;

                            @media (min-width: 992px) {
                              font-size: 1.25rem;
                            }
                          }
                        }
                      }

                      .menuItemContent {
                        display: none !important;

                        @media (min-width: 992px) {
                          padding: 0;
                          margin: 0;
                          z-index: 79;
                          position: absolute;
                          padding-top: 0;
                          margin: 0;
                          display: block !important;
                        }

                        &.active {
                          .megaMenuBody {
                            z-index: 79;
                            display: block;
                          }
                        }

                        .megaMenuBody {
                          padding: 3 * $gutter 2 * $gutter;
                          margin: 0;
                          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.26);
                          overflow: hidden;
                          background-color: $lightGrey;
                          border: 0;
                          border-bottom: $halfSpacing solid $blue;
                          display: none; // Should be none, use block to show when styling

                          button {
                            &.closeButton {
                              color: $lightGrey;
                              position: absolute;
                              right: $gutter;
                              top: $gutter;
                              background: $data-close-black-svg no-repeat transparent;
                              border: 0;
                              background-size: contain;
                              height: 15px;
                              width: 15px;
                              background-position: center;

                              &:hover {
                                cursor: pointer;
                              }

                              &:focus {
                                outline: none;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

//  * * * * * * * * * * * Mega menu column splitter style  * * * * * * * * * * *

.block {
  &.megaMenu {
    &.navbar {
      &.navbar-light {
        ul {
          &.menu {
            &.navbar-nav {
              &#megaMenu {
                .menuItemContent {
                  .megaMenuBody {
                    .megaMenuBodyInner {
                      .block {
                        &.columnSplitter {
                          &.row {
                            .col {
                              border-right: 1px solid $borderGrey;

                              &:last-child {
                                border-right: 0;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
// * * * * * * * * * * * Mega menu list style * * * * * * * * * * *

.block {
  &.megaMenu {
    &.navbar {
      &.navbar-light {
        ul {
          &.menu {
            &.navbar-nav {
              &#megaMenu {
                .menuItemContent {
                  .megaMenuBody {
                    .megaMenuBodyInner {
                      .block {
                        &.list {
                          &.links {
                            h2 {
                              @include t4;
                            }

                            ul {
                              list-style: none;
                              padding: 0;
                              @include t11;

                              li {
                                @include t11;

                                a {
                                  @include t11;
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

// * * * * * * * * * * * Mega menu teaser style * * * * * * * * * * *

.block {
  &.megaMenu {
    .block {
      &.columnSplitter {
        &.using4Columns {
          .col {
            .block {
              &.teaser {
                &.top {
                  .block {
                    &.figure {
                      margin: 0;

                      a {
                        img {
                          margin: 0;
                        }
                      }
                    }
                  }
                }

                .teaserBody {
                  padding: 20px;

                  .teaserHeading {
                    @include t4($marginTop: 0);
                  }

                  .lead {
                    margin: 0;

                    h2,
                    h3 {
                      @include t4($marginBottom: 10px, $marginTop: 0);
                    }

                    p {
                      @include t11;
                      max-width: 100%;
                      margin: 0 0 14px;

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

                    ul,
                    ol {
                      max-width: none;

                      li {
                        @include t11;
                      }
                    }

                    .block:last-child {
                      margin-bottom: 0;
                    }
                  }

                  ul {
                    &.teaserLinks {
                      list-style: none;
                      margin: 0;
                      padding: 0;
                      @include t11(false);

                      li {
                        @include t11(false);
                      }
                    }
                  }

                  ul {
                    &.teaserLinks {
                      &.hasLead {
                        margin-top: 14px;
                      }
                    }
                  }
                }

                &.white {
                  .teaserBody {
                    padding: 0;
                  }
                }

                &.top {
                  &.white {
                    .teaserBody {
                      &.hasFigure {
                        padding: 20px 0 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}