/*
 * Copyright (c) 2014 GE Global Research. All rights reserved.
 *
 * The copyright to the computer software herein is the property of
 * GE Global Research. The software may be used and/or copied only
 * with the written permission of GE Global Research or in accordance
 * with the terms and conditions stipulated in the agreement/contract
 * under which the software has been supplied.
 */

// Settings
@import "px-defaults-design/_settings.defaults.scss";
// Normalize (excerpt)
:host {
  line-height: $inuit-base-line-height / $inuit-base-font-size;
  /* [1] */
  text-size-adjust: 100%;
  /* [4] */
  -moz-osx-font-smoothing: grayscale;
  /* [5] */
  -webkit-font-smoothing: antialiased;
  /* [5] */
}

// Component
/* Subitem State: Default */

$px-app-nav-subitem-height: var(--px-app-nav-subitem-height, calculateRem(30px));
$px-app-nav-subitem-text-color: var(--px-app-nav-subitem-text-color, darkgray);
$px-app-nav-subitem-background-color: var(--px-app-nav-subitem-background-color, white);
/* Subitem State: Hover */

$px-app-nav-subitem-text-color--hover: var(--px-app-nav-subitem-text-color--hover, darkgray);
$px-app-nav-subitem-background-color--hover: var(--px-app-nav-subitem-background-color--hover, lightgray);
/* Subitem State: Collapsed */

/* Subitem State: Selected */

$px-app-nav-subitem-text-color--selected: var(--px-app-nav-subitem-text-color--selected, white);
$px-app-nav-subitem-background-color--selected: var(--px-app-nav-subitem-background-color--selected, blue);
/* Subitem State: Collapsed */

$px-app-nav-subitem-text-color--collapsed: var(--px-app-nav-subitem-text-color--collapsed, darkgray);
$px-app-nav-subitem-background-color--collapsed: var(--px-app-nav-subitem-background-color--collapsed, darkgray);
/* Subitem State: Collapsed:hover */

$px-app-nav-subitem-background-color--collapsed-hover: var(--px-app-nav-subitem-background-color--collapsed-hover, darkgray);
.px-app-nav-subitem {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: $inuit-base-spacing-unit;
  padding-right: $inuit-base-spacing-unit;
  cursor: pointer;
  height: $px-app-nav-subitem-height;
  color: $px-app-nav-subitem-text-color;
  background-color: $px-app-nav-subitem-background-color;
  &:hover {
    color: $px-app-nav-subitem-text-color--hover;
    background-color: $px-app-nav-subitem-background-color--hover;
  }
  &.selected {
    color: $px-app-nav-subitem-text-color--selected;
    background-color: $px-app-nav-subitem-background-color--selected;
  }
  &.collapsed {
    color: $px-app-nav-subitem-text-color--collapsed;
    background-color: $px-app-nav-subitem-background-color--collapsed;
    padding-left: calculateRem(55px);
  }
}

:host([collapsed]:hover) {
  background-color: $px-app-nav-subitem-background-color--collapsed-hover;
}

/* Subitem State: Collapsed+Parent Selected+NOT selected */

$px-app-nav-subitem-text-color--parent-collapsed-not-selected: var(--px-app-nav-subitem-text-color--parent-collapsed-not-selected, darkgray);
$px-app-nav-subitem-background-color--parent-collapsed-not-selected: var(--px-app-nav-subitem-background-color--parent-collapsed-not-selected, white);
:host([collapsed][parent-selected]) {
  color: $px-app-nav-subitem-text-color--parent-collapsed-not-selected;
  background-color: $px-app-nav-subitem-background-color--parent-collapsed-not-selected;
}

$px-app-nav-subitem-accent-color--parent-collapsed-selected: var(--px-app-nav-subitem-accent-color--parent-collapsed-selected, blue);
:host([collapsed][parent-selected]):before {
  content: '';
  display: block;
  background-color: $px-app-nav-subitem-accent-color--parent-collapsed-selected;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 100%;
}

$px-app-nav-subitem-background-color--parent-collapsed-hover: var(--px-app-nav-subitem-background-color--parent-collapsed-hover, lightgray);
:host([collapsed][parent-selected]:hover) {
  background-color: $px-app-nav-subitem-background-color--parent-collapsed-hover;
}

/* Subitem State: Collapsed+Parent Selected+Selected */

$px-app-nav-subitem-background-color--parent-collapsed-selected: var(--px-app-nav-subitem-background-color--parent-collapsed-selected, lightgray);
$px-app-nav-subitem-text-color--parent-collapsed-selected: var(--px-app-nav-subitem-text-color--parent-collapsed-selected, white);
:host([collapsed][parent-selected][selected]) {
  color: $px-app-nav-subitem-text-color--parent-collapsed-selected;
  background-color: $px-app-nav-subitem-background-color--parent-collapsed-selected;
}

/* Sub-components */

.app-nav-subitem__label {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}