import { css } from 'lit';
export default css `
  :host {
    display: block;

    /* background-color: var(--md-sys-color-surface); */

    --active-indicator-color: var(--md-sys-color-secondary-container);
    --active-destination-color: var(--md-sys-color-on-secondary-container);
  }

  :host([noVisualSelection]) {
    --active-indicator-color: transparent;
    --active-destination-color: var(--md-sys-color-on-surface-variant);
  }

  .headline {
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--md-sys-typescale-title-small-font);
    font-weight: var(--md-sys-typescale-title-small-weight);
    font-size: var(--md-sys-typescale-title-small-size);
    letter-spacing: var(--md-sys-typescale-title-small-tracking);
    line-height: var(--md-sys-typescale-title-small-height);

    height: 48px;
    display: flex;
    align-items: center;
  }

  .label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .label.active {
    color: var(--md-sys-color-on-secondary-container);
  }

  ul {
    margin: 0;
    list-style-image: none;
    padding: 0 0 0 12px;
  }

  li {
    outline: none;
    list-style: none;
    padding: 0px 0px 0px 24px;
    position: relative;
  }

  .list-item-content {
    min-height: 56px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 24px 16px 16px;
    border-radius: var(--md-sys-shape-corner-extra-large);
    position: relative;
    /* To properly render outline on focus */
    margin-bottom: 1px;

    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--md-sys-typescale-body-large-font);
    font-weight: var(--md-sys-typescale-body-large-weight);
    font-size: var(--md-sys-typescale-body-large-size);
    letter-spacing: var(--md-sys-typescale-body-large-tracking);
    line-height: var(--md-sys-typescale-body-large-height);
  }

  /* .list-item-content:hover::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--md-sys-color-on-surface);
    opacity: var(--md-sys-state-hover-state-layer-opacity);
  } */

  li:focus > .list-item-content::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--md-sys-color-on-surface);
    opacity: var(--md-sys-state-focus-state-layer-opacity);
  }

  li:focus > .list-item-content {
    outline: 2px #000 solid;
  }

  li.selected > .list-item-content {
    background-color: var(--active-indicator-color);
    color: var(--active-destination-color);
  }

  li.drop-target > .list-item-content {
    outline: medium var(--md-sys-color-primary) dashed;
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    outline-offset: 2px;
  }

  .group-toggle-icon,
  .object-icon {
    margin-right: 16px;
    min-width: 24px;
  }

  .object-icon {
    min-width: 20px;
    width: 20px;
    height: 20px;
    fill: var(--md-sys-color-on-surface-variant);
  }

  li.selected > .list-item-content > .object-icon {
    fill: var(--active-destination-color);
  }

  .opened > div > .group-toggle-icon {
    transform: rotate(90deg);
  }

  ul.root {
    padding: 0;
  }

  ul.root > li {
    padding: 0;
  }

  *[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.36;
  }

  .name-change-item {
    padding: 0;
  }

  .name-change {
    height: 56px;
    display: flex;
    align-items: center;
    border-top: 1px rgba(0, 0, 0, var(--dark-divider-opacity)) solid;
    border-bottom: 1px rgba(0, 0, 0, var(--dark-divider-opacity)) solid;
    background-color: var(--md-ref-palette-neutral95);
    color: var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-corner-small);
  }

  .name-change input {
    flex: 1;
    height: 100%;
    margin: 0;
    padding: 0 8px;
    border: 0;
    background-color: transparent;
    outline: none;
  }

  .list-item-content.empty {
    margin: 0 0 0 28px;
    opacity: 0.38;
  }

  .name-commit-button {
    min-width: 40px;
  }

  .navigation-title {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 16px 24px 16px 16px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--md-sys-typescale-body-large-font);
    font-weight: var(--md-sys-typescale-body-large-weight);
    font-size: var(--md-sys-typescale-body-large-size);
    letter-spacing: var(--md-sys-typescale-body-large-tracking);
    line-height: var(--md-sys-typescale-body-large-height);
  }

  .drag-image {
    position: absolute;
    left: -9999px;
    top: -9999px;
    padding: 0 !important;
  }
`;
//# sourceMappingURL=AppNavigation.styles.js.map