@use "sass:map";
@use "global/acms-common" as acms;
@use "global/common" as global;

/* ------------------------------
　　トピックパス
------------------------------ */
.topicpath {
  position: relative;
  padding: 0.5rem 0;
  overflow: hidden;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: inline-block;
    width: 5rem;
    content: '';
    background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, #FFF 100%);
  }
}

.topicpath-list {
  padding: 0;
  margin: 0;
  overflow-x: auto;
  white-space: nowrap;
  list-style: none;
}

.topicpath-item {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  font-size: map.get(global.$font-scales, body-s);
  line-height: var(--line-height-none);
  color: var(--color-text);
}

.topicpath-item:not(:last-child) {
  &::after {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 0.5rem;
    content: '';
    background: url("#{global.$root-theme-img}icon-color/topicpath-gray.svg") center center no-repeat;
    background-size: contain;
  }
}

.topicpath-link {
  color: inherit;
  text-decoration: none;

  @media (hover: hover) {
    &:any-link:hover {
      text-decoration: underline dotted 1px;
      text-underline-offset: 3px;
    }
  }
}
