.kt-ui-breadcrumbs {
  width: 100%;
  overflow: hidden;
}

.kt-ui-breadcrumbs-inner {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.kt-ui-breadcrumbs.--hidden .kt-ui-breadcrumbs-inner {
  visibility: hidden;
}

.kt-ui-breadcrumbs-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  max-width: var(--kt-ui-breadcrumb-max-width);
}

.kt-ui-breadcrumbs-item.--hidden {
  display: none;
}

.kt-ui-breadcrumbs-item + .kt-ui-breadcrumbs-item {
  margin-left: 4px;
}

.kt-ui-breadcrumbs-item:not(:last-child) {
  padding-right: 16px;
}

.kt-ui-breadcrumbs-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: var(--kt-ui-breadcrumb-arrow-size);
  height: var(--kt-ui-breadcrumb-arrow-size);
  flex-shrink: 0;
  -webkit-mask: var(--kt-ui-breadcrumb-arrow-icon) no-repeat 50% 50%;
          mask: var(--kt-ui-breadcrumb-arrow-icon) no-repeat 50% 50%;
  -webkit-mask-size: var(--kt-ui-breadcrumb-arrow-icon-size);
          mask-size: var(--kt-ui-breadcrumb-arrow-icon-size);
  background-color: var(--kt-ui-breadcrumb-arrow-icon-color);
}

.kt-ui-breadcrumbs-item-text {
  box-sizing: border-box;
  padding-block: var(--kt-ui-breadcrumb-padding-block);
  padding-inline: var(--kt-ui-breadcrumb-padding-inline);
  border: var(--kt-ui-breadcrumb-border-width) solid var(--kt-ui-breadcrumb-border-color);
  border-radius: var(--kt-ui-breadcrumb-border-radius);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  overflow: hidden;
  color: var(--kt-ui-breadcrumb-color);
  background-color: var(--kt-ui-breadcrumb-background);
  transition: color 160ms linear;
}

.kt-ui-breadcrumbs-item-link a.kt-ui-breadcrumbs-item-text:hover,
.kt-ui-breadcrumbs-item-link a.kt-ui-breadcrumbs-item-text.--hover,
.kt-ui-breadcrumbs-btn:hover .kt-ui-breadcrumbs-item-text,
.kt-ui-breadcrumbs-btn.--hover .kt-ui-breadcrumbs-item-text {
  color: var(--kt-ui-breadcrumb-color-hover);
}

.kt-ui-breadcrumbs-item-link a.kt-ui-breadcrumbs-item-text:active,
.kt-ui-breadcrumbs-item-link a.kt-ui-breadcrumbs-item-text.--active,
.kt-ui-breadcrumbs-btn:active .kt-ui-breadcrumbs-item-text,
.kt-ui-breadcrumbs-btn.--active .kt-ui-breadcrumbs-item-text {
  color: var(--kt-ui-breadcrumb-color-active);
}

.kt-ui-breadcrumbs-item-link a.kt-ui-breadcrumbs-item-text:focus,
.kt-ui-breadcrumbs-btn:focus {
  outline: none;
}

.kt-ui-breadcrumbs-item-link a.kt-ui-breadcrumbs-item-text:focus-visible,
.kt-ui-breadcrumbs-item-link a.kt-ui-breadcrumbs-item-text.--focus,
.kt-ui-breadcrumbs-btn:focus-visible .kt-ui-breadcrumbs-item-text,
.kt-ui-breadcrumbs-btn.--focus .kt-ui-breadcrumbs-item-text {
  border-color: var(--kt-ui-breadcrumb-focus-color);
}

.kt-ui-breadcrumbs-btn {
  padding: 0;
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
}

.kt-ui-breadcrumbs-btn-content,
.kt-ui-breadcrumbs-btn .kt-ui-breadcrumbs-item-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kt-ui-breadcrumbs-item-link span.kt-ui-breadcrumbs-item-text {
  color: var(--kt-ui-breadcrumb-color-disabled);
  background-color: var(--kt-ui-breadcrumb-background-disabled);
  cursor: default;
}