@import "../../../../static/wpadmin/less/mixins.less";
@import "common.less";

// you can change menu and submenu width
@menu-width: @common-menu-and-submenu-width;

// you can change default colors

@menu-bg-color: #ECECEC;

@menu-border-color: #CCC;

@menu-element-hover-bg-color: #E4E4E4;

@text-hover-color: @common-text-hover-color;

@submenu-border-color: #DFDFDF;

@submenu-link-color: @common-submenu-link-color;

.submenu-bg {
  .common-submenu-bg;
}

.submenu-link-hover {
  .common-submenu-link-hover;
}

.submenu-link-current {
  .common-submenu-link-current;
}

.open-header-text {
  color: #FFF;
  text-shadow: 0 -1px 0 #333333;
}

.open-header-colors(@start:bottom) {
  .open-header-text;
  border-bottom-color: #6D6D6D;
  border-top-color: #808080;
  background-color: #777777;
  .vertical-gradient(#6D6D6D, #808080, @start);
}

.menu-element-colors {
  border-bottom-color: #DFDFDF;
  border-top-color: #F9F9F9;
}

// colors for menu tools
#adminmenu {

  .wp-menu-tool {
    color: #AAA;

    .wp-menu-tool-button {
      background-color: #F4F4F4;
      .vertical-gradient(#DFDFDF, #FFF);
      border-color: #DDD;
    }
  }

  .wp-menu-tool:hover {
    color: #999;

    .wp-menu-tool-button {
      border-color: #BBB;
    }
  }
}

.wp-folded #adminmenu #collapse-menu .wp-menu-tool-button,
.wp-pinned #adminmenu #pin-menu .wp-menu-tool-button {
  .vertical-gradient(#F9F9F9, #CCC);
}

// it's better not to modify those:
@folded-menu-width: 32px;
@submenu-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
@submenu-border-radius: 0 3px 3px 0;

html {
  height: 100%;
}

body {
  height: 100%;
}

#wrapper {
  height: auto;
  min-height: 100%;
  width: 100%;
  position: relative;
}

#container {
  width: auto;
  margin-left: @menu-width + 1;
  overflow: hidden;
}

#content {
  margin-top: 0;
  padding-top: 10px;
}

// hide menu in popups
body.popup {
  #adminmenuback,
  #adminmenuwrap {
    display: none;
  }
  #container {
    margin-left: 0;
    width: 100%;
  }
}

#adminmenuback,
#adminmenuwrap {
  border-style: solid;
  border-width: 0 1px 0 0;
  width: @menu-width;
  background-color: @menu-bg-color;
  border-color: @menu-border-color;
}

#adminmenushadow,
#adminmenuback {
  background-image: url("../img/menu-shadow.png");
  background-position: right top;
  background-repeat: repeat-y;
}

#adminmenuback {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
}

#adminmenuwrap {
  float: left;
  position: relative;
}

#adminmenushadow {
  bottom: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  z-index: 20;
}

