/**
 * Easy Table of Contents 拡張スタイル定義
 */

#ez-toc-container {
  background-color: var(--color-background-subtler, #f4f4f4);
  border: none;
  margin-block: var(--spacing-lg);
}

.ez-toc-title-container {
  position: relative;
}

.ez-toc-title {
  color: var(--color-text-default, #222222);
  font-size: var(--font-size-40, 1.25rem);
  font-weight: var(--font-weight-bold, 600);
  letter-spacing: var(--letter-spacing-40, 0.03em);
  line-height: var(--line-height-40, 1.6);
  margin: 0;
  padding-block: var(--spacing-md, 1rem);
  padding-inline: var(--spacing-xl, 2rem);

  @media (max-width: 576px) {
    font-size: var(--font-size-30, 1rem);
    line-height: var(--line-height-30, 1.75);
    padding-block: var(--spacing-sm, 0.75rem);
    padding-inline: var(--spacing-md, 1rem);
  }
}

.ez-toc-title-toggle {
  display: none;
}

.ez-toc-title::after {
  content: "";
  background-color: var(--color-text-default, #222222);
  height: 30px;
  mask: url("../../assets/images/icons/angle-up.svg") no-repeat center center;
  mask-size: cover;
  position: absolute;
  right: var(--spacing-xl, 2rem);
  top: var(--spacing-md, 1rem);
  width: 30px;

  @media (max-width: 576px) {
    height: 28px;
    right: var(--spacing-md, 1rem);
    top: var(--spacing-sm, 0.75rem);
    width: 28px;
  }
}

#ez-toc-container.toc_close .ez-toc-title::after {
  mask: url("../../assets/images/icons/angle-down.svg") no-repeat center center;
}

#ez-toc-container > nav {
  padding-inline: var(--spacing-xl, 2rem);

  @media (max-width: 576px) {
    padding-inline: var(--spacing-md, 1rem);
  }
}

.ez-toc-list {
  border-top-color: var(--color-border-default, #9e9e9e);
  border-top-style: solid;
  border-top-width: var(--border-width-md, 1px);
}

.ez-toc-link {
  color: var(--color-text-link, #0171c1);
  text-decoration: none;
}

.ez-toc-link:hover {
  text-decoration: underline;
}

.ez-toc-list-level-1 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 0.5rem);
  list-style: none;
  margin: 0;
  padding-block: var(--spacing-md, 1rem);
  padding-inline: 0;

  @media (max-width: 576px) {
    gap: var(--spacing-xs);
    padding-block: var(--spacing-sm, 0.75rem);
  }
}

.ez-toc-heading-level-2 {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-30, 1rem);
  letter-spacing: var(--letter-spacing-30, 0.03em);
  line-height: var(--line-height-30, 1.75);

  @media (max-width: 576px) {
    font-size: var(--font-size-20);
  }
}

.ez-toc-heading-level-2::before {
  color: var(--color-text-link, #0171c1);
  content: "\f0d7";
  font-family: var(--fa-style-family-classic), sans-serif;
  font-size: var(--font-size-20, 0.875rem);
  font-weight: 900;
  line-height: var(--line-height-30, 1.75);
  margin-inline-end: var(--spacing-xs, 8px);
}

.ez-toc-heading-level-2 > .ez-toc-link {
  flex: 1;
  font-weight: var(--font-weight-bold, 600);
}

.ez-toc-list-level-3 {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-20, 0.875rem);
  font-weight: var(--font-weight-normal, 300);
  gap: var(--spacing-xxxs, 0.125rem);
  letter-spacing: var(--letter-spacing-20, 0.03em);
  line-height: var(--line-height-20, 1.71);
  list-style: none;
  margin-block-start: var(--spacing-xxs, 0.25rem);
  padding-inline-start: var(--spacing-xl, 2rem);
  width: 100%;

  @media (max-width: 576px) {
    font-size: var(--font-size-10);
    gap: var(--spacing-xxs, 0.25rem);
  }
}