// Import all the tools needed to customize the theme and extract parts of it
// @import '~@angular/material/core/theming/all-theme';
@import '../../all-theme';

// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin ap-sidenav-theme($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  [ap-sidenav] {
    background: md-color($md-ap-dark, 500);
    color: md-contrast($md-ap-dark, 500);
    width: $sidenav-width;
    box-shadow: none;
    overflow-y: auto;
    transition: width $sidenav-transition-duration cubic-bezier(0.25, 0.8, 0.25, 1);
    .cdk-focus-trap-content { height: 100%; }

    [only-expanded] { display: block; }
    [only-collapsed] { display: none; }

    ul.content {
      width: 100%;
      min-height: 100%;
      margin: 0;
      & > * {
        padding: 0 15px;
      }
      &:focus { outline: none; }
    }

    md-nav-list {
      .md-list-item { color: md-contrast($md-ap-dark, 500); }
    }

    & > li {
      display: flex;
      align-items: center;
    }
    ul {
      display: flex;
      flex-direction: column;
      list-style-type: none; padding: 0;
      padding: 20px 0;
      ul.active, li.active { background-color: $sidenav-item-active;}
    }

    .navigation {
      position: relative;
      .close {
        position: absolute;
        top: 0px;
        right: 0px;
        margin-top: -10px;
        margin-right: 7px;
        font-size: 12px;
        opacity: 0.26;
        cursor: pointer;
        &:hover { opacity: 1; }
      }
    }
    .logo {
      align-self: center;
      margin-bottom: 20px;
      img { width: $sidenav-logo-width; }
    }
    .publish {
      align-self: center;
      margin-bottom: 42px;
      button[ap-button] {
        font-family: "Open Sans";
        letter-spacing: 0.3px;
        font-size: 15px;
        color: white;
        width: 140px;
        border-color: #fff;
        padding: 6px 20px;
        /*border-radius: 11px;*/
        i {
          margin-right: 4px;
          margin-left: -2px;
          font-size: 13px;
        }
        span { vertical-align: initial; }
      }
    }
    [ap-input][search]{
      width: 100%;
      display: flex;
      padding-left: 5px;
    }
    ul.accounts {
      padding: 0;
      flex: 1;
      li.account {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 6px 20px 6px 15px;
        min-height: 44px;
        .name {
          flex:1;
          margin: 0 15px;
          color: white;
          font-family: "Open Sans";
          letter-spacing: 0.3px;
          font-size: 13px;
          font-weight: 600;
        }
      }

      ul.group-accounts {
        padding: 0;
        li.group-account {
          [ap-avatar] img { border: 2px solid md-color($primary); }
        }
      }
    }
    ul.actions {
      padding: 15px;
      padding-bottom: 0;
      li {
        display: flex;
        font-family: "Open Sans";
        letter-spacing: 0.3px;
        font-size: 15px;
        padding: 6px 7px;
        cursor: pointer;
        align-items: center;
        i { margin-right: 15px; vertical-align: middle; }
      }
    }
    div.trial {
      margin-top: 30px;
      padding-top: 26px;
      padding-bottom: 10px;
      border-top: 1px solid #383F45;
      text-align: center;
      > span {
        font-family: "Open Sans";
        letter-spacing: 0.3px;
        font-size: 13px;
      }
      [ap-button] { margin-top: 16px; border-radius: 3px; }
    }

  }

  [ap-sidenav][collapsed] {
    width: $sidenav-mini-width;
    [only-expanded] { display: none; }
    [only-collapsed] { display: block !important; }

    li {
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      cursor: pointer;
    }
    .navigation { margin-bottom: 20px; }
    .publish { margin-bottom: 34px; }

    .search { margin-bottom: 15px; }
    .accounts li.account {
      padding: 9px 0;
      [ap-badge-icon].notification {
        max-height: 13px;
        min-height: 13px;
        max-width: initial;
        min-width: 23px;
        border-radius: 25px;
        padding: 0 6px;
        line-height: 12px;
        font-size: 10px;
        right: -13px;
        span {
          min-width: initial;
          max-width: initial;
          max-height: initial;
          min-height: initial;
        }
      }
    }

    .actions li {
      padding: 7px 0;
      i { margin: 0; font-size: 15px; }
    }
  }

}