@import '../../../style/mixins/index';

@breadcrumb-prefix-cls: ~'@{vts-prefix}-breadcrumb';

.@{breadcrumb-prefix-cls} {
  .reset-component();

  display: flex;
  align-items: center;
  font-size: @breadcrumb-font-size;

  & > span:last-child &-separator {
    display: none;
  }

  @{breadcrumb-prefix-cls}-item:last-child .@{breadcrumb-prefix-cls}-separator {
    display: none;
  }

  &-separator {
    margin: 0 @breadcrumb-separator-margin;
    color: @breadcrumb-separator-color;
  }

  &-item { 
    display: inline-flex;
    align-items: center;
  }

  &-link,
  &-overlay-link {
    display: inline-flex;
    align-items: center;
    transition: color 0.3s;

    > a {
      color: @breadcrumb-base-color;

      &:hover {
        text-decoration: underline;
      }
      
      &:active {
        text-shadow: 1px 0 0 @breadcrumb-link-color-active;
        color: @breadcrumb-link-color-active;
        text-decoration: unset;
      }

    }
    
    i {
      font-size: @breadcrumb-icon-font-size;
    }

    i + span {
      margin-left: 4px;
    }
  }

  &-overlay-link {
    color: @breadcrumb-base-color;

    > i {
      color: inherit;
    }
  }

  &-overlay-link > &-link {
    color: inherit;
    cursor: pointer;
  }
  
  &-disabled {
    pointer-events: none;
    cursor: default;
    color: @breadcrumb-item-disabled;
  }
}

@import './rtl';