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

@include b(breadcrumb) {
  font-size: 14px;
  line-height: 1;
  @include utils-clearfix;

  @include e(item) {
    float: left;
    display: flex;
    align-items: center;
    color: var(--sg-text-color-secondary);

    @include e(inner) {
      display: flex;
      align-items: center;
      cursor: pointer;

      a {
        color: inherit;
      }

      &:hover {
        color: var(--sg-color-primary);
      }
    }

    @include e(separator) {
      margin: 0 8px;

      &.#{$namespace}-icon {
        svg {
          vertical-align: middle;
        }
      }
    }

    &:last-child {
      color: var(--sg-text-color-primary);

      .#{$namespace}-breadcrumb__inner {
        cursor: text;

        &:hover {
          color: var(--sg-text-color-regular);
        }
      }

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