/**
 * Import Compass
 */

@import "_variables";

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.t-Breadcrumb-item {
  color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG,  65%), 100%), desaturate(lighten(@g_Body-BG,  65%), 50%)), 100%);

  &:after {
    color: #808080;
    content: '>';
  }

  a:hover,
  a:focus {
    color: @g_Link-Base;
    text-decoration: underline;
    outline: none;
  }
}

.t-Icon {
  &:hover {
    // color: @g_Accent-BG;
  }
}

.t-Body-title-shrink .t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item.is-active,
.t-Body-title-shrink .t-BreadcrumbRegion--useRegionTitle .t-BreadcrumbRegion-titleText {
  color: #333;
}

@media only screen and (max-width: 640px) {
  .t-BreadcrumbRegion--useRegionTitle .t-BreadcrumbRegion-titleText {
    color: #333;
  }
}

.t-Breadcrumb-item .t-Icon {
  &:hover {
    color: @g_Accent-BG;
  }
}

.t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item.is-active,
.t-BreadcrumbRegion-titleText {
  color: #333;
  font-weight: bold;
}