@import "~@alifd/next/lib/core/style/_global";
@import "~@alifd/next/lib/core/style/_motion";
@import "~@alifd/next/lib/breadcrumb/scss/variable";
@import "~@alifd/next/lib/breadcrumb/scss/mixin";

$b-design-breadcrumb-overlay-icon-size:$s-4;

@mixin breadcrumb-overlay-state($textColor,
  $ellipsisTextColor,
  $currentTextColor,
  $currentTextWeight,
  $keywordTextColor,
  $iconColor,
  $textColorHover,
  $currentTextColorHover,
  $keywordTextColorHover) {
  .#{$css-prefix}breadcrumb-text {
    color: $textColor;

    >.#{$css-prefix}breadcrumb-overlay {
      color: $textColor;
      text-decoration: none;
      text-align: center;

      .#{$css-prefix}icon::before {
        width: $b-design-breadcrumb-overlay-icon-size;
        font-size: $b-design-breadcrumb-overlay-icon-size;
      }
    }
  }

  .#{$css-prefix}breadcrumb-text.activated {
    color: $currentTextColor;
    font-weight: $currentTextWeight;

    >.#{$css-prefix}breadcrumb-overlay {
      color: $currentTextColor;
      font-weight: $currentTextWeight;
    }
  }

  .#{$css-prefix}breadcrumb-text:not(.#{$css-prefix}breadcrumb-text-ellipsis):hover>.#{$css-prefix}breadcrumb-overlay {
    cursor: pointer;
    color: $textColorHover;
  }

  .#{$css-prefix}breadcrumb-text-overlay.#{$css-prefix}breadcrumb-text.activated:hover>.#{$css-prefix}breadcrumb-overlay {
    color: $currentTextColorHover;
  }

  .#{$css-prefix}breadcrumb-text-overlay.#{$css-prefix}breadcrumb-text:not(.#{$css-prefix}breadcrumb-text-ellipsis):hover {
    color: $textColorHover;

    >b {
      color: $keywordTextColorHover;
    }
  }

  .#{$css-prefix}breadcrumb-text-overlay.#{$css-prefix}breadcrumb-text.activated:hover {
    color: $currentTextColorHover;
    font-weight: $currentTextWeight;
  }
}

.#{$css-prefix} {
  &breadcrumb {
    @include breadcrumb-overlay-state($breadcrumb-text-color,
      $breadcrumb-text-ellipsis-color,
      $breadcrumb-text-current-color,
      $breadcrumb-text-current-weight,
      $breadcrumb-text-keyword-color,
      $breadcrumb-icon-color,
      $breadcrumb-text-color-hover,
      $breadcrumb-text-current-color-hover,
      $breadcrumb-text-keyword-color-hover);
  }
}

.#{$css-prefix}breadcrumb-dropdown-wrapper {
  margin-top: $s-2 !important;
}