@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'common/var' as *;

$material-icons-font-family: 'Material Symbols Outlined';

@include b(breadcrumb) {
  font-size: 12px;
  line-height: 1;
  color: getCssVar('color-neutral-light-5');
  @include utils-clearfix;

  @include e(separator) {
    margin: 0 4px;
    color: getCssVar('color-neutral-light-5');
    line-height: 10px;

    &::before {
      font-family: $material-icons-font-family !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-style: normal;
      font-variant: normal;
      font-weight: 600;
      line-height: 1;
      speak: never;
      text-transform: none;
      content: 'arrow_forward_ios';
    }

    &.#{$namespace}-icon {
      margin: 0 6px;
      font-weight: normal;
      svg {
        vertical-align: middle;
      }
    }
  }

  @include e(item) {
    float: left;
    display: inline-flex;
    align-items: center;

    @include e(inner) {
      color: getCssVar('text-color', 'regular');

      &.is-link,
      & a {
        text-decoration: none;
        transition: getCssVar('transition', 'color');
        color: getCssVar('color-neutral-light-5');

        &:hover {
          color: getCssVar('color-primary');
          cursor: pointer;
        }
      }
    }

    &:last-child {
      .#{$namespace}-breadcrumb__inner,
      .#{$namespace}-breadcrumb__inner a {
        &,
        &:hover {
          font-weight: normal;
          color: getCssVar('text-color', 'regular');
          cursor: text;
        }
      }

      .#{$namespace}-breadcrumb__separator {
        display: none;
      }
    }
  }
}