@import '../variables.less';

// General
.fw-portals {
  margin: 0.6rem auto 0;
  padding: 0;
  border-bottom: 1px solid @color-primary3;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: space-between;
  // gap property is more widely supported than column-gap
  gap: @portal-column-gap;

  .mw-portlet {
    width: @portal-min-width;
    min-width: @portal-min-width;
    margin: 0.6rem 0;
    flex-grow: 1;

    &.emptyPortlet {
      display: none;
    }

    h3 {
      font-size: 1rem;
      font-weight: normal;
      color: @color-base0;
      margin: 0 0 0.4rem;
      padding: 0.5rem 0 0.17rem;
      border-bottom: 1px solid @color-primary2;
    }

    ul {
      margin: 0;
      padding: 0;

      li {
        list-style-type: none;
        margin: 0;

        a {
          display: flex;
          text-decoration: none;
          color: @color-base15;
          padding-left: 2em;

          &:hover {
            background-color: @button-background-color--hover;
          }

          &:active {
            background-color: @button-background-color--active;
          }

          &[class^='xi-'],
          &[class*=' xi-'] {
            padding-left: 0;
          }

          &:before {
            font-size: 1.5em;
            opacity: @opacity-icon;
            vertical-align: middle;
            margin-right: 0.3em;
            color: black;
            font-family: 'xeicon' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
          }

          span {
            font-family: @font-family;
            font-style: initial;
            font-weight: initial;
            line-height: @line-height-base;
          }
        }

        .xi(@icon) {
          a {
            padding-left: 0;
          }
          a:before {
            content: @icon;
          }
        }

        // Items added by extensions cannot be touched in the hook, so we need to use styles
        &#t-wikibase {
          .xi('\e9ff');
        }
        &#t-cite {
          .xi('\ea6a');
        }
        &#pt-notifications-all {
          .xi('\e99c');
        }
      }
    }
  }
}

.mw-checkbox-hack-checkbox {
  display: none;
}

.mw-checkbox-hack-button {
  cursor: pointer;
}

// Specific
#p-header {
  box-sizing: border-box;
  margin: 2.3rem auto 0.5rem;
  padding-top: 0;
  padding-bottom: 0;
  .content-horizontal-padding();
  max-width: @content-width;
  clear: both;

  ul,
  li {
    margin: 0;
    display: block;
  }

  ul {
    padding: 0;
  }

  #localNotice {
    font-size: 0.8rem;
    color: @color-base0;
    margin: 0 0 4rem;
    padding: 1.6rem 0.8rem;
    border: 2px solid #aca8e0;
    position: relative;
    text-align: center;

    // sitenotice includes parsed contents
    .parser-output();

    p {
      margin: 0;
    }

    hr {
      border-top: 1px solid #aca8e088;
      margin: 1em;
    }
  }

  .mw-portlet-namespaces {
    h3 {
      display: none;
    }

    ul {
      li {
        @size-icon: 1.42857143rem;
        @width: @size-icon + @padding-icon * 2;
        @height: @size-icon + @padding-icon * 2;
        float: left;

        a {
          color: @color-base15;
          text-decoration: none;
        }

        &.selected {
          display: none;
        }

        // Only use icon
        // Reference: TabWatchstarLink.less of Vector.
        & {
          display: block;
          width: @width;
          height: @height;

          a {
            display: block;
            width: @width;
            height: 0;
            padding: @height 0 0 0;
            overflow: hidden;
            position: relative;

            &:before {
              background-repeat: no-repeat;
              background-position: 50% 50%;
              opacity: @opacity-icon;
              content: '';
              display: block;
              position: absolute;
              top: @padding-icon;
              left: @padding-icon;
              width: @size-icon;
              height: @size-icon;
            }

            &:hover {
              background-color: @button-background-color--hover;
            }

            &:active {
              background-color: @button-background-color--active;
            }
          }

          &.selected {
            display: none;
          }

          &.label {
            width: auto;
            a {
              width: auto;
              height: auto;
              padding: @padding-icon;
              line-height: @size-icon;

              &:before {
                position: relative;
                margin-right: @padding-icon;
                top: 0;
                left: 0;
                float: left;
              }
            }
          }
        }

        .background-icon(@icon) {
          background-image: /* @embed */ url('@{icon}');
        }

        .background-ooui-icon(@icon) {
          .background-icon('../../node_modules/@femiwiki/ooui-femiwiki-theme/dist/resources/images/icons/@{icon}.svg');
        }

        // fallback
        & a:before {
          // url(/skins/Femiwiki/resources/ooui/images/icons/article.svg)
          .background-ooui-icon('article-ltr');
          .rtl & {
            .background-ooui-icon('article-rtl');
          }
        }
        &#ca-talk a:before {
          .background-ooui-icon('speechBubbles-ltr');
          .rtl & {
            .background-ooui-icon('speechBubbles-rtl');
          }
        }
        &#ca-talk.has-open-topic a:before {
          opacity: unset;
          .background-icon('images/speechBubbles-ltr-new.svg');
          .rtl & {
            .background-icon('images/speechBubbles-rtl-new.svg');
          }
        }
        &#ca-user a:before {
          .background-ooui-icon('userAvatar');
        }
        &#ca-homepage a:before {
          .background-ooui-icon('home');
        }
        &#ca-watch a:before {
          .background-ooui-icon('star');
        }
        &#ca-unwatch a:before {
          .background-ooui-icon('unStar-progressive');
          opacity: unset;
        }
      }
    }
  }

  #fw-page-menu-checkbox:not(:checked) ~ #p-actions-and-toolbox {
    display: none;
  }

  #p-title-buttons {
    @icon-size: 1.42857143em;
    margin: 0 -@padding-icon;
    clear: both;
    overflow: hidden;

    .right-buttons {
      float: right;
    }

    .mw-indicator a,
    #p-menu-toggle {
      &:hover {
        background-color: @button-background-color--hover;
      }

      &:active {
        background-color: @button-background-color--active;
      }
    }

    .mw-indicators,
    .fw-button {
      margin: 0;
      float: left;

      &,
      & a,
      &:focus,
      & a:focus {
        // Remove highlighting
        border: none;
        box-shadow: none;
      }
    }

    #p-share {
      .oo-ui-icon-share {
        background-image: url(images/icon-share.png);
      }

      a .oo-ui-icon-share {
        opacity: @opacity-icon;
      }
    }

    #p-menu-toggle {
      width: @icon-size;
      height: @icon-size;
    }

    #p-menu-toggle {
      padding: 0.37142855em;
    }

    // Hide text label
    // Reference: TabWatchstarLink.less of Vector.
    .mw-indicators .mw-indicator a {
      overflow: hidden;
      height: 0;
      position: relative;
      width: @icon-size + @padding-icon * 2;
      padding-top: @icon-size + @padding-icon * 2;
      // Reset
      background-image: none;
      padding-left: 0;

      &:before {
        background-image: /* @embed */ url(../../../../resources/src/mediawiki.helplink/images/helpNotice.svg);
        background-position: center;
        background-repeat: no-repeat;
        opacity: @opacity-icon;
        content: '';
        display: block;
        position: absolute;
        top: @padding-icon;
        left: @padding-icon;
        width: @icon-size;
        height: @icon-size;
      }
    }

    #p-menu-toggle:before {
      position: absolute;
      width: @icon-size;
      height: @icon-size;
      content: '';
      background-size: @icon-size;
      background-position: center center;
      background-repeat: no-repeat;
      opacity: @opacity-icon;
    }
  }

  #lastmod-and-views {
    font-size: 0.75rem;
    overflow: hidden;
    clear: both;

    #lastmod {
      .mw-link();
      font-size: 0.8rem;
    }

    #p-views {
      float: right;

      h3 {
        display: none;
      }

      ul {
        padding: 0;
        margin: 0;

        li {
          float: left;
          margin: 0;
          display: block;

          &.selected a {
            font-weight: bold;
          }

          &#ca-view.selected,
          &#ca-history {
            display: none;
          }

          a {
            .mw-link();
          }
        }

        li + li {
          margin-left: 1em;
        }
      }
    }
  }
}

