/* link */
.right-arrow,
.simple-arrow,
.body-nav,
.blur-nav,
.btn-filled-arrow-16,
.external,
.download {
  display: block;
  /* grid-template-columns: 1fr auto; */
  /* align-items: center; */
  text-decoration: none;
  color: inherit;
  transition: background-color var(--anime-time) var(--anime-func);

  svg {
    display: inline-block;
    vertical-align: middle;
    transition: transform var(--anime-time) var(--anime-func);
  }

  @media (hover: hover) {
    &:hover {
      text-decoration: underline;

      svg {
        transform: translateX(var(--sp-4));
      }
    }
  }
}

.right-arrow {
  padding-block: var(--sp-20);
  border-block-start: var(--border);
  transition: border-block-color var(--anime-time) var(--anime-func);

  @media (hover: hover) {
    &:hover {
      border-block-color: var(--black-tint-14);
      text-decoration: none;
    }
  }
}

.simple-arrow {
  width: fit-content;

  svg {
    margin-inline-start: var(--sp-4);
  }
}

.body-nav {
  width: fit-content;
  padding: var(--sp-30);
  gap: var(--sp-30);
  background-color: var(--main-tint-30);

  svg {
    margin-inline-start: var(--sp-4);
  }
}

.blur-nav {
  padding: var(--sp-16);
  border-radius: var(--sp-4);
}

.btn-filled-arrow-16,
.external {
  padding: var(--sp-16) var(--sp-20);
  width: fit-content;
  height: fit-content;
  background-color: var(--main-tint-30);
  border-radius: var(--sp-4);

  svg {
    margin-inline-start: var(--sp-8);
  }

  @media (hover: hover) {
    &:hover {
      background-color: var(--main-tint-8);
    }
  }
}

@media (hover: hover) {
  .external:hover svg {
    transform: translateX(var(--sp-1)) translateY(calc(-1 * var(--sp-1))) scale(1.1);
  }
}

.download {
  width: fit-content;
  text-decoration: underline;

  svg {
    margin-inline-start: var(--sp-4);
  }

  @media (hover: hover) {
    &:hover svg {
      transform: translateY(var(--sp-2));
    }
  }
}

/* button */
.prev-btn,
.next-btn {
  border: none;
  padding: var(--sp-12);
  border-radius: 50%;
  background-color: var(--white-shade-8);
  transition: 
    opacity var(--anime-time) var(--anime-func);

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &:active {
    transform: translateX(var(--sp-1)) translateY(var(--sp-1)) scale(0.95);
  }
}

.btn-filled {
  display: block;
  border: none;
  width: fit-content;
  height: fit-content;
  padding: var(--sp-16) var(--sp-20);
  background-color: var(--main-tint-8);
  border-radius: var(--sp-4);
  color: var(--black-tint-14);
  transition: 
    background-color var(--anime-time) var(--anime-func);

  @media (hover: hover) {
    &:hover {
      background-color: var(--main);
    }
  }
}

a.btn-filled {
  text-decoration: none;
}

.popover-close-btn {
  border-radius: 50%;
  padding: var(--sp-12);
  background-color: var(--white-shade-8);
  border: none;
}

.mail-button {
  display: block;
  background-color: var(--main-tint-30);
  text-transform: uppercase;
}

.dialog-close-btn {
  margin-inline-start: auto;
  border: none;
  padding: var(--sp-8);
  background-color: var(--main-tint-8);
  border-radius: var(--sp-4);
}

/* list */
.three-column-list {
  margin-block: var(--sp-60-40);
  container: three-column-list / inline-size;

  >li {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "left left left . center center center center . right right right";
    gap: var(--sp-20);
    padding-block: var(--sp-40);
    border-block-start: var(--border);
    transition: background-color var(--anime-time) var(--anime-func);

    &:last-of-type {
      border-block-end: var(--border);
    }

    img {
      grid-area: left;
      border-radius: var(--sp-8);
    }

    box-wrapper {
      grid-area: center;
      margin-inline: 0;

      h3+p {
        margin-block-start: var(--sp-20);
      }
    }

    a {
      grid-area: right;
      align-self: end;
      margin-inline-start: auto;
    }
    
    a {
      transition: background-color var(--anime-time) var(--anime-func);
    }

    @media (hover: hover) {
      &:hover {
        background-color: var(--main-tint-30);

        a {
          background-color: var(--main-tint-8);
        }
      }
    }

    @container (inline-size < 46.875rem) {
      grid-template-areas: 
        "left left left . center center center center center center center center"
        "right right right right right right right right right right right right";
      
      a {
        margin-inline-start: 0;
      }
    }

    @container (inline-size < 34.375rem) {
      grid-template-areas: 
        "left left left left left left left left left left left left"
        "center center center center center center center center center center center center"
        "right right right right right right right right right right right right";

      @media (hover: hover) {
        &:hover {
          a {
            padding: 0;
            gap: var(--sp-8);
            background-color: none;
          }
        }
      }
    }
  }
}

body:has(info-card:popover-open) {
  overflow: hidden;
  pointer-events: none;

  info-card:popover-open {
    pointer-events: auto;
  }
}

