// 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-navbar-theme($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  $border-color: rgba( md-color($md-ap-grey, 500), .39 );
  $tab-link-color: #202326;
  // Use md-color to extract individual colors from a palette as necessary.
  /*.candy-carousel {
    background-color: md-color($primary);
    border-color: md-color($accent, A400);
  }*/

  md-toolbar[ap-main-toolbar], nav[ap-main-navbar] {
    [md-tab-nav-bar], &[md-tab-nav-bar] {
      border-bottom: none;

      [md-tab-link] {
        display: flex;
        align-self: center;
        align-items: center;
        justify-content: center;
        color: $tab-link-color;
        width: 135px;
        min-width: inherit;
        font-family: "Open Sans";
        font-size: 13px;
        opacity: 1;
        text-decoration: none;

        [ap-select] { margin-right: -11px; }
        [ap-icon] { font-size: 20px; }
        &:hover, &:hover [ap-badge] { text-decoration: none; }
        &[disabled] { opacity: 0.27; }
      }
      md-ink-bar {
        width: 40px !important;
        margin-left: 48px;
      }
      &[only-icons] {
        [md-tab-link] { width: 50px; }
        md-ink-bar { margin-left: 5px; }
      }
      &[centered] { justify-content: center; }
      &[border-bottom] { border-bottom: 1px solid $color-border; }
    }
  }

  md-toolbar[ap-main-toolbar] {
    background: white;
    color: md-color($md-ap-dark, 500);
    [md-tab-nav-bar] { height: 100%; }

    [navbar-block] {
      border-right: 1px solid $color-border;
      border-left: 1px solid $color-border;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 20px;
      &:first-child { border-left: 0; padding-left: 0; }
      &:last-child { border-right: 0; padding-right: 0; }

      &.avatar-desc {
        width: 295px;

        .avatar {
          width: 30px;
          height: 30px;
          margin-right: 12px;
        }
        .desc {
          overflow: hidden;

          & > * { display: block; }
          & > span {
            font-size: 15px;
            font-family: "Hind";
            letter-spacing: 0.5px;
          }
          a {
            font-size: 11px;
            font-family: "Open Sans";
            letter-spacing: 0.3px;
            height: 17px;
            margin-top: -1px;
            color: #499EFF;

            &:hover { text-decoration: none; }
            i {
              font-size: 11px;
              width: 11px;
              height: 15px;
              margin-right: 4px;
              vertical-align: middle;
            }
            span { text-decoration: underline; }

          }
        }
      }

      &.users {
        [ap-avatar] {
          margin-right: -5px;
          border: 1px solid $color-success;
          &:last-child { margin-right: auto; }
        }
      }
    }

  }

  nav[ap-main-navbar],
  nav[ap-main-header] {
    display: flex;
    align-items: center;
    border-bottom: 1px solid $border-color;
    a {
      cursor: pointer;
      &[md-tab-link]:hover { text-decoration: none; }
      > * { vertical-align: middle; }
    }

    &[tabs] {
      padding: 0 28px;
      padding-top: 25px;
      [tab-button] {
        margin: 0;
        z-index: 2;
        bottom: -2px;
        box-shadow: none;
        border: 1px solid $color-border;
        border-left: none;
        border-bottom: none;
        color: $item-text-color;
        height: $navbar-tab-height;
        border-bottom-left-radius: initial;
        border-bottom-right-radius: initial;
        background: $navbar-tab-color-inactive;
        &:first-child { border-left: 1px solid $color-border; }
        &.active {
          background: $navbar-tab-color-active;
          color: md-color($primary);
        }
      }
    }
  }

  nav[ap-main-header] {
    height: 45px;
    padding: 0 20px;
    background: white;
    & > * {
      margin: 0 10px;
      &:first-child { margin-left: 0; }
      &:last-child { margin-right: 0; }
    }
    &.left {
      border-right: 1px solid $border-color;
      -webkit-box-shadow: 3px 0 12px -2px rgba(0, 0, 0, 0.1);
      box-shadow: 3px 0 12px -2px rgba(0, 0, 0, 0.1)
    }
    [ap-select] {
      font-size: 11px;
      font-family: "Open Sans";
      letter-spacing: 0.3px;
      .md-select-value, .md-select-arrow { color: $item-text-color; }
      .md-select-arrow { margin-top: 2px; }
    }
    a i, a md-icon {
      font-size: 12px;
      width: 12px;
      height: 11px;
      color: $item-text-color;
    }
  }
}