// firstHeading and its preview output of VisualEditor
#p-header h1.firstHeading,
.oo-ui-window .mw-body-content h1.firstHeading {
  font-size: 1.714rem;
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  line-height: 1.2em;
  border-bottom: none;
  color: @color-base15;
  font-weight: bold;
  // See https://github.com/femiwiki/FemiwikiSkin/issues/168
  overflow: visible;
  // See https://github.com/femiwiki/FemiwikiSkin/issues/169
  word-break: break-word;
}

.visualClear {
  clear: both;
}

// End of content
hr#content-end-bar {
  @padding: @content-horizontal-padding * 2;
  border: 0;
  border-width: 1px;
  border-color: @color-primary2;
  background-color: #a2a9b1;
  max-width: @content-width - @padding;
  margin: 0 auto;
  height: 1px;

  @media (max-width: @width-breakpoint-mobile-small) {
    @padding: @content-horizontal-padding-mobile-small * 2;
    max-width: @content-width - @padding;
  }
}

#p-lang {
  box-sizing: border-box;
  max-width: @content-width;
  margin: auto;
  padding: 0.8rem @content-horizontal-padding 0;

  #p-lang-label {
    display: none;
  }

  ul {
    padding: 0;
    margin: 0;

    .interlanguage-link {
      display: inline-block;

      &:not(:first-child) {
        padding-left: 0.8em;
      }

      .interlanguage-link-target {
        .mw-link();
      }
    }
  }

  .wbc-editpage {
    .mw-link();
  }
}

// Footer
.mw-footer {
  box-sizing: border-box;
  .content-horizontal-padding();
  padding-top: 0.8rem;
  padding-bottom: 1.6rem;

  max-width: @content-width;
  margin: 0 auto;

  ul {
    overflow: hidden;
    font-size: 0.714rem;
    margin: 0;
    padding: 0;

    li {
      float: left;
      list-style: none;
      margin: 0 0 0.0714rem;

      a {
        .mw-link();
      }
    }

    &#footer-info li {
      float: none;
    }

    &#footer-places li:not(:first-child)::before {
      content: '|';
      color: #d3d3d3;
      margin: 0 0.3rem;
    }
  }

  #footer-icons {
    float: right;
  }
}

.printfooter,
.client-nojs #t-print {
  display: none;
}