.member-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--sp-20);
  row-gap: var(--sp-40);

  @media only screen and (width < 64rem) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media only screen and (width < 40.625rem) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media only screen and (width < 25rem) {
    grid-template-columns: 1fr;
  }

  a {
    text-decoration: none;
    color: var(--black-tint-14);
  }

  li {
    max-width: var(--sp-330);
    position: relative;
    margin-inline: auto;

    @media only screen and (width < 46.875rem) {
      margin-inline: auto;
    }

    picture+p {
      margin-block-start: var(--sp-20);
      color: var(--black-tint-14);
    }

    picture {
      overflow: clip;
      border-radius: var(--sp-8);
    }

    img {
      width: var(--sp-330);
      height: var(--sp-330);
      object-fit: cover;
      transition: transform var(--anime-time) var(--anime-func);
    }

    >a::after,
    >button::after {
      content: "";
      display: block;
      width: var(--sp-32);
      height: var(--sp-32);
      position: absolute;
      top: var(--sp-12);
      right: var(--sp-12);
    }

    >a::after {
      background: url('/assets/icons/arrow-icon.svg') no-repeat center;
    }

    >button::after {
      background: url('/assets/icons/plus-icon.svg') no-repeat center;
    }

    @media (hover: hover) {
      &:hover {
        >button img,
        >a img {
          transform: scale(1.02);
        }
      }
    }
  }

  info-card {
    grid-template-columns: var(--sp-330) 1fr;
    transform: translate(-50%, -60%);
    max-width: min(var(--sp-913), 95%);
    padding: var(--sp-40-20);
    top: 50%;
    left: 50%;
    border: none;
    opacity: 0;
    border-radius: var(--sp-8);
    column-gap: var(--sp-40);
    z-index: 1;
    width: 100%;
    transition: 
      display var(--anime-time) var(--anime-func) allow-discrete,
      transform var(--anime-time) var(--anime-func),
      opacity var(--anime-time) var(--anime-func);

    >button {
      margin-inline-start: auto;
      position: absolute;
      top: var(--sp-20);
      right: var(--sp-40-20);
    }

    picture {
      img {
        border-radius: var(--sp-8);
      }
    }

    student-info {
      student-description {
        display: block;
        margin-block-start: var(--sp-20);

        p+p {
          margin-block-start: var(--sp-20);
        }
      }
    }

    @media only screen and (width < 46.875rem) {
      grid-template-columns: 1fr;
      padding-inline: var(--sp-20);
      gap: var(--sp-20);

      img {
        margin-inline: auto;
      }

      >button {
        margin-inline-start: auto;
        position: static;
      }
    }
  }

  info-card:popover-open {
    display: grid;
    opacity: 1;
    transform: translate(-50%, -50%);
    max-height: 90dvh;

    &::backdrop {
      background-color: rgba(36, 36, 36, 0.5);
    }

    @starting-style {
      opacity: 0;
      transform: translate(-50%, -60%);
    }
  }
}

/* breadcrumbs */
.breadcrumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-block-start: var(--sp-120-40);
  padding-block: var(--sp-40);
  border-block-start: var(--border);
  view-transition-name: breadcrumbs;

  &:not(+picture) {
    border-block-end: var(--border);
  }

  a {
    text-decoration: none;

    @media (hover: hover) {
      &:hover {
        text-decoration: underline;
      }
    }
  }

  li:has(svg) {
    display: block;
    /* grid-template-columns: 1fr auto; */
    /* gap: var(--sp-8); */
    align-items: center;

    a {
      color: var(--black-tint-35);
    }

    svg {
      display: inline-block;
      vertical-align: middle;
      margin-inline-start: var(--sp-8);
    }
  }

  li:last-of-type {
    a {
      color: var(--black-tint-14);
    }
  }
}

/* icons */

/* detail summary icon */
details[open] {
  detail-summary-icon {
    span:nth-of-type(1) {
      width: 0;
    }
  }
}
detail-summary-icon {
  display: block;
  width: var(--sp-24);
  height: var(--sp-24);
  place-content: center;

  span {
    content: "";
    display: block;
    width: var(--sp-14);
    height: var(--sp-1);
    background-color: var(--black-tint-14);
    margin: auto;
    
    &:nth-of-type(1) {
      transform: translateY(var(--sp-1)) rotate(90deg);
      transition: width var(--anime-time) var(--anime-func);
    }
  }
}

/* pagination */
.collection-pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-20);
  margin-block-start: var(--sp-60-40);

  a,span {
    display: block;
    width: var(--sp-44);
    height: var(--sp-44);
    place-content: center;
    text-align: center;
    color: var(--black-tint-14);
    border-radius: var(--sp-4);
  }

  a {
    text-decoration: none;
    transition: background-color var(--anime-time) var(--anime-func);

    @media (hover: hover) {
      &:hover {
        background-color: var(--main-tint-8);
      }
    }
  }

  li {
    border-radius: var(--sp-4);

    &.active {
      background-color: var(--main-tint-30);
    }

    &.buddies-prev,
    &.buddies-next {
      a,span {        
        display: flex;
        flex-direction: row;
        align-items: center;
        width: fit-content;
      }
    }

    &.buddies-prev a {
      padding-inline: var(--sp-2) var(--sp-8);
    }
    
    &.buddies-next a {
      padding-inline: var(--sp-8) var(--sp-2);
    }
  }

  @media only screen and (width < 37.5rem) {
    position: relative;
    width: fit-content;
    margin-inline: auto;

    .buddies-prev,
    .buddies-next {
      position: absolute;
      top: calc(100% + var(--sp-12));
    }

    .buddies-next {
      right: 0;
    }

    .buddies-prev {
      right: var(--sp-60);
    }
  }
}