@import '../../themes/default/collections/breadcrumb.variables';

@if $use-breadcrumb {
  /*******************************
  //@-       Breadcrumb
  *******************************/

  .ui.breadcrumb {
    line-height: $line-height;
    display: $breadcrumb-display;
    margin: $breadcrumb-vertical-margin 0;
    vertical-align: $breadcrumb-vertical-align;
  }
  .ui.breadcrumb:first-child {
    margin-top: 0;
  }
  .ui.breadcrumb:last-child {
    margin-bottom: 0;
  }

  /*******************************
            Content
  *******************************/

  /* Divider */
  .ui.breadcrumb .divider {
    display: inline-block;
    opacity: $breadcrumb-divider-opacity;
    margin: 0 $breadcrumb-divider-spacing 0;

    font-size: $breadcrumb-divider-size;
    color: $breadcrumb-divider-color;
    vertical-align: $breadcrumb-divider-vertical-align;
  }

  /* Link */
  .ui.breadcrumb a {
    color: $link-color;
  }
  .ui.breadcrumb a:hover {
    color: $link-hover-color;
  }


  /* Icon Divider */
  .ui.breadcrumb .icon.divider {
    font-size: $breadcrumb-icon-divider-size;
    vertical-align: $breadcrumb-icon-divider-vertical-align;
  }

  /* Section */
  .ui.breadcrumb a.section {
    cursor: pointer;
  }
  .ui.breadcrumb .section {
    display: inline-block;
    margin: $breadcrumb-section-margin;
    padding: $breadcrumb-section-padding;
  }

  /* Loose Coupling */
  .ui.breadcrumb.segment {
    display: inline-block;
    padding: $breadcrumb-segment-padding;
  }

  @if ($use-breadcrumb-variation-inverted) {
    /* Inverted */
    .ui.inverted.breadcrumb {
      color: $breadcrumb-inverted-color;
    }
    .ui.inverted.breadcrumb > .active.section {
      color: $breadcrumb-inverted-active-color;
    }
    .ui.inverted.breadcrumb > .divider {
      color: $breadcrumb-inverted-divider-color;
    }
  }

  /*******************************
              States
  *******************************/

  .ui.breadcrumb .active.section {
    font-weight: $breadcrumb-active-font-weight;
  }


  /*******************************
            Variations
  *******************************/

  .ui.mini.breadcrumb {
    font-size: $mini;
  }
  .ui.tiny.breadcrumb {
    font-size: $tiny;
  }
  .ui.small.breadcrumb {
    font-size: $small;
  }
  .ui.breadcrumb {
    font-size: $medium;
  }
  .ui.large.breadcrumb {
    font-size: $large;
  }
  .ui.big.breadcrumb {
    font-size: $big;
  }
  .ui.huge.breadcrumb {
    font-size: $huge;
  }
  .ui.massive.breadcrumb {
    font-size: $massive;
  }
}

@import '../../themes/default/collections/breadcrumb.style';