@import 'mediawiki.skin.variables.less';

@font-size-root-default: 19;

@width-breakpoint-mobile-small: 360px;
@width-breakpoint-mobile: 480px;
@width-breakpoint-tablet: 640px;

@content-width: 43.4rem;
@content-horizontal-padding: 1.3rem;
@content-horizontal-padding-mobile-small: 0.85rem;

@portal-min-width: 8.8rem;
@portal-column-gap: 0.8rem;

// == Typography ==
// Set Arial to high priority.
// https://femiwiki.com/w/Topic:V19kdq48epmrel7u
@font-family-en: Arial, 'Apple SD Gothic Neo', 'Noto Sans KR', '본고딕',
  'Noto Sans CJK KR', 'KoPubDotum Medium', '나눔바른고딕', '나눔고딕',
  NanumGothic, '맑은고딕', 'Malgun Gothic', Dotum, sans-serif;

// https://github.com/femiwiki/FemiwikiSkin/issues/228
// https://github.com/femiwiki/remote-gadgets/pull/26
@font-family-ja: 'Segoe UI', Meiryo, system-ui, -apple-system,
  BlinkMacSystemFont, 'Noto Sans CJK KR', '본고딕', sans-serif;

@font-family-ko: 'Apple SD Gothic Neo', 'Noto Sans KR', '본고딕',
  'Noto Sans CJK KR', 'KoPubDotum Medium', '나눔바른고딕', '나눔고딕',
  NanumGothic, '맑은고딕', 'Malgun Gothic', Arial, Dotum, sans-serif;

// TODO: Define a multilingual font family
@font-family: @font-family-ko;

// == Colors ==
@color-base0: #000000;
@color-base15: #252525;
@color-base100: #fff;

//                        luminance(%)
@color-primary1: #c3bffd; // 55.96
@color-primary2: #b9b5d9; // 48.37
@color-primary3: #aca6e4; // 41.64
@color-primary4: #746ccb; // 18.75
@color-primary5: #5144a3; // 8.53
@color-primary6: #302a45; // 2.71

@color-secondary1: #dae8b2; // 75.83
@color-secondary2: #b2d236; // 55.82
@color-secondary3: #a5c831; // 49.53

@color-progressive: @color-primary3;

@color-background1: @color-primary1;
@color-link: @color-primary5;
@color-alert: @color-secondary1;
@color-alert2: @color-secondary3;
@color-alert-border: @color-secondary2;

// Same colors as Codex's @background-color-button-quiet--*
@button-background-color--hover: rgba(0, 24, 73, 7/255);
@button-background-color--active: rgba(0, 36, 73, 21/255);

@opacity-icon: 65%;
@padding-icon: 0.37142855rem;

@line-height-base: 1.7;

