/* Item State: Hover */
/* Item State: Pressed */
/* Item State: Selected */
/* Item State: Default */
/* Item State: Selected+Collapsed */
/* Item State: Empty */
.px-app-nav-item { line-height: 1.33333; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--px-app-nav-height, 4rem); padding-left: var(--px-app-nav-item-padding, 1rem); padding-right: var(--px-app-nav-item-padding, 1rem); cursor: pointer; color: var(--px-app-nav-item-text-color, darkgray); background-color: var(--px-app-nav-item-background-color, lightgray); --iron-icon-stroke-color: var(--px-app-nav-item-icon-color, darkgray); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; /* Item State: Selected */ /* Item State: Selected+Collapsed */ /* Item State: Empty */ /* Sub-components */ }

.px-app-nav-item:hover { color: var(--px-app-nav-item-text-color--hover, lightgray); background-color: var(--px-app-nav-item-background-color--hover, darkgray); --iron-icon-stroke-color: var(--px-app-nav-item-icon-color--hover, lightgray); }

.px-app-nav-item:active { color: var(--px-app-nav-item-text-color--pressed, darkgray); background-color: var(--px-app-nav-item-background-color--pressed, lightgray); --iron-icon-stroke-color: var(--px-app-nav-item-icon-color--pressed, darkgray); }

.px-app-nav-item.selected { color: var(--px-app-nav-item-text-color--selected, darkgray); background-color: var(--px-app-nav-item-background-color--selected, white); --iron-icon-stroke-color: var(--px-app-nav-item-icon-color--selected, darkgray); }

.px-app-nav-item.selected:before { content: ''; position: absolute; top: 0; left: 0; right: 0; display: block; width: 100%; height: var(--px-app-nav-item-stripe-size--selected, 0.13333rem); background-color: var(--px-app-nav-item-stripe-color--selected, blue); }

.px-app-nav-item.selected.collapsed { color: var(--px-app-nav-item-text-color--collapsed, darkgray); background-color: var(--px-app-nav-item-background-color--collapsed, white); --iron-icon-stroke-color: var(--px-app-nav-item-icon-color--collapsed, darkgray); }

.px-app-nav-item.selected.collapsed:before { top: 0; left: 0; bottom: 0; right: auto; height: 100%; width: var(--px-app-nav-item-stripe-size--selected, 0.13333rem); }

.px-app-nav-item .app-nav-item__label { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.px-app-nav-item.collapsed .app-nav-item__label, .px-app-nav-item.overflowed .app-nav-item__label { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }

.px-app-nav-item .app-nav-item__label--empty { display: block; width: 6.66667rem; height: 0.66667rem; background-color: var(--px-app-nav-item-background-color--empty, lightgray); }

.px-app-nav-item .app-nav-item__icon { --iron-icon-height: var(--px-app-nav-item-icon-size, 2rem); --iron-icon-width: var(--px-app-nav-item-icon-size, 2rem); }

.px-app-nav-item .app-nav-item__icon--with-label { margin-right: 0.33333rem; }

.px-app-nav-item .app-nav-item__icon--empty { display: block; width: var(--px-app-nav-item-icon-size, 2rem); height: var(--px-app-nav-item-icon-size, 2rem); background-color: var(--px-app-nav-item-background-color--empty, lightgray); -webkit-box-flex: 0; -ms-flex: none; flex: none; }

.px-app-nav-item .app-nav-item__dropdown-icon { --iron-icon-height: 1.33333rem; --iron-icon-width: 1.33333rem; margin-left: 0.2rem; }

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

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