@import "../variables.scss";

#adminmenuwrap,
#adminmenu {
  height: 100%;
}
#adminmenu {
  margin-top: 0;
  padding-left: 0;
  list-style: none;
  border-right: 1px solid $bordercolor;
}
#collapse-menu {
  display: none;
}
#adminmenu,
#adminmenuback,
#adminmenuwrap {
  width: auto;
}
#a2020-menu-app {
  height: 100%;
}
.admin2020_menu {
  width: 250px;
}
.admin2020_menu.a2020-menu-minified {
  width: 60px !important;
}

.admin2020_menu.no-icons {
  .uk-nav-sub {
    padding-left: 0;
  }
}
.a2020_menu_searcher_wrap {
  .a2020_menu_search {
    input {
      border: none !important;
      padding-left: 32px !important;
      background: #f2f2f2 !important;
    }
  }
}

@media only screen and (min-width: 768px) {
  body.a2020_menu_small {
    .interface-interface-skeleton {
      left: 65px;
    }
    .divider-placeholder {
      display: inherit;
    }

    #wpcontent,
    #wpfooter {
      margin-left: 66px;
    }
  }
}
.admin2020_menu {
  .uk-nav-default.loading {
    margin-top: 30px;
    .menu-icon-generic {
      width: 100%;
    }
    span.a2020-menu-icon {
      width: 16px;
      height: 16px;
      background: rgb(242, 242, 242);
      display: inline-block;
      border-radius: 4px;
      top: 0;
    }
    .a2020-menu-title {
      display: inline-block;
      width: 90%;
      height: 16px;
      background: rgb(242, 242, 242);
      border-radius: 4px;
    }
    .uk-nav-sub {
      padding-left: 26px;
      .sub-item {
        display: inline-block;
        width: 60%;
        height: 8px;
        background: rgb(242, 242, 242);
        border-radius: 4px;
      }
    }
  }
}
.a2020_menu_small {
  .admin2020_menu.loader {
    display: none;
  }
  .a2020_menu_searcher_wrap {
    display: none;
  }
}
#wpcontent,
#wpfooter,
.folded #wpcontent,
.folded #wpfooter {
  margin-left: 250px;
}
#adminmenuwrap {
  float: left;
  z-index: 900;
  bottom: auto !important;
  top: auto !important;
  position: fixed !important;
  max-height: calc(100vh - 32px);
}

.a2020_admin_bar {
  #adminmenuwrap {
    max-height: calc(100vh - 61px);
  }
}

#adminmenumain {
  * {
    transition: all 0.2s ease-in-out;
  }
  .screen-reader-shortcut {
    display: none;
  }
}
.folded .interface-interface-skeleton,
.auto-fold .interface-interface-skeleton {
  left: 250px;
}
#wpwrap {
  height: auto;
  min-height: 100%;
  width: 100%;
  position: relative;
  display: inline-block;
}
.admin2020_menu {
  font-family: $a2020-font-family;
  max-height: 100%;
  overflow: auto;
  margin-bottom: 30px;
  .divider-placeholder {
    display: none;
  }
  .menu-top {
    margin-bottom: 4px;
  }
  .a2020-menu-chev {
    cursor: pointer;
    font-size: 22px;
    position: relative;
    top: 2px;
  }
  .uk-nav-default {
    padding: 0 15px;
    padding-bottom: 50px;
    & > li {
      padding-left: 5px;
      padding-right: 5px;
    }
    & > li.uk-active > a {
      .uk-icon-button {
        background: $global-primary-background;
        color: $global-inverse-color;
      }
    }
  }

  .a2020-menu-icon {
    font-size: 18px;
    top: 2px;
    position: relative;
    margin-right: 10px;
  }

  .a2020-favourite {
    .a2020-menu-icon {
      top: 4px;
    }
  }
  .uk-icon-button {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border-radius: 4px;
    background-color: rgb(95 95 95 / 8%);

    &:hover {
      background-color: rgb(95 95 95 / 14%);
    }
  }

  .dashicons-before:before {
    width: 16px;
    height: 16px;
    font-size: 16px;
  }
  .uk-icon-image {
    background-size: 80% 80% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  .a2020-menu-title {
    font-weight: 600;
    max-width: 90%;
    display: inline-flex;
  }
  .uk-nav-sub {
    padding-left: 28px;
    margin-bottom: 15px;
    margin-top: 0 !important;
  }
  .uk-nav-divider {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-color: transparent !important;
  }
  .count-0 {
    display: none;
  }
  .plugin-count,
  .pending-count,
  .update-plugins .update-count {
    border-radius: 4px;
    background: #ff8a2f2b;
    /* border: 2px solid #faa05a; */
    color: #ff8a2f;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    /* text-align: center; */
    font-size: 11px;
  }
  .wp-submenu {
    .update-plugins {
      display: inline-block;
    }
  }
  .a2020-favourite {
    .a2020-menu-title {
      max-width: 100%;
    }
  }
}
////colors
.admin2020_menu {
  color: #888;
  a:hover {
    color: #222;
  }
  .a2020-menu-title.wp-menu-name {
    color: #888;
  }
  .a2020-menu-icon {
    color: #888;
  }
  .uk-nav-default {
    & > li.uk-active,
    & > li.uk-open {
      .a2020-menu-title,
      .a2020-menu-icon {
        color: #222;
      }
    }
  }
}
///dark colors
.admin2020_menu.uk-light {
  color: #888;
  a {
    color: #888;
  }
  .a2020-menu-title:hover {
    color: #fff;
  }
  .uk-icon-button {
    background: #333;
  }
  a:hover {
    color: #fff;
  }
  .uk-nav-default {
    & > li.uk-active,
    & > li.uk-open {
      .a2020-menu-title,
      .a2020-menu-icon {
        color: #fff;
      }
    }
  }
}

.a2020_night_mode {
  .admin2020_menu {
    color: #888;
    a {
      color: #888;
    }
    .a2020-menu-title:hover {
      color: #fff;
    }
    .uk-icon-button {
      background: #333;
    }
    a:hover {
      color: #fff;
    }
    .uk-nav-default {
      & > li.uk-active,
      & > li.uk-open {
        .a2020-menu-title,
        .a2020-menu-icon {
          color: #fff;
        }
      }
    }
  }
}

.a2020_night_mode,
.uk-light {
  .a2020_menu_searcher_wrap {
    input {
      background: $mid-dark !important;
    }
  }
}

/////////////////////////////////////////////
//MOBILE STYLES //
/////////////////////////////////////////////
@media only screen and (max-width: 1000px) {
  #wpcontent,
  #wpfooter,
  .folded #wpcontent,
  .folded #wpfooter {
    margin-left: 0 !important;
  }
  .folded .interface-interface-skeleton,
  .auto-fold .interface-interface-skeleton {
    left: 0;
  }
}
