/**
 * Import Compass
 */

@import "_variables";

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.t-Breadcrumb-item {
  &:after {
    color: fadeout(@g_Body-Text, 25%);
  }

  &,
  a {
    color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG,  65%), 100%), desaturate(lighten(@g_Body-BG,  65%), 50%)), 100%)
  }

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

.t-Body-title-shrink .t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item.is-active,
.t-Body-title-shrink .t-BreadcrumbRegion--useRegionTitle .t-BreadcrumbRegion-titleText {
  color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG,  85%), 100%), desaturate(lighten(@g_Body-BG,  85%), 50%)), 100%)
}

@media only screen and (max-width: 640px) {
  .t-BreadcrumbRegion--useRegionTitle .t-BreadcrumbRegion-titleText {
    color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG,  85%), 100%), desaturate(lighten(@g_Body-BG,  85%), 50%)), 100%)
  }
}

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

.t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item.is-active,
.t-BreadcrumbRegion-titleText {
  color: @g_Body-Title-FG;
}


// Breadcrumn within Title Bar
/* Hero Region in Title Bar
   ========================================================================== */
.t-Body-title {
    .t-Breadcrumb-item:after {
      color: fadeout(@g_Body-Title-FG, 25%);
    }

  .t-Breadcrumb-item,
  .t-Breadcrumb-item a,
  .t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item.is-active,
  .t-BreadcrumbRegion-titleText {
    color: @g_Body-Title-FG;
  }
}