@keyframes gentle-pulse {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.hyphens( ... ) {
  -webkit-hyphens: @arguments;
  -ms-hyphens: @arguments;
  -moz-hyphens: @arguments;
  hyphens: @arguments;
}

.full-width() {
  box-sizing: border-box;
  width: ~'calc(100% + 2.6rem)';
  margin-left: -1.3rem;
}

.content-horizontal-padding() {
  @padding: @content-horizontal-padding;
  padding-left: @padding;
  padding-right: @padding;
  @media (max-width: @width-breakpoint-mobile-small) {
    @padding: @content-horizontal-padding-mobile-small;
    padding-left: @padding;
    padding-right: @padding;
  }
}

.image() {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.mw-link-colors() {
  &,
  &:visited {
    color: @color-primary5;
  }

  &:active {
    color: @color-secondary2;
  }

  &.external {
    color: @color-primary5;
  }

  &.new {
    color: #c0081f;

    &:visited {
      color: #a55858;
    }
  }

  &.stub {
    color: #723;
  }

  // self links
  &.mw-selflink {
    color: inherit;

    &:active,
    &:visited {
      color: inherit;
    }
  }

  // Interwiki Styling
  &.extiw {
    &,
    &:active {
      color: #36b;
    }

    &:visited {
      color: #636;
    }

    &:active {
      color: #b63;
    }
  }

  // External links
  &.external {
    color: @color-primary5;

    &:active {
      color: #b63;
    }
  }
}

.mw-link-style() {
  .mw-link-colors();

  &:hover,
  &:focus {
    border-bottom: 1px solid;
  }

  // self links
  &.mw-selflink {
    font-weight: bold;
    text-decoration: inherit;

    &:hover {
      cursor: inherit;
      text-decoration: inherit;
    }
  }

  // External links
  &.external {
    background: url('../images/icon-external-link.png') top right no-repeat;
    background-size: 8px 8px;
    padding-right: 0.6rem;

    &.free {
      word-wrap: break-word;
    }
  }
}

.mw-link() {
  // menuitem is for the dropdown menu of the WikiEditor.
  &:not([role='button']):not([role='menuitem']) {
    text-decoration: none;

    &:not([href]) {
      cursor: pointer; // Always cursor:pointer even without href
    }

    .mw-link-style();
  }
}

// CSS only Responsive Tables
// http://dbushell.com/2016/03/04/css-only-responsive-tables/
// by David Bushell
.responsiveTable() {
  background-color: transparent;
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: -webkit-radial-gradient(
        left ellipse,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0) 75%
      )
      0 center,
    -webkit-radial-gradient(
        right ellipse,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0) 75%
      ) 100% center;
  background: radial-gradient(
        ellipse at left,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0) 75%
      )
      0 center,
    radial-gradient(
        ellipse at right,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0) 75%
      )
      100% center;
  background-size: 10px 100%, 10px 100%;
  background-attachment: scroll, scroll;
  background-repeat: no-repeat;

  th:first-child,
  td:first-child {
    background-image: -webkit-linear-gradient(
      left,
      white 50%,
      rgba(255, 255, 255, 0) 100%
    );
    background-image: linear-gradient(
      to right,
      white 50%,
      rgba(255, 255, 255, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 20px 100%;
  }

  th:last-child,
  td:last-child {
    background-image: -webkit-linear-gradient(
      right,
      white 50%,
      rgba(255, 255, 255, 0) 100%
    );
    background-image: linear-gradient(
      to left,
      white 50%,
      rgba(255, 255, 255, 0) 100%
    );
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: 20px 100%;
  }

  & > * > tr > th,
  & > * > tr > td {
    background-color: transparent;
    border: 1px solid #ddd;
  }
}

// Table of contents
.toc() {
  .toc {
    display: table;
    font-size: 0.95rem;
    margin: 3.2rem 0;
    padding: 0;
    border: 0;
    background-color: inherit;
    line-height: 1.6;

    a {
      .mw-link-style();
      text-decoration: none;
    }

    .toctitle {
      text-align: left;

      h2 {
        font-size: 1rem;
        display: inline;
        overflow: hidden;
        font-weight: normal;
        border: none;
      }

      .toctoggle,
      .toctogglespan {
        display: none;
      }
    }

    ul,
    // Override mediawiki.legacy
    ul ul {
      margin: 0;
      list-style-type: none;

      li {
        list-style: none;

        .tocnumber {
          color: #222;
          display: table-cell;
          padding-right: 0.475rem;

          &:after {
            content: '.';
          }
        }

        .toctext {
          display: table-cell;
        }

        &.toclevel- {
          &1 {
            margin-top: 1rem;
            font-weight: bold;
          }

          &1,
          &2,
          &3,
          &4,
          &5 {
            font-weight: normal;
            margin-left: 1rem;
          }
        }
      }
    }

    &::before,
    &::after {
      display: block;
      content: ' ';
      width: 1.2rem;
    }

    &::before {
      border-bottom: 2px solid #8981d3;
      margin-bottom: 0.5rem;
    }

    &::after {
      border-top: 2px solid #8981d3;
      margin-top: 0.5rem;
    }
  }
}

.parser-output() {
  *:lang(en) {
    font-family: @font-family-en;
    // https://femiwiki.com/w/Topic:W75xcdw9h9p3h5gt
    word-break: normal;
    .hyphens(none);
  }

  *:lang(ja) {
    font-family: @font-family-ja;
  }

  // https://femiwiki.com/w/Topic:Tvsoi1ez3qwf7l7b
  s,
  strike {
    color: gray;
  }

  blockquote {
    @media screen and (max-width: @width-breakpoint-mobile) {
      .full-width();
    }
  }

  code {
    color: @color-base0;
    background-color: button;
    border: 1px solid #eaecf0;
    border-radius: 2px;
    padding: 1px 4px;
  }

  // Headings
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    position: relative;
    margin: 3.8rem 0 1.6rem;
    padding: 0;
    font-weight: bold;
    color: @color-base15;
    overflow: hidden;
  }

  // font-size
  h2 {
    font-size: 1.429rem;
  }
  h3 {
    font-size: 1.2rem;
  }
  h4 {
    font-size: 1.143rem;
  }
  h5 {
    font-size: 1.1rem;
  }
  h6 {
    font-size: 1rem;
  }

  // border-bottom
  h2 {
    border-bottom: 0.2rem double #d7c9f5;
  }
  h3 {
    border-bottom: 1px solid #d7c9f5;
  }
  h4 {
    border-bottom: 1px dotted #d7c9f5;
  }
  h5,
  h6 {
    border-bottom: none;
  }

  h1 ~ h2,
  h2 ~ h3,
  h3 ~ h4,
  h4 ~ h5,
  h5 ~ h6 {
    margin-top: 1.6rem;
  }

  p {
    margin: 0.4em 0 0.5em 0;
  }

  hr {
    background-color: #a2a9b1;
    border: 0;
    margin: 0.2em 0;
  }

  // Lists
  ol,
  ul {
    margin: 0.3em 0 0 1.6em;
    padding: 0;

    li {
      margin-bottom: 0.5rem;

      ul,
      ol {
        margin-top: 0rem;
        margin-bottom: 0rem;
      }
    }
  }

  ul.gallery {
    margin: 1.6rem 0 1.6rem;
    padding-left: 1.2rem;
  }

  dl {
    margin: 1.6rem 0 1.6rem;
    padding-left: 0.5rem;

    dt {
      font-weight: bold;
      margin-bottom: 0.1em;

      &:not(first-child) {
        margin-top: 1em;
      }
    }

    dd {
      margin-left: 1.6em;
      margin-bottom: 0.1em;
    }
  }

  .toc();

  table.wikitable {
    // IE needs inline-block to position scrolling shadows otherwise use:
    // display: block;
    // max-width: min-content;
    vertical-align: top;
    white-space: nowrap;
    border-collapse: collapse;
    border-spacing: 0;
    border-width: 0;
    font-size: 0.8rem;
    .responsiveTable();

    th {
      font-size: inherit;
      color: @color-base0;
      text-align: left;
    }

    td {
      color: inherit;
    }
  }

  ol.references {
    font-size: 0.9em;

    li {
      margin-bottom: 0.2rem;
    }
  }

  // <pre>
  // https://github.com/femiwiki/FemiwikiSkin/issues/350
  & > pre:not(.CodeMirror-line),
  :not(.mw-highlight) > pre:not(.CodeMirror-line),
  // <syntaxhighlight>
  .mw-highlight:not(.mw-highlight-lines) > pre:not(.CodeMirror-line) {
    padding: 1em;
    overflow: hidden;
    border: none;
    background-color: #f8f8f8;
    color: @color-base0;
    white-space: pre-wrap;
    font-family: 'Source Code Pro', monospace, monospace;

    @media screen and (max-width: @width-breakpoint-mobile) {
      .full-width();
    }
  }

  .mw-highlight.mw-highlight-lines > pre:not(.CodeMirror-line) {
    @media screen and (max-width: @width-breakpoint-mobile) {
      .full-width();
    }
  }

  // Image
  div.thumb .thumbinner,
  // For 2017 wikitext editor preview and VE
  figure[typeof~='mw:File/Thumb'],
  figure[typeof~='mw:Image/Thumb'] {
    font-size: 0.94rem;
    max-width: 100%;
    background: none;
    border: none;
    overflow: hidden;
    padding: 3px;
    text-align: center;
    @media screen and (max-width: @width-breakpoint-mobile) {
      border: none;
      background-color: initial;
    }

    .thumbimage {
      background: none;
      border: none;
      vertical-align: middle;
      @media screen and (max-width: @width-breakpoint-mobile) {
        border: none;
      }
    }

    .thumbcaption,
    // For VE Preview
    figcaption {
      padding: 3px;
      font-size: 0.8836rem;
      line-height: 1.23704rem;
      color: #888;
      @media screen and (max-width: @width-breakpoint-mobile) {
        text-align: center;
      }
    }
  }

  @media screen and (max-width: @width-breakpoint-mobile) {
    div.thumb,
    div.thumb .thumbinner {
      margin: 0 auto;
    }
    div.thumb {
      float: none;
    }
    figure[typeof~='mw:File/Thumb'],
    figure[typeof~='mw:Image/Thumb'] {
      // For 2017 wikitext editor preview
      &,
      // For VisualEditor
      &.mw-halign-left,
      &.mw-halign-right {
        margin: 0 auto;
        float: none;
      }
    }
  }

  /* @noflip */
  div.tright {
    margin: 0.5em 0 1.3em 1.4em;
  }

  /* @noflip */
  div.tleft {
    margin: 0.5em 1.4em 1.3em 0;
  }

  @media screen and (max-width: @width-breakpoint-mobile) {
    div.tleft,
    div.tright {
      margin: 1rem auto;
    }
  }

  /* Images */
  /* @noflip */
  div.floatright,
  table.floatright {
    margin: 0 0 0.5em 0.5em;
  }

  /* @noflip */
  div.floatleft,
  table.floatleft {
    margin: 0 0.5em 0.5em 0;
  }

  .image,
  // https://github.com/femiwiki/FemiwikiSkin/issues/248
  a[href][title] {
    img[alt] {
      .image();
    }
  }
}
