.page-crumbs {
  display:flex;
  align-items:center;
  margin-top:20px;
  margin-bottom:40px
}
.page-crumbs__content {
  flex:1 1 auto
}
.page-crumbs__crumbs {
  display:flex;
  align-items:center
}
.page-crumbs__md {
  display:none
}
.page-crumbs__crumb-wrap .svg-icon {
  flex:0 0 auto;
  font-size:0;
  color:rgba(var(--color-font-rgb),.4)
}
.page-crumbs__crumb-wrap:not(:last-child) {
  margin-right:10px
}
.page-crumbs__crumb-wrap:not(:last-child) .svg-icon {
  margin-left:10px;
  font-size:10px
}
.page-crumbs__back {
  display:inline-flex;
  flex:0 0 auto;
  justify-content:center;
  align-items:center;
  min-width:30px;
  min-height:30px;
  margin-right:10px;
  font-size:0;
  background:var(--color-block-background);
  border-radius:var(--border-radius-hd);
  cursor:pointer;
  transition:background .25s ease-in-out
}
.page-crumbs__back .svg-icon {
  font-size:12px
}
.page-crumbs__back:hover {
  background:var(--color-block-background-hover)
}
.page-crumbs__crumb {
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 15px;
  line-height:1;
  color:var(--color-font-60);
  background:var(--color-block-background);
  border-radius:var(--border-radius-hd);
  transition:color .25s ease-in-out
}
.page-crumbs__crumb:hover {
  color:var(--color-font)
}
.page-crumbs__crumb._disabled {
  pointer-events:none
}
.page-crumbs._skeleton .page-crumbs__crumb span {
  display:inline-block;
  min-width:40px;
  color:transparent
}
@media only screen and (max-width:1440px) {
  .page-crumbs {
    margin-bottom:30px
  }
  .page-crumbs__crumb-wrap:not(:last-child) {
    margin-right:5px
  }
  .page-crumbs__crumb-wrap:not(:last-child) .svg-icon {
    margin-left:5px;
    font-size:6px
  }
  .page-crumbs__crumb {
    min-height:20px;
    padding:3px 10px;
    font-size:12px
  }
  .page-crumbs__back {
    min-width:20px;
    min-height:20px;
    margin-right:5px
  }
  .page-crumbs__back .svg-icon {
    font-size:8px
  }
}
@media only screen and (max-width:768px) {
  .page-crumbs {
    display:block;
    margin-top:10px;
    margin-bottom:25px
  }
  .page-crumbs__md {
    display:flex;
    flex:0 0 calc(100% + 50px);
    flex:0 0 auto;
    align-items:center;
    margin-left:-25px;
    margin-right:-25px;
    padding:20px 25px;
    background:var(--color-background);
    order:1;
    cursor:pointer
  }
  .page-crumbs__md:hover .page-crumbs__md-label {
    color:var(--color-font)
  }
  .page-crumbs__content {
    display:none
  }
  .page-crumbs__md-label {
    display:block;
    flex:1 1 auto;
    transition:color .25s ease-in-out
  }
}
