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

/* ------------------------------
　　ローカルナビゲーション
------------------------------ */
.local-nav-wrap {
  position: relative;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 1rem;
    background: linear-gradient(90deg, rgb(255 255 255 / 0%), global.$color-white);
    content: "";
  }

  .page-title-wrapper + & {
    margin-top: -(global.$page-title-margin-bottom);
  }
}

.local-nav-inner {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  white-space: nowrap;
}

.local-nav {
  padding: 1rem 0;
  font-weight: bold;
  font-size: map.get(global.$font-scales, body-s);
}

.local-nav-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.local-nav-item {
  padding: 0 1.25rem 0 0;
}

.local-nav-link {
  display: flex;
  align-items: center;
  color: global.$color-text;

  svg {
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    margin: 0 0.5rem 0 0;
    padding: 0.25rem;
    background-color: global.$color-secondary;
    border-radius: global.$border-radius-circle;
  }

  &:hover svg {
    background-color: transparent;
    border: global.$border-width-sm solid global.$color-secondary;

    path {
      stroke: global.$color-secondary;
    }
  }

  &:hover,
  &:visited,
  &:active {
    color: global.$color-text;
    text-decoration: none;
  }
}

@media screen and (min-width: acms.$breakpoint-md-min) {
  .local-nav-wrap {
    .page-title-wrapper + & {
      margin-top: -(global.$page-title-margin-bottom-md);
    }
  }

  .local-nav {
    padding: 1.25rem 0;
    font-size: map.get(global.$font-scales, body-m);
  }

  .local-nav-link {
    svg {
      width: 1.25rem;
      height: 1.25rem;
      margin: 0 1rem 0 0;
    }
  }
}
