// Settings
@import "px-defaults-design/_settings.defaults.scss";

// Objects
@import "px-shadows-design/_objects.shadows.scss";
// Component
$px-app-nav-height: var(--px-app-nav-height, calculateRem(60px));
$px-app-nav-background-color: var(--px-app-nav-background-color, whitesmoke);
$px-app-nav-box-shadow: var(--px-app-nav-box-shadow, $inuit-shadow-navigation);
$px-app-nav-vertical-width: var(--px-app-nav-vertical-width, calculateRem(60px));
$px-app-nav-vertical-width--opened: var(--px-app-nav-vertical-width--opened, calculateRem(320px));
$px-app-nav-vertical-height: var(--px-app-nav-vertical-height, 100%);
$px-app-nav-vertical-position: var(--px-app-nav-vertical-position, absolute);
$px-app-nav-vertical-transition: var(--px-app-nav-vertical-transition, max-width 250ms ease);
/**
 * AppNav styles
 */
.px-app-nav {
  height                 : $px-app-nav-height;
  background-color       : $px-app-nav-background-color;
  box-shadow             : $px-app-nav-box-shadow;
  display                : block;
  width                  : 100%;
  text-size-adjust       : 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing : antialiased;

  .app-nav {
    display: flex;
  }

  .app-nav__items {
    height   : $px-app-nav-height;
    flex     : 1 1 auto;
    display  : flex;
    max-width: 100%;
  }

  &.vertical {
    overflow-x: hidden;
    overflow-y: hidden;
    position  : $px-app-nav-vertical-position;
    height    : $px-app-nav-vertical-height;
    left      : 0;
    top       : 0;
    min-width : $px-app-nav-vertical-width;
    max-width : $px-app-nav-vertical-width;
    transition: $px-app-nav-vertical-transition;

    &.vertical-opened {
      overflow-y: auto;
      max-width : $px-app-nav-vertical-width--opened;
    }

    .app-nav {
      display: block;
    }

    .app-nav__items {
      flex-direction: column;
      height        : 100%;
    }
  }
}