@use '../../../src/scss/utils/mediaQueries.scss' as media;

// Estilos generales
.SiteMenu {
  @extend %SnList;
  a {
    // font-family: "Open Sans", sans-serif;
    display: block;
    padding: 0 12px;

    font-weight: 400;
    color: var(--text-color);
    &.is-toggle {
      display: flex;
      justify-content: space-between;
      padding-right: 0;
    }
    [class*="icon-"]:before {
      position: relative;
      top: 2px;
    }  
  }

  // All sublevels
  ul a {
    line-height: $headerHeight;
  }
}

// Estilos en el menu mobile
.SiteMenu {
  @include media.to(l) {
    &-wrapper {
      background: rgba(black, 0.5);
      position: fixed;
      width: 100vw;
      height: 100vh;
      z-index: 9999;
      left: -100vw;
      top: 0;
    }
    &-content {
      width: 220px;
      background: var(--panel-background);
      height: 100vh;
    }
    a {
      color: var(--text-color);
      padding: 0 12px;
      &:hover {
        background: var(--hover-background);
      }
    }

    // Level 1
    & > li {
      & > a {
        line-height: $headerHeight;
      }
    }
  }
}

// Cuando se a
.SiteMenu-is-show {
  .SiteMenu-wrapper {
    left: 0;
  }
}

// Estilos en el escritorio
.SiteMenu {
  @include media.from(l) {
    &-content {
      display: flex;
      align-items: center;
    }

    // Active
    // li.is-active {
    //   & > a {
    //     color: var(--snColor1);
    //   }
    // }

    // Level 1
    & > li {
      & > a {
        line-height: var(--siteHeaderHeight);
        height: var(--siteHeaderHeight);
        &:hover {
          color: var(--snColor1);
        }
      }
      &.is-active {
        position: relative;
      }
    }

    // Sub menu
    li ul {
      background: var(--panel-background-alt);
      min-width: 230px;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      right: 0;

      border-radius: 0.25rem;
      box-shadow: 0 8px 20px rgba(55, 125, 255, 0.075);
      a {
        &:hover {
          background: var(--hover-background);
          color: var(--snColor1);
        }
      }
    }
  }
}

// Site Menu footer
.SiteMenu {
  &-footer {
    a {
      color: var(--snColor1Inverse);
    }
  }
}

// Primary Menu - toggle
#SiteMenu-toggle {
  font-size: 1.4rem;
  cursor: pointer;
  @include media.from(l) {
    display: none;
  }
}