// Settings
@import "px-defaults-design/_settings.defaults.scss";
/* Item State: Hover */
$px-app-nav-item-icon-color--hover: var(--px-app-nav-item-icon-color--hover, lightgray);
$px-app-nav-item-text-color--hover: var(--px-app-nav-item-text-color--hover, lightgray);
$px-app-nav-item-background-color--hover: var(--px-app-nav-item-background-color--hover, darkgray);
/* Item State: Pressed */
$px-app-nav-item-icon-color--pressed: var(--px-app-nav-item-icon-color--pressed, darkgray);
$px-app-nav-item-text-color--pressed: var(--px-app-nav-item-text-color--pressed, darkgray);
$px-app-nav-item-background-color--pressed: var(--px-app-nav-item-background-color--pressed, lightgray);
/* Item State: Selected */
$px-app-nav-item-icon-color--selected: var(--px-app-nav-item-icon-color--selected, darkgray);
$px-app-nav-item-text-color--selected: var(--px-app-nav-item-text-color--selected, darkgray);
$px-app-nav-item-background-color--selected: var(--px-app-nav-item-background-color--selected, white);
$px-app-nav-item-stripe-size--selected: var(--px-app-nav-item-stripe-size--selected, calculateRem(2px));
$px-app-nav-item-stripe-color--selected: var(--px-app-nav-item-stripe-color--selected, blue);
/* Item State: Default */
$px-app-nav-item-height: var(--px-app-nav-height, calculateRem(60px));
$px-app-nav-item-padding: var(--px-app-nav-item-padding, calculateRem(15px));
$px-app-nav-item-icon-size: var(--px-app-nav-item-icon-size, calculateRem(30px));
$px-app-nav-item-icon-color: var(--px-app-nav-item-icon-color, darkgray);
$px-app-nav-item-text-color: var(--px-app-nav-item-text-color, darkgray);
$px-app-nav-item-background-color: var(--px-app-nav-item-background-color, lightgray);
/* Item State: Selected+Collapsed */
$px-app-nav-item-icon-color--collapsed: var(--px-app-nav-item-icon-color--collapsed, darkgray);
$px-app-nav-item-text-color--collapsed: var(--px-app-nav-item-text-color--collapsed, darkgray);
$px-app-nav-item-background-color--collapsed: var(--px-app-nav-item-background-color--collapsed, white);
/* Item State: Empty */
$px-app-nav-item-background-color--empty: var(--px-app-nav-item-background-color--empty, lightgray);


// Component
.px-app-nav-item {
  line-height             : $inuit-base-line-height / $inuit-base-font-size;
  text-size-adjust        : 100%;
  -moz-osx-font-smoothing : grayscale;
  -webkit-font-smoothing  : antialiased;
  position                : relative;
  display                 : flex;
  align-items             : center;
  height                  : $px-app-nav-item-height;
  padding-left            : $px-app-nav-item-padding;
  padding-right           : $px-app-nav-item-padding;
  cursor                  : pointer;
  color                   : $px-app-nav-item-text-color;
  background-color        : $px-app-nav-item-background-color;
  --iron-icon-stroke-color: $px-app-nav-item-icon-color;
  user-select             : none;
  outline                 : none;

  
  &:hover {
    color                   : $px-app-nav-item-text-color--hover;
    background-color        : $px-app-nav-item-background-color--hover;
    --iron-icon-stroke-color: $px-app-nav-item-icon-color--hover;
  }

  &:active {
    color                   : $px-app-nav-item-text-color--pressed;
    background-color        : $px-app-nav-item-background-color--pressed;
    --iron-icon-stroke-color: $px-app-nav-item-icon-color--pressed;
  }
  /* Item State: Selected */
  &.selected {
    color                   : $px-app-nav-item-text-color--selected;
    background-color        : $px-app-nav-item-background-color--selected;
    --iron-icon-stroke-color: $px-app-nav-item-icon-color--selected;
  }

  &.selected:before {
    content         : '';
    position        : absolute;
    top             : 0;
    left            : 0;
    right           : 0;
    display         : block;
    width           : 100%;
    height          : $px-app-nav-item-stripe-size--selected;
    background-color: $px-app-nav-item-stripe-color--selected;
  }
  /* Item State: Selected+Collapsed */
  &.selected.collapsed {
    color                   : $px-app-nav-item-text-color--collapsed;
    background-color        : $px-app-nav-item-background-color--collapsed;
    --iron-icon-stroke-color: $px-app-nav-item-icon-color--collapsed;
  }

  &.selected.collapsed:before {
    top   : 0;
    left  : 0;
    bottom: 0;
    right : auto;
    height: 100%;
    width : $px-app-nav-item-stripe-size--selected;
  }
  /* Item State: Empty */
  /* Sub-components */
  .app-nav-item__label {
    margin       : 0;
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
    display: flex;
    flex: 1;
  }

  &.collapsed .app-nav-item__label,
  &.overflowed .app-nav-item__label {
    flex: 1 1 auto;
  }

  .app-nav-item__label--empty {
    display         : block;
    width           : calculateRem(100px);
    height          : calculateRem(10px);
    background-color: $px-app-nav-item-background-color--empty;
  }

  .app-nav-item__icon {
    --iron-icon-height: $px-app-nav-item-icon-size;
    --iron-icon-width : $px-app-nav-item-icon-size;
  }

  .app-nav-item__icon--with-label {
    margin-right: calculateRem(5px);
  }

  .app-nav-item__icon--empty {
    display         : block;
    width           : $px-app-nav-item-icon-size;
    height          : $px-app-nav-item-icon-size;
    background-color: $px-app-nav-item-background-color--empty;
    flex            : none;
  }

  .app-nav-item__dropdown-icon {
    --iron-icon-height: calculateRem(20px);
    --iron-icon-width : calculateRem(20px);
    margin-left       : calculateRem(3px);
  }

  &.only-show-icon .app-nav-item__label {
    display: none;
  }

  &.only-show-icon .app-nav-item__dropdown-icon,
  &.only-show-icon .app-nav-item__label {
    display: none;
  }
}