.nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--navPaddingTopBottom) var(--navPaddingLeftRight);
  border-bottom: var(--navBorderWidth) solid var(--navBorderColor);
  background-color: var(--navBackgroundColor);
  position: sticky;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 4444;
}

.crumbs {
  flex: 1;
}

/* The normalize.css reset sets -webkit-appearance to button here:
 * https://github.com/necolas/normalize.css/blob/4.2.0/normalize.css#L302-L307.
 * This causes non-actionable breadcrumbs to appear as buttons, because the
 * instui Link component adds type="button" to everything that doesn't have an
 * href.
 *
 * TODO: remove when https://instructure.atlassian.net/browse/INSTUI-1554 lands
 */
.crumbs [type="button"] {
  /* stylelint-disable property-no-vendor-prefix */
  -webkit-appearance: none;
  /* stylelint-enable property-no-vendor-prefix */
}
