.table {
  width: 100%;
  border-collapse: collapse;

  * {
    vertical-align: top;
  }
}

.table--desktop {
  display: none;

  @media (min-width: 1024px) {
    display: revert;
  }
}

.table--mobile {
  display: revert;

  @media (min-width: 1024px) {
    display: none;
  }
}

.table-accordion {
  margin-bottom: 16px;
  max-width: 1024px;
  display: grid;
  grid-template-rows: max-content 0fr;

  &:last-child {
    margin-bottom: 0;
  }

  &.on-white {
    .table-accordion__toggle {
      background-color: var(--Brand-Gray-30);
      border: 1px solid var(--Brand-Gray-100);
    }

    &.open {
      .table-accordion__toggle {
        background-color: var(--Brand-Gray-25);
      }
    }
  }

  &.on-gray {
    .table-accordion__toggle {
      background-color: var(--brand-bw-white);
      border: 1px solid var(--Brand-Gray-300);
    }
  }

  &.open {
    grid-template-rows: max-content 1fr;
  }

  &:has(.table-accordion__title:focus-visible) {
    /* outline-border-2px-blue-focused:focus-visible */
    box-shadow:
      0px 0px 0px 2px var(--brand-bw-white),
      0px 0px 0px 4px var(--Brand-Primary-Blue-500);
  }
}

.table-accordion__toggle {
  width: 100%;
  appearance: none;
  border-radius: 12px;
  color: var(--brand-bw-black);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px 16px 16px;

  @media (min-width: 1024px) {
    border-radius: 16px;
    gap: 24px;
    padding: 20px 24px 20px 20px;
  }

  .open & {
    color: var(--brand-primary-blue-700-main);
  }

  & > .icon {
    background-color: var(--brand-bw-black);
    margin-left: auto;
    transition: transform var(--transition-duration)
      var(--transition-timing-function);

    .open & {
      transform: rotate(180deg);
      background-color: var(--brand-primary-blue-700-main);
    }
  }
}

.table-accordion__title {
  color: inherit;
  transition: color 500ms var(--transition-timing-function);

  .table-accordion__toggle:hover & {
    color: var(--Brand-Primary-Blue-500);
  }
}

.table-accordion__content {
  overflow: hidden;
}

.cell-align-left {
  align-self: flex-start;
  text-align: left;
}

.cell-align-center {
  align-self: center;
  text-align: center;
}

.cell-align-right {
  align-self: flex-end;
  text-align: right;
}

.cell-header-lv1 {
  padding: 12px 8px;
  min-height: 52px;

  &.direction-row {
    border-bottom: 1px solid var(--brand-primary-blue-700-main);
  }

  &.direction-column {
    border-right: 1px solid var(--brand-primary-blue-700-main);
    border-bottom: 1px solid var(--Brand-Gray-100);
  }

  &.on-white {
    background-color: var(--Brand-Gray-30);
  }

  &.on-gray {
    background-color: var(--Brand-Gray-100);

    &.direction-column {
      border-bottom: 1px solid var(--Brand-Gray-300);
    }
  }

  & > div {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 2px;

    & > .cell-header-lv1__title {
      white-space: pre-line;
      font-weight: 500;
      color: var(--brand-bw-black);
      font-size: var(--body2-font-size);
      line-height: var(--body2-line-height);
      letter-spacing: var(--body2-letter-spacing);
    }

    & > .cell-header-lv1__subtitle {
      font-weight: 400;
      font-size: var(--caption1-font-size);
      line-height: var(--caption1-line-height);
      letter-spacing: var(--caption1-letter-spacing);
      color: var(--Brand-Gray-800);
    }
  }
}

.cell-header-lv2 {
  padding: 16px 8px;

  &.on-white {
    background-color: var(--brand-bw-white);
  }

  &.on-gray {
    background-color: var(--Brand-Gray-50);
  }

  &.with-bottom-border {
    &.on-white {
      border-bottom: 1px solid var(--Brand-Gray-100);
    }

    &.on-gray {
      border-bottom: 1px solid var(--Brand-Gray-300);
    }
  }

  &.separate {
    border: 0;
    padding-bottom: 0;
  }

  & > div {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: flex-start;

    & > .cell-header-lv2__title {
      white-space: pre-line;
      font-weight: 500;
      color: var(--brand-primary-blue-700-main);
      font-size: var(--body2-font-size);
      line-height: var(--body2-line-height);
      letter-spacing: var(--body2-letter-spacing);
    }

    & > .cell-header-lv2__subtitle {
      font-weight: 400;
      font-size: var(--caption1-font-size);
      line-height: var(--caption1-line-height);
      letter-spacing: var(--caption1-letter-spacing);
      color: var(--Brand-Gray-700);
    }
  }
}

.cell-default {
  padding: 16px 8px;
  min-height: 60px;

  &.on-white {
    background-color: var(--brand-bw-white);
    border-bottom: 1px solid var(--Brand-Gray-100);
  }

  &.on-gray {
    background-color: var(--Brand-Gray-50);
    border-bottom: 1px solid var(--Brand-Gray-300);
  }
}

.cell-text {
  & > div {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 6px;

    & > div {
      width: 100%;

      & > span.title {
        display: block;
        white-space: pre-line;
        color: var(--Brand-Gray-800);
        font-size: var(--body2-font-size);
        line-height: var(--body2-line-height);
        letter-spacing: var(--body2-letter-spacing);
      }

      & > span.caption {
        display: block;
        white-space: pre-line;
        color: var(--Brand-Gray-700);
        font-size: var(--caption1-font-size);
        line-height: var(--caption1-line-height);
        letter-spacing: var(--caption1-letter-spacing);
      }
    }
  }
}

.cell-list {
  & > ul,
  & > ol {
    margin: 0;
    padding-inline-start: 20px;
  }

  & > ul {
    list-style: disc;
  }

  & > ol {
    list-style: decimal;
  }

  li {
    font-size: var(--body2-font-size);
    line-height: var(--body2-line-height);
    letter-spacing: var(--body2-letter-spacing);
    margin-bottom: 4px;
    color: var(--Brand-Gray-800);

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.cell-link {
  & > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    & > a {
      font-size: var(--body2-font-size);
      line-height: var(--body2-line-height);
      letter-spacing: var(--body2-letter-spacing);
      color: var(--Brand-Primary-Blue-600);
      text-decoration: underline;

      &:hover {
        color: var(--Brand-Primary-Blue-400);
      }
    }
  }
}