@import '../variables.less';
@import 'mediawiki.mixins.less';

.nav-bar {
  @height: 2.4rem;
  height: @height;
  background-color: @color-primary3;

  #mw-navigation {
    display: flex;
    max-width: @content-width - 1.3rem;
    margin: 0 auto;
    height: @height;

    & > * {
      height: @height;
      padding: 0;
      margin: 0;
    }

    h2 {
      display: none;
    }

    #p-logo {
      flex-shrink: 0;
      background-repeat: no-repeat;
      @width: @height;
      width: @width;
      background-size: @height @height;

      & when( @logo-enabled = 1 ) {
        @media (min-width: @width-breakpoint-tablet) {
          @width: ~'calc(@{height} * @{logo-wordmark-width} / @{logo-wordmark-height})';
          width: @width;

          /* @embed */
          background-image: @logo-wordmark-url;
          background-size: @width @height;
        }
      }
    }

    // Search form
    #p-search {
      flex-grow: 1;

      h3 {
        display: none;
      }

      #searchInput {
        box-sizing: content-box;
        display: block;
        width: ~'calc(100% - 1rem - 2px)';
        font-size: 1rem;
        height: ~'calc(2.4rem - 2px)';
        border: 1px solid @color-primary3;
        padding: 0 0.5rem;
      }

      #searchInput::-ms-clear {
        display: none;
      }

      #searchClearButton {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        background-color: transparent;
        color: black;
        margin: 0 0.35rem;
      }

      #mw-searchButton,
      #searchButton {
        display: none;
      }
    }

    // Recent changes and random pages
    #site-navigation {
      flex-shrink: 0;

      li {
        float: left;
        list-style-type: none;
        color: #fff;
        text-align: center;

        &:last-child {
          border-right: 1px solid #fff;
        }

        a {
          font-size: 0.8rem;
          position: relative;
          display: block;
          width: @height;
          height: @height;
          color: @color-base100;
          text-decoration: none;
          background-position: center;
          background-size: 1.8rem;
          background-repeat: no-repeat;

          @media (min-width: @width-breakpoint-tablet) {
            width: auto;
            background-size: 1.6rem 1.6rem;
            background-position: 0.4rem 0.4rem;
          }

          .text {
            display: none;

            @media (min-width: @width-breakpoint-tablet) {
              display: inline-block;
              padding-left: 2.2rem;
              padding-right: 1rem;
              line-height: @height;
            }
          }
        }

        &.changes a {
          .background-image('images/icon-changes-notext.png');
        }
        &.random a {
          .background-image('images/icon-random-notext.png');
        }
      }
    }

    // Menu button
    #fw-menu-toggle {
      position: relative;
      width: @height;
      min-width: @height;
      border-width: 0;
      background-color: inherit;
      background: 0.3rem 0.3rem ~'/' 1.8rem 1.8rem no-repeat;
      .background-image('images/icon-bars.png');

      .badge {
        display: none;
        position: absolute;
        right: 0.2rem;
        top: 0.2rem;
        text-align: center;
        color: @color-base100;
        background-color: @color-alert2;
        width: 1.2rem;
        height: 1.2rem;
        font-size: 0.7rem;
        line-height: 1.1rem;
        border: 1px solid @color-primary3;
        border-radius: 0.6rem;
        animation: gentle-pulse 5s infinite;

        &.active {
          display: block;
        }
      }
    }
  }
}

// Subtract 1px to avoid being applied with the min-width rule at the same time
@media (max-width: calc(@width-breakpoint-tablet - 1px)) {
  html[lang='ko'] #mw-navigation #site-navigation {
    a {
      background-size: 2.4rem;
    }
    .changes a {
      .background-image('images/icon-changes.svg');
    }
    .random a {
      .background-image('images/icon-random.svg');
    }
  }
}

.fw-wiki-portals {
  max-width: @content-width - @content-horizontal-padding;
  .content-horizontal-padding();

  // Alignment hack: Show portals like below:
  //  ___ ___ ___ ___
  // | x | x | x | x |
  //  ^^^ ^^^ ^^^ ^^^
  // or
  //  ___ ___
  // | x | x |
  //  --- ---
  // | x | x |
  //  ^^^ ^^^
  // than:
  //  ___ ___ ___
  // | x | x | x |
  //  -----------
  // |     x     |
  //  ^^^^^^^^^^^
  .mw-portlet {
    @three-portlets-min-width: (@portal-min-width * 3) +
      (@portal-column-gap * 2) + (@content-horizontal-padding * 2);
    @four-portlets-min-width: (@portal-min-width * 4) + (@portal-column-gap * 3) +
      (@content-horizontal-padding * 2);

    // Convert from rem to px
    @min-width: unit(@three-portlets-min-width * @font-size-root-default, px);
    @max-width: unit(@four-portlets-min-width * @font-size-root-default, px);

    @media (min-width: @min-width) and (max-width: @max-width) {
      // could be any value in range (1/3, 1/2)
      flex-basis: 40%;
    }
  }

  // Hide less-frequently used links
  #ca-addsection {
    display: none;
  }

  // Hide duplicated links with in nav-bar
  #n-recentchanges,
  #n-randompage {
    display: none;
  }

  #p-personal {
    .mw-echo-notifications-badge {
      width: auto;
      height: auto;
      margin: auto;
      top: auto;
      cursor: pointer;
      line-height: unset;
      // Disable background icon and counter
      background-image: none;

      &.mw-echo-notifications-badge-all-read {
        opacity: unset;
      }
    }

    .mw-echo-alert {
      background-color: #a5c831;
      color: #fff;
      border-radius: 0.3em;
    }
  }
}

#fw-menu-checkbox:not(:checked) ~ #fw-menu {
  display: none;
}

// Hide notificationBadgeButtonPopupWidget's title text which is just an error message
// ('echo-notification-all-text-only' message is used but does not exist)
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
  .oo-ui-popupWidget-head
  > .oo-ui-labelElement-label {
  display: none;
}
