@use '../../../../../styles/typography';

:host {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;

  .scroll-button {
    height: 100%;
    background-color: var(--septenary-contrast);
    border: none;
    cursor: pointer;
    color: var(--tertiary-contrast);

    &.hidden {
      visibility: hidden;
    }

    mat-icon {
      font-size: 16px;
      width: 16px;
      height: 16px;
    }
  }

  .breadcrumbs {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: inline-block;
    height: 100%;
    scroll-behavior: smooth;
    scrollbar-width: none;
    flex: 1;

    &::-webkit-scrollbar {
      display: none;
    }

    .breadcrumb {
      @extend %monospaced;
      background-color: transparent;
      color: var(--color-tree-node-element-name);
      padding-inline: 0.5rem;
      border: none;
      height: 100%;
      cursor: pointer;

      &:hover {
        background-color: var(--color-tree-node-hovered);
      }

      &.selected {
        background-color: var(--color-tree-node-highlighted);
      }
    }
  }
}
