.pathbar {
  display: flex;
  flex-direction: row;
  align-items: center;

  padding: 10px;

  border-bottom: 1px solid var(--border-primary-color);

  .navigation {
    .nav-icon {
      cursor: pointer;
      margin-right: 5px;
    }
  }

  .bar {
    cursor: pointer;

    position: relative;

    display: flex;
    flex: 1;
    flex-direction: row;

    height: 26px;
    margin-right: 5px;
    padding: 3px 5px;

    border: 1px solid var(--border-primary-color);

    .path-input {
      width: 100%;
      margin: 0;
      padding: 0;

      border: 0;
      outline: none;
    }

    .bar-entries {
      display: flex;
      flex-direction: row;
    }

    .bar-title {
      cursor: pointer;
      user-select: none;
    }

    .refresh-icon {
      cursor: pointer;

      position: absolute;
      z-index: 1;
      top: 3px;
      right: 3px;
    }
  }

  .search {
    .search-input-wrapper {
      position: relative;

      .search-input {
        height: 26px;
        padding: 5px 20px 5px 3px;

        border: 1px solid var(--border-primary-color);
        outline: none;
        box-shadow: none;
      }

      .search-icon {
        position: absolute;
        top: 3px;
        right: 3px;
      }
    }
  }
}

::ng-deep {
  .pathbar {
    app-cmf-icon svg {
      vertical-align: bottom;
    }
  }
}