html,
body,
#root {
  height: 100%;
}

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

/* NOTIFICATIONS -------------------------------------------------------------*/

#notifications {
  position: fixed;
  top: 85px;
  right: 10px;
  z-index: 100;
  width: 350px;
  max-width: 400px;
  margin: auto;
}
#notifications .notification-item {
  margin-bottom: 10px;
}

/* SPINNER -------------------------------------------------------------------*/

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* TREE-DETAIL VIEW ----------------------------------------------------------*/

/* TODO rem breakpoints would be better than px breakpoints */

/* At larger viewport heights, the page header will be fixed, and scrolling in each panel is independent */
@media screen and (min-height: 50rem) {
  .pf-c-page__main-section.pf-m-fill.ha-m-full-height {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }
}

/* styles for layout of split view */
.ha-c-panel__tree-view {
  width: 35rem;
}
@media screen and (max-width: 70rem) {
  .ha-c-panel__tree-view {
    display: none;
    visibility: hidden;
  }
}

/* The tree view panel is designed to shrink and grow in height as the user expands/collapses nodes.
   If the contents overflow the screen, the card touches the bottom. This is the max-height property.
   The max-height is calculated from the height of the parent container plus the size of the bottom padding
   of the page. */
.pf-c-card.ha-c-panel__tree-view {
  overflow: auto;
  max-height: calc(100% + var(--pf-c-page__main-section--PaddingBottom));
}
/* The details panel is designed to fill the height regardless of height of contents.
   If the contents do not need to scroll, then consistent padding displays around the edges of the card
   But if the contents overflow the screen and require scrolling, then the card touches the bottom of the window. */
.pf-c-card.ha-c-panel__details-view {
  overflow: auto;
  min-height: 100%;
  max-height: calc(100% + var(--pf-c-page__main-section--PaddingBottom));
}

/* RESOURC TREE --------------------------------------------------------------*/
.ha-c-tree-view:not(.ha-m-full-width) .pf-c-data-list__item-row {
  --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
} /* decreases horizontal spacing in split layout */

/* Styles for extending the DataList to create a tree view */
/* TODO: test that the toggle indentation works in IE. */
.ha-c-tree-view.pf-c-data-list,
.ha-c-tree-view .pf-c-data-list {
  --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
  --ha-c-data-list__toggle--TotalWidth: calc(
    1em + var(--pf-c-data-list__item-control--MarginRight) +
      (var(--pf-global--spacer--md))
  );
} /* The second variable creates the spacing needed to indent the toggle by one level 
     (i.e. the variable represents the size of one toggle, and therefore the size of the indentation)
     The md spacer occurs twice for button padding, one on left and one on right, but
     only one is used in the TotalWidth variable. 
     The other instance of global--spacer--md is used for left margin on the data list itself */

/* NOTE: additional rulesets are needed to support additional levels */
[data-level="1"] .pf-c-data-list__toggle {
  padding-left: var(--ha-c-data-list__toggle--TotalWidth);
}
[data-level="2"] .pf-c-data-list__toggle {
  padding-left: calc(var(--ha-c-data-list__toggle--TotalWidth) * 2);
}
.pf-c-data-list[data-level] {
  margin-left: var(--pf-global--spacer--md);
  --pf-c-data-list--BorderTopColor: transparent;
  --pf-c-data-list--BorderBottomColor: transparent;
}

.ha-c-tree-view .pf-c-data-list__toggle {
  border-right: var(--pf-global--BorderWidth--sm) solid
    var(--pf-c-data-list__item-item--BorderTopColor);
}

/* expand buttons are included for all nodes, but only visible for nodes with children */
.pf-c-data-list__item-control[aria-hidden="true"] .pf-c-button {
  visibility: hidden;
}

/* selected status is also included for all nodes, but only visible for the active node */
.ha-c-tree-view__selected-status {
  margin-left: var(--pf-c-data-list__item-action--MarginLeft);
  padding-top: var(--pf-c-data-list__cell--PaddingTop);
  color: var(--pf-global--active-color--100);
  visibility: hidden;
}
.ha-c-tree-view__selected-status.ha-m-active {
  visibility: visible;
}

.ha-c-tree-view .pf-c-data-list__cell + .pf-c-data-list__cell {
  flex: 0 0 calc(45vw - 10rem);
  margin-left: auto;
  white-space: nowrap;
} /* sets spacing for Type column */
.ha-c-data-list__item-status {
  flex: 0 0 10rem;
  margin-left: auto;
  padding-top: var(--pf-c-data-list__cell--PaddingTop);
  padding-bottom: var(--pf-c-data-list__item-content--PaddingBottom);
} /* sets spacing for Status column */

@media screen and (max-width: 62rem) {
  .ha-c-tree-view .pf-c-data-list__item-content {
    display: grid;
    width: 100%;
    grid-template-columns: auto 1fr;
    padding-bottom: 0;
  }
  .ha-c-tree-view .pf-c-data-list__cell {
    padding-bottom: var(--pf-global--spacer--xs);
  }
  .ha-c-tree-view .pf-c-data-list__cell + .pf-c-data-list__cell {
    margin-left: 0;
  }
  .ha-c-tree-view .pf-c-data-list__cell:last-child {
    padding-top: 0;
    padding-bottom: var(--pf-global--spacer--md);
  }
}
/* similar styles used for the max-width breakpoint above are used for the split screen */
.ha-c-tree-view:not(.ha-m-full-width) .pf-c-data-list__item-content {
  display: grid;
  width: 100%;
  grid-template-columns: auto 1fr;
  padding-bottom: 0;
}
.ha-c-tree-view:not(.ha-m-full-width) .pf-c-data-list__cell {
  padding-bottom: var(--pf-global--spacer--xs);
}
.ha-c-tree-view:not(.ha-m-full-width)
  .pf-c-data-list__cell
  + .pf-c-data-list__cell {
  margin-left: 0;
}
.ha-c-tree-view:not(.ha-m-full-width) .pf-c-data-list__cell:last-child {
  padding-top: 0;
  padding-bottom: var(--pf-global--spacer--md);
}
/* In the split screen layout, only the status icon is visible. */
.ha-c-tree-view:not(.ha-m-full-width) .ha-c-data-list__item-status {
  flex-basis: 2.5rem;
}
.ha-c-tree-view:not(.ha-m-full-width) .ha-c-data-list__item-status svg + * {
  position: fixed;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
} /* These property styles hide the text description of the status svg icon from the screen, */
/* but keep contents accessible to assistive technology */

/* Composite Status component */
.ha-u-status-danger {
  color: var(--pf-global--danger-color--100);
}
.ha-u-status-warning {
  color: var(--pf-global--warning-color--100);
}
.ha-u-status-success {
  color: var(--pf-global--success-color--100);
}
.ha-u-status-unknown {
  color: var(--pf-global--icon--Color--light);
}

/* Attributes form - radio button spacing */
.ha-c-radio {
  align-items: flex-start;
}
.ha-c-radio .pf-c-radio__input {
  min-height: calc(var(--pf-global--LineHeight--md) * 1rem);
}
.ha-c-radio .pf-c-radio__label {
  line-height: var(--pf-global--LineHeight--md);
}
