/**
 * @provides phui-crumbs-view-css
 */

.phui-crumbs-view {
  overflow: hidden;
  vertical-align: top;
  padding: 0 12px 0 20px;
  /* TODO: Position this over the slider for Differential's file tree view.
     Remove this once that gets sorted out. */
  position: relative;
  -webkit-font-smoothing: antialiased;
  background-color: {$page.background};
}

.printable .phui-crumbs-view {
  display: none;
}

.phui-crumbs-view,
.phui-crumbs-view a.phui-crumb-view,
.phui-crumbs-view a.phui-crumbs-action {
  color: {$darkbluetext};
  font-weight: bold;
  text-decoration: none;
}

.device-tablet .phui-crumbs-view,
.device-phone .phui-crumbs-view,
.project-board-nav .phui-crumbs-view {
  padding-left: 8px;
  padding-right: 8px;
}

.phui-crumbs-view a.phui-crumbs-action-disabled,
.phui-crumbs-view a.phui-crumbs-action-disabled .phui-icon-view {
  color: {$lightgreytext};
}

.phui-crumbs-view + .phui-header-shell {
  border-top: none;
}

.device-desktop .phui-crumbs-view a:hover {
  text-decoration: underline;
}

.phui-crumb-view {
  float: left;
  padding: 8px 0;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-phone .phui-crumb-view.phabricator-last-crumb .phui-crumb-name,
.device-phone .phui-crumb-view.phui-crumb-always-visible .phui-crumb-name,
.device-phone .phui-crumb-view.phui-crumb-always-visible + .phui-crumb-divider,
.device-phone .phui-crumb-view.phui-crumb-has-icon,
.device-phone .phui-crumb-has-icon + .phui-crumb-divider {
  display: inline-block;
}

.device-phone .phui-crumb-name,
.device-phone .phui-crumb-divider {
  display: none;
}

.phui-crumb-has-icon .phui-icon-view {
  margin: 0 4px;
}

.device-phone .phui-crumb-icon {
  margin-left: 7px;
}

.phui-crumbs-actions {
  float: right;
  white-space: nowrap;
}

.phui-crumbs-action {
  display: inline-block;
  height: 17px;
  padding: 8px 12px;
  position: relative;
}

.device-phone a.phui-crumbs-action {
  padding: 8px 6px;
}

.device-desktop .phui-crumbs-view a:hover,
.device-desktop .phui-crumbs-view a:hover .phui-icon-view {
  color: {$blue};
  text-decoration: none;
}

.device-phone .phui-crumbs-action-name {
  display: none;
}

a.phui-crumbs-action .phui-icon-view {
  color: {$darkbluetext};
}

a.phui-crumbs-action .phui-crumbs-action-name {
  margin-left: 6px;
}

.device-phone a.phui-crumbs-action .phui-icon-view {
  margin-left: 4px;
}

.phui-crumb-divider {
  margin: 2px 8px;
}

.phui-crumbs-view.phui-crumbs-border {
  border-bottom: 1px solid rgba({$alphagrey},.1);
}

body .phui-crumbs-view + .phui-object-box {
  margin-top: 0;
}

body .phui-crumbs-view + .phui-oi-list-view {
  padding-top: 0;
}

.phui-crumb-action-divider {
  border-left: 1px solid {$lightgreyborder};
}

.phui-crumbs-action-icon + .phui-crumbs-action-icon {
  padding-left: 4px;
}