@import "../../styles/index.scss";

.ia-styles.ia-breadcrumb {
  font-family: $fontFamily;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.1px;
  letter-spacing: -0.01em;
  text-align: left;
  color: $primaryColor; //#60697d
  cursor: pointer;
  &:not(.ia-breadcrumb-home) {
    border-radius: 4px;
    @include focus-visible-ring;
    @include focus-visible-disabled;
  }
  &.ia-breadcrumb-disabled {
    color: $textButtonFontColor;
  }

  &.ia-breadcrumb-home {
    svg {
      display: flex;
      path {
        height: 11.67px;
        width: 10.67px;
      }
    }
  }

  &.ia-breadcrumb-extras {
    margin-left: 5px;
    margin-right: -1px;
  }

  &:hover:not(.ia-breadcrumb-noLink):not(.ia-breadcrumb-disabled) {
    color: $primaryColor;
    path {
      fill: $primaryColor;
    }
  }

  &.ia-breadcrumb-noLink {
    font-weight: 800;
    color: #1f2b4d;
    cursor: default;
  }
}

.MuiBreadcrumbs-root {
  .MuiBreadcrumbs-separator {
    margin-left: 0px;
    margin-right: 0px;
    font-size: $largeFontSize;
    margin-top: 3px;
  }
  .MuiBreadcrumbs-li:has(> * > .ia-breadcrumb-extras) {
    height: 24px;
    div {
      display: flex;
      align-items: center;
    }
  }
}
.ia-breadcrumb-extras {
  svg {
    fill: $breadCrumbsDot !important;
    margin-top: 1px;
  }
}
