/**
* @category navigation
* @component breadcrumbs
*/

@import '../settings/colors';
@import '../settings/core';
@import '../settings/fonts';
@import '../tools/functions/core';
@import '../tools/mixins/core';
@import 'node_modules/@collabui/icons/scss/mixins';
// Breadcrumb Variables
$breadcrumbs-bg: scale-color($secondary-color, $lightness: 55%) !default;
$breadcrumbs-padding: rem-calc(9 14 9) !default;
$breadcrumbs-side-padding: rem-calc(12) !default;
$breadcrumbs-function-factor: -10% !default;
$breadcrumbs-border-size: 1px !default;
$breadcrumbs-border-style: solid !default;
$breadcrumbs-border-color: scale-color(
  $breadcrumbs-bg,
  $lightness: $breadcrumbs-function-factor
) !default;
$breadcrumbs-radius: $global-radius !default;
$breadcrumbs-font-size: rem-calc(11) !default;
$breadcrumbs-font-color: $blue-base !default;
$breadcrumbs-font-color-current: $oil !default;
$breadcrumbs-font-color-unavailable: $aluminum !default;
$breadcrumbs-font-transform: uppercase !default;
$breadcrumbs-link-decor: underline !default;
$breadcrumbs-slash-color: $base !default;
$breadcrumbs-slash: '/' !default;
// Breadcrumb Mixins
@mixin crumb-container {
  display: block;
  padding: $breadcrumbs-padding;
  overflow: hidden;
  list-style: none;
  margin-#{$default-float}: 0;
}

@mixin crumbs {
  float: $default-float;
  margin: 0;
  font-size: $breadcrumbs-font-size;
  line-height: $breadcrumbs-font-size;
  color: $breadcrumbs-font-color;

  &:hover a,
  &:focus a {
    text-decoration: $breadcrumbs-link-decor;
  }

  a {
    color: $breadcrumbs-font-color;
  }

  &.current {
    color: $breadcrumbs-font-color-current;
    cursor: $cursor-default-value;

    a {
      color: $breadcrumbs-font-color-current;
      cursor: $cursor-default-value;
    }

    &:hover,
    &:hover a,
    &:focus,
    &:focus a {
      text-decoration: none;
    }
  }

  &.unavailable {
    color: $breadcrumbs-font-color-unavailable;

    a {
      color: $breadcrumbs-font-color-unavailable;
    }

    &:hover,
    &:hover a,
    &:focus,
    a:focus {
      color: $breadcrumbs-font-color-unavailable;
      text-decoration: none;
      cursor: $cursor-disabled-value;
    }
  }

  &:before {
    position: relative;
    top: 1px;
    margin: 0 $breadcrumbs-side-padding;
    color: $breadcrumbs-slash-color;
    content: '#{$breadcrumbs-slash}';
  }

  &:first-child:before {
    margin: 0;
    content: ' ';
  }
}

@include exports('cui-breadcrumbs') {
  .#{$prefix}-breadcrumbs {
    @include crumb-container;
    @include radius($breadcrumbs-radius);

    > * {
      @include crumbs;
    }

    border: none;

    li {
      font-family: $brand-font-regular;

      &:before {
        @include icon-arrow-right_12;
      }
    }

    & > *:before {
      font-family: $icon-font-name;
    }

    & > * span {
      font-size: rem-calc(12);
    }

    .side-panel & a {
      color: $blue-base;
    }

    & > *.current,
    & > *.current a {
      color: $gray-2;
    }
  }

  [aria-label='breadcrumbs'] [aria-hidden='true']:after {
    content: '/';
  }
}

/**
* @section default
* @category navigation
* @component breadcrumbs
*
* @html
  <ul class="cui-breadcrumbs">
    <li class="current">Home</li>
  </ul>
  <ul class="cui-breadcrumbs">
    <li><a href="javascript:void(0)">Home</a></li>
    <li class="current"><a>Library</a></li>
  </ul>
  <ul class="cui-breadcrumbs">
    <li><a href="javascript:void(0)">Home</a></li>
    <li><a href="javascript:void(0)">Library</a></li>
    <li class="current">Data</li>
  </ul>
*/