#adminmenu {
  clear: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  width: @menu-width;

  * {
    -moz-user-select: none;
  }

  a {
    outline: none;
    display: block;
    line-height: 18px;
    padding: 2px 5px;

    &:hover {
      color: @text-hover-color;
    }
  }

  li {
    cursor: pointer;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .wp-menu-top {
    min-height: 29px;
    position: relative;

    & > a {
      border-style: solid;
      border-width: 1px 0;
      font-weight: bold;
      line-height: 18px;
      min-width: 10em;
      padding: 5px;
      font-size: 13px;
      .menu-element-colors;

      &.wp-add-url {
        float: left;
        padding-left: 5px;
        width: 10px;
      }
    }

    &.wp-menu-not-open:hover > a {
      background-color: @menu-element-hover-bg-color;
      color: @text-hover-color;
    }

    &.wp-menu-not-open:hover .wp-menu-image a {
      color: @text-hover-color;
    }

    .wp-menu-image {
      float: left;
      height: 28px;
      width: 28px;

      a {
        font-size: 14px;
        padding-top: 6px;
        padding-bottom: 0;
      }
    }

    &.wp-has-add-url {
      & > a {
        padding-right: 1.5em;
        min-width: 8.5em;

        &.wp-add-url {
          position: absolute;
          right: 0;
          top: 0;
          min-width: 1em;
          border-bottom: none;
          padding-right: 5px;
        }
      }
    }
  } // .wp-menu-top

  .wp-has-submenu:hover .wp-menu-arrow {
    display: block;
  }

  .wp-menu-arrow {
    display: none;
    height: 28px;
    width: 6px;
    margin: 0;
    position: absolute;
    right: 100%;
    z-index: 1001;
    border-style: solid;
    border-width: 1px 0;
    cursor: auto;
    .translate(@menu-width);
    .menu-element-colors;
    background-color: @menu-element-hover-bg-color;

    div {
      border-style: solid;
      border-width: 0 0 1px 1px;
      width: 15px;
      height: 15px;
      position: absolute;
      left: -1px;
      top: 6px;
      .matrix(-0.6, 1, 0.6, 1, 0, 0);
      background-color: @menu-element-hover-bg-color;
      border-color: @menu-border-color;
    }
  } // .wp-menu-arrow

  .wp-menu-separator {
    border-style: solid;
    border-width: 1px 0;
    cursor: inherit;
    height: 3px;
    margin: 0;
    padding: 0;
    background-color: darken(@menu-bg-color, 3%);
    border-color: darken(@menu-bg-color, 12%);

    &.with-title {
      height: auto;
      min-height: 3px;
      border-bottom-color: darken(@menu-bg-color, 3%);

      .wp-separator {
        padding: 5px 5px 2px 10px;
        .vertical-gradient(@menu-bg-color, darken(@menu-bg-color, 3%));
        color: darken(@menu-bg-color, 30%);
      }
    }
  }

  .wp-submenu {
    display: none;
    width: @menu-width;
    padding: 0 8px 8px 0;
    margin: 0;
    position: absolute;
    top: -1px;
    left: @menu-width + 1;
    z-index: 999;
    overflow: hidden;
    background: transparent;
    list-style: none;

    .wp-submenu-wrap {
      .box-shadow(@submenu-shadow);
      .border-radius(@submenu-border-radius);
      border-style: solid solid solid none;
      border-width: 1px 1px 1px 0;
      position: relative;
      width: @menu-width;
      border-color: @submenu-border-color;

      .wp-submenu-head {
        display: none;
        font-size: 13px;
        line-height: 18px;
        border-style: solid;
        border-width: 1px 0;
        cursor: default;
        padding: 6px 4px 5px 10px;
        .menu-element-colors;
        background-color: @menu-element-hover-bg-color;
      }

      ul {
        padding: 4px 0;
        margin: 0;
        list-style: none;
        .submenu-bg;
        border-color: @submenu-border-color;

        li {
          margin: 0;
          padding: 0;

          a {
            color: @submenu-link-color;
            padding: 2px 5px 2px 18px;
            font-size: 12px;
            line-height: 18px;

            &:hover {
              .submenu-link-hover;
            }
          }

          &.wp-has-add-url {
            overflow: hidden;

            a:first-child {
              width: @menu-width - 43;
              float: left;
            }

            a.wp-add-url {
              width: 10px;
              padding-left: 5px;
              float: left;
            }
          }

          &.wp-current {
            font-weight: bold;

            a.wp-current {
              .submenu-link-current;
            }
          }
        } // li
      } // ul
    } // .wp-submenu-wrap
  } // .wp-submenu

  li:hover .wp-submenu {
    display: block;
  }

  .wp-menu-tool {
    font-size: 11px;
    margin: 6px 0;
    overflow: hidden;

    .wp-menu-tool-button {
      .border-radius(12px);
      float: left;
      margin: 0 6px 0 5px;
      height: 15px;
      width: 16px;
      padding: 2px 0 0 1px;
      border-style: solid;
      border-width: 1px;
      line-height: 1em;
      font-size: 12px;
    }

    & > span {
      line-height: 10px;
      float: left;
      padding-top: 6px;
      width: @menu-width - 35;
    }
  } // .wp-menu-tool

  #collapse-menu {
    .wp-menu-tool-button {
      width: 17px;
      padding: 2px 0 0 0;
    }
  }

  .wp-has-submenu.wp-menu-open {
    border-style: solid;
    border-width: 0 0 1px;
  }

  .wp-menu-open {

    border-color: @submenu-border-color;

    & > a {
      .open-header-colors;
    }

    .wp-menu-image a {
      .open-header-text;
    }

    .wp-menu-arrow {
      display: block;
      border: 0;
      height: 30px;
      z-index: 25;
      .translate(@menu-width + 1);
      .open-header-colors;

      div {
        border: 0;
        width: 14px;
        top: 7px;
        bottom: 8px;
        right: -7px;
        .open-header-colors(bottom right);
      }
    }

    .wp-submenu {
      display: block;
      bottom: auto;
      left: auto;
      right: auto;
      top: auto;
      z-index: 2;
      position: relative;
      padding: 0;

      .wp-submenu-wrap {
        border: 0;
        .box-shadow(none);
      }

      a:first-child {
        padding-left: 12px;
      }

      .wp-has-add-url a:first-child {
        width: @menu-width - 37;
      }
    }
  } // .wp-menu-open
} // #adminmenu

.wp-folded #container {
  margin-left: @folded-menu-width + 1;
}

.wp-folded #adminmenuback,
.wp-folded #adminmenuwrap {
  width: @folded-menu-width;
}

.wp-folded #adminmenu {

  width: @folded-menu-width;

  .wp-menu-separator.with-title {
    height: 3px;
    border-color: darken(@menu-bg-color, 12%);

    .wp-separator {
      display: none;
    }
  }

  .wp-menu-top {
    border-style: solid none;
    border-width: 1px 0;
    width: @folded-menu-width;
    .menu-element-colors;

    &:hover {
      background-color: @menu-element-hover-bg-color;
    }

    & > a {
      display: none;
    }

    .wp-menu-arrow,
    &.wp-menu-not-open:hover .wp-menu-arrow {
      display: none;
    }
  }

  .wp-submenu {
    width: @menu-width + 1;
    padding: 0 8px 8px 0;
    position: absolute;
    left: 26px;
    top: -5px;
    z-index: 999;

    .wp-submenu-wrap {
      margin-top: 3px;
      width: @menu-width + 1;

      .wp-submenu-head {
        display: block;
      }

      ul {
        border-style: solid;
        border-width: 0 0 0 1px;
      }

      li a:first-child {
        padding-left: 12px;
      }

      li.wp-has-add-url a:first-child {
        width: @menu-width - 37;
      }
    }
  } // .wp-submenu

  .wp-menu-open {
    margin-bottom: 1px;
    .open-header-colors;

    .wp-menu-arrow {
      display: block;
      z-index: 25;
      .translate(@folded-menu-width + 1);
    }

    .wp-submenu {
      display: none;
      text-shadow: none;

      .wp-submenu-wrap {
        margin-top: 4px;
        .box-shadow(@submenu-shadow);
        .border-radius(@submenu-border-radius);

        .wp-submenu-head {
          .open-header-colors;
        }
      }
    }

    &:hover {
      .wp-submenu {
        display: block;
      }
    }

    &.wp-menu-top-last {
      margin-bottom: 0;
    }
  } // .wp-menu-open

  .wp-menu-tool span {
    display: none;
  }
} // .folded #adminmenu

.wp-pinned #adminmenuwrap {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8000;
}

.wp-pinned.wp-with-top-menu #adminmenuwrap {
  top: 28px;
}
