$appbar-title-font-size: $font-size-title;
$appbar-title-color: rgb(255, 255, 255);
$appbar-title-font-letter-spacing: 0.005em;
$appbar-height: 45px;
$appbar-ext-height: 95px;
$appbar-desktop-margin: 16px;
$appbar-tablet-margin: 26px;
$appbar-phone-margin: 16px;
$appbar-font-size: 24px;

.pip-appbar {
  @include flex-fixed();
  md-toolbar{
    @include flex-direction(row);
    @include flex-vertical-content(center);
    padding-left: 8px;
    padding-right: 8px;
    md-button{
      md-icon{
        color: #fff;
      }
    }
  }

  z-index: 11;
  .pip-shadow {
    box-shadow: $box-shadow;
  }

}

.pip-appbar-ext {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: $appbar-ext-height;
  box-shadow: $box-shadow;
  z-index: 0;
}

pip-appbar-shadow {
  height: 48px;
  width: 100%;
  margin-top: -48px;
  display: block;
  box-shadow: $box-shadow;
}

@media (max-width: $layout-breakpoint-sm) {
  // Style to hide elements on smaller screens
  .pip-appbar {
    .pip-appbar-hide-sm {
      display: none;
    }
  }

  pip-appbar-shadow {
    height: 56px;
    margin-top: -56px;
  }
}

@media (min-width: $layout-breakpoint-lg) {
  // Style to hide elements on bigger screens
  pip-appbar-shadow {
    height: 64px;
    margin-top: -64px;
  }
}

@media (min-width: $layout-breakpoint-sm) {
  // Style to hide elements on smaller screens
  .pip-appbar {
    .pip-appbar-show-sm {
      display: none;
    }
  }
}

@media (max-width: $layout-breakpoint-md) {
  // Style to hide elements on smaller screens
  .pip-appbar {
    // height: 56px !important;
    // max-height: 56px !important;

    @media ( min-width: $layout-breakpoint-sm) {
      .pip-shadow-sm {
        box-shadow: $box-shadow;
      }
    }

  }
}

.pip-xs {
  .pip-appbar .pip-shadow-xs {
    box-shadow: $box-shadow;
  }
}

.pip-sm {
  .pip-appbar .pip-shadow-sm {
    box-shadow: $box-shadow;
  }
}

.pip-md {
  .pip-appbar .pip-shadow-md {
    box-shadow: $box-shadow;
  }
}

.pip-lg {
  .pip-appbar .pip-shadow-lg {
    box-shadow: $box-shadow;
  }
}

.pip-xl {
  .pip-appbar .pip-shadow-xl {
    box-shadow: $box-shadow;
  }
}