//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/vars';
@import '../../globals/scss/css--reset';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../../globals/scss/layout';
@import '../link/link';

/// Breadcrumb styles
/// @access private
/// @group breadcrumb
@mixin breadcrumb {
  .#{$prefix}--breadcrumb {
    @include reset;
    @include type-style('body-short-01');

    display: inline;

    @include carbon--breakpoint(md) {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .#{$prefix}--breadcrumb-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: $carbon--spacing-03;
  }

  .#{$prefix}--breadcrumb-item .#{$prefix}--link:visited {
    color: $link-01;

    &:hover {
      color: $hover-primary-text;
    }
  }

  .#{$prefix}--breadcrumb-item::after {
    margin-left: $carbon--spacing-03;
    color: $text-01;
    content: '/';
  }

  .#{$prefix}--breadcrumb--no-trailing-slash
    .#{$prefix}--breadcrumb-item:last-child::after {
    content: '';
  }

  .#{$prefix}--breadcrumb-item:last-child,
  .#{$prefix}--breadcrumb-item:last-child::after {
    margin-right: 0;
  }

  .#{$prefix}--breadcrumb .#{$prefix}--link {
    white-space: nowrap;
  }

  .#{$prefix}--breadcrumb-item [aria-current='page'],
  .#{$prefix}--breadcrumb-item.#{$prefix}--breadcrumb-item--current
    .#{$prefix}--link {
    color: $text-01;
    cursor: auto;

    &:hover {
      text-decoration: none;
    }
  }

  // Overflow Menu overrides
  .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu {
    position: relative;
    width: rem(20px);
    height: rem(18px);

    &:focus {
      outline: 1px solid $focus;
    }

    &:hover {
      background: transparent;
    }

    // Used to mimic link underline
    &::after {
      position: absolute;
      bottom: 2px;
      width: rem(12px);
      height: 1px;
      background: $hover-primary-text;
      content: '';
      opacity: 0;
      transition: opacity $duration--fast-01 motion(standard, productive);

      @media screen and (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }
  }

  .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu:hover::after {
    opacity: 1;
  }

  .#{$prefix}--breadcrumb-item
    .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open {
    background: transparent;
    box-shadow: none;
  }

  .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu__icon {
    position: relative;
    fill: $link-01;
    transform: translateY(4px);
  }

  .#{$prefix}--breadcrumb-item
    .#{$prefix}--overflow-menu:hover
    .#{$prefix}--overflow-menu__icon {
    fill: $hover-primary-text;
  }

  .#{$prefix}--breadcrumb-menu-options:focus {
    outline: none;
  }

  $caret-size: rem(7px);
  .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
    top: -$caret-size;
    left: $caret-size * 2;
    width: 0;
    height: 0;
    border-right: $caret-size solid transparent;
    border-bottom: $caret-size solid $field-01;
    border-left: $caret-size solid transparent;
    margin: 0 auto;
    background: transparent;
  }

  // Skeleton State
  .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
    @include skeleton;

    width: rem(100px);
    height: 1rem;
  }
}

@include exports('breadcrumb') {
  @include breadcrumb;
}