@use 'global/common' as global;

/* ------------------------------
 テーブル
------------------------------- */
[class*='acms-table'] {
  --acms-table-cell-padding: #{global.$acms-table-cell-padding};
  --acms-table-border-width: #{global.$acms-table-border-width};
  --acms-table-border-style: #{global.$acms-table-border-style};
  --acms-table-border-color: #{global.$acms-table-border-color};
  --acms-table-border: var(--acms-table-border-width) var(--acms-table-border-style) var(--acms-table-border-color);
}

.acms-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-top: var(--acms-table-border);

  // データ
  th,
  td {
    padding: var(--acms-table-cell-padding);
    vertical-align: top;
    border-bottom: var(--acms-table-border);
  }

  th {
    vertical-align: top;
    text-align: left;
  }

  // ボーダーなし 上
  &.acms-table-none {
    border-top: 0;
  }

  // ボーダーなし 下
  &.acms-table-none th,
  &.acms-table-none td {
    border-bottom: 0;
  }
}

.panel-body .acms-table {
  th,
  td {
    padding: 5px;
  }

  .acms-table-container {
    padding: 10px 5px;
  }
}

.acms-table,
.acms-table::before,
.acms-table::after,
.acms-table-admin-edit,
.acms-table-admin-edit th,
.acms-table-admin-edit td,
.acms-table-heading,
.acms-table-heading th,
.acms-table-heading td {
  @include global.box-sizing(border-box);
}

@if global.$admin==true {
  .acms-table-admin-edit th {
    line-height: 1.7;
  }
}

// ------------------------------
// テーブル 見出し
// ------------------------------
.acms-table-heading {
  --acms-table-heading-border-width: #{global.$acms-table-heading-border-width};
  --acms-table-heading-border-style: #{global.$acms-table-heading-border-style};
  --acms-table-heading-border-color: #{global.$acms-table-heading-border-color};
  --acms-table-heading-border: var(--acms-table-heading-border-width) var(--acms-table-heading-border-style)
    var(--acms-table-heading-border-color);
  --acms-table-heading-th-bg: #{global.$acms-table-heading-th-bg};
  --acms-table-heading-th-text-color: #{global.$acms-table-heading-th-text-color};
}

.acms-table-heading {
  // データ
  th,
  td {
    border-bottom: var(--acms-table-heading-border);
  }

  // 見出し
  th {
    color: var(--acms-table-heading-th-text-color);
    background: var(--acms-table-heading-th-bg);
  }
}

// ------------------------------
// テーブル ボーダー
// ------------------------------
.acms-table-bordered {
  --acms-table-bordered-border-width: #{global.$acms-table-bordered-border-width};
  --acms-table-bordered-border-style: #{global.$acms-table-bordered-border-style};
  --acms-table-bordered-border-color: #{global.$acms-table-bordered-border-color};
  --acms-table-bordered-border: var(--acms-table-bordered-border-width) var(--acms-table-bordered-border-style)
    var(--acms-table-bordered-border-color);
}

.acms-table-bordered {
  border-top: var(--acms-table-bordered-border);
  border-left: var(--acms-table-bordered-border);

  th,
  td {
    border-right: var(--acms-table-bordered-border);
    border-bottom: var(--acms-table-bordered-border);
  }
}

// ------------------------------
// テーブル striped
// ------------------------------
.acms-table-striped {
  --acms-table-border-odd: #{global.$acms-table-border-odd};
  --acms-table-border-even: #{global.$acms-table-border-even};
}

.acms-table-striped {
  tr:nth-of-type(odd),
  tr.odd {
    background: var(--acms-table-border-odd);
  }

  tr:nth-of-type(even),
  tr.even {
    background: var(--acms-table-border-even);
  }
}

// ------------------------------
// テーブル hover
// ------------------------------
.acms-table-hover {
  --acms-table-hover-bg: #{global.$acms-table-hover-bg};
  --acms-table-hover-line-bg: #{global.$acms-table-hover-line-bg};
}

.acms-table-hover td,
.acms-table-hover-line tr {
  transition: 0.2s background-color;
}

.acms-table-hover tr:hover td,
.acms-table-hover tr:focus-within td,
.acms-table-hover tr.hover td {
  background: var(--acms-table-hover-bg);
}

.acms-table-hover-line tr:hover,
.acms-table-hover-line tr:focus-within,
.acms-table-hover tr.hover {
  background: var(--acms-table-hover-line-bg);
}

// ------------------------------
// テーブル 入力テーブル
// ------------------------------
.acms-table-edit {
  border-top: none;

  th,
  td {
    vertical-align: middle;
  }

  th {
    text-align: right;
  }
}

// ------------------------------
// テーブル 入れ替え
// ------------------------------
.acms-table-sortable-active {
  --acms-table-sortable-bg: #{global.$acms-table-sortable-bg};
}

.acms-table-sortable-active {
  th,
  td,
  tr:nth-of-type(even) th,
  tr:nth-of-type(even) td,
  tr.even th,
  tr.even td {
    background-color: var(--acms-table-sortable-bg);
  }
}

// ------------------------------
// テーブル スクロール
// ------------------------------
[class*='acms-table-scroll-'],
.acms-table-responsive {
  border: 1px solid var(--acms-table-border-color);
}

.acms-table-scroll {
  @include global.table-scroll;
}

@include global.media-breakpoint-down(sm) {
  .acms-table-scroll-xs {
    @include global.table-scroll;
  }
}

@include global.media-breakpoint-between(sm, md) {
  .acms-table-scroll-sm {
    @include global.table-scroll;
  }
}

@include global.media-breakpoint-between(md, lg) {
  .acms-table-scroll-md {
    @include global.table-scroll;
  }
}

@include global.media-breakpoint-between(lg, xl) {
  .acms-table-scroll-lg {
    @include global.table-scroll;
  }
}

// global.$breakpoint-xl-min以下
@include global.media-breakpoint-up(xl) {
  .acms-table-scroll-xl {
    @include global.table-scroll;
  }
}

@include global.media-breakpoint-down(md) {
  // ------------------------------
  // テーブル レスポンシブ
  // ------------------------------
  .acms-table-responsive {
    margin-bottom: 15px;
    overflow: scroll hidden;
    -webkit-overflow-scrolling: touch;

    th,
    td {
      white-space: nowrap;
    }
  }

  .acms-table-scrollable,
  .js-table-unit-scroll-hint {
    th,
    td {
      display: table-cell !important;
      white-space: nowrap;
    }
  }

  // ------------------------------
  // テーブル entry
  // ------------------------------
  .acms-table-entry {
    th,
    td {
      box-sizing: border-box;
      display: block;
      width: 100%;
      padding-right: 0;
      padding-left: 0;
    }

    th {
      padding-bottom: 0;
      text-align: left;
    }

    td {
      padding-top: 3px;
    }

    .detail-fade-body th,
    .detail-fade-body td {
      padding-right: 10px;
      padding-left: 10px;
    }
  }
}

@if global.$admin == true {
  // ------------------------------
  // テーブル 管理画面
  // ------------------------------
  [class*='acms-table-admin'] {
    --acms-table-admin-cell-padding: 5px;
    --acms-table-admin-border-width: #{global.$acms-table-admin-border-width};
    --acms-table-admin-border-style: #{global.$acms-table-admin-border-style};
    --acms-table-admin-border-color: #{global.$acms-table-admin-border-color};
    --acms-table-admin-border: var(--acms-table-admin-border-width)
      var(--acms-table-admin-border-style)
      var(--acms-table-admin-border-color);
    --acms-table-admin-cell: #{global.$acms-table-admin-cell};
    --acms-table-admin-td-bg: #{global.$acms-table-admin-td-bg};
  }

  .acms-table-admin {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;

    // 見出し
    thead {
      border-bottom: var(--acms-table-admin-border);
    }

    thead th {
      padding: var(--acms-table-admin-cell-padding);
      font-weight: bold;

      @include global.font-size(13);
    }

    th,
    td {
      padding: var(--acms-table-admin-cell);
      line-height: 1.3;
      border-bottom: var(--acms-table-admin-border);
    }

    th {
      position: relative;
      text-align: left;
    }

    td {
      background-color: var(--acms-table-admin-td-bg);
    }

    @include global.media-breakpoint-down(md) {
      th,
      td {
        padding: 5px;
      }
    }
  }

  .acms-table-column-resizer {
    position: absolute;
    top: 0;
    width: 5px;
    height: 100%;
    touch-action: none;
    cursor: col-resize;
    user-select: none;
    background: rgb(0 0 0 / 50%);
  }

  .acms-table-column-resizer.ltr {
    right: 0;
  }

  .acms-table-column-resizer.rtl {
    left: 0;
  }

  .acms-table-column-resizer.is-resizing {
    background: blue;
    opacity: 1;
  }

  @media (hover: hover) {
    .acms-table-column-resizer {
      opacity: 0;
    }

    *:hover > .acms-table-column-resizer {
      opacity: 1;
    }
  }

  // ------------------------------
  // テーブル 管理画面 striped
  // ------------------------------
  .acms-table-admin-striped {
    --acms-table-admin-border-odd: #{global.$acms-table-admin-border-odd};
    --acms-table-admin-border-even: #{global.$acms-table-admin-border-even};
  }

  .acms-table-admin-striped {
    tr:nth-of-type(odd),
    tr.odd {
      background: var(--acms-table-admin-border-odd);
    }

    tr:nth-of-type(even),
    tr.even {
      background: var(--acms-table-admin-border-even);
    }
  }

  // ------------------------------
  // テーブル 編集画面
  // ------------------------------
  .acms-table-admin-edit {
    --acms-table-admin-edit-bg: #{global.$acms-table-admin-edit-bg};
    --acms-table-admin-edit-border: #{global.$acms-table-admin-edit-border};
  }

  .acms-table-admin-edit {
    width: var(--acms-table-admin-edit-width, 100%);
    max-width: var(--acms-table-admin-edit-max-width, auto);
    table-layout: var(--acms-table-admin-edit-table-layout, auto);
    background: var(--acms-table-admin-edit-bg);
    border: var(--acms-table-admin-edit-border);

    @include global.font-size(14);

    thead {
      border-bottom: var(--acms-table-admin-edit-border);

      th,
      td {
        padding: 3px 10px;
      }
    }

    th {
      width: global.$acms-table-admin-edit-th-width;
      vertical-align: top;
      color: global.$acms-color-gray90;
      text-align: right;

      &.acms-table-nowrap {
        width: 1%;
      }
    }

    th,
    td {
      padding: 2px 5px;
    }

    // 下階層のtableは線なし
    table {
      width: 100%;
    }

    @include global.media-breakpoint-down(md) {
      table-layout: auto;

      thead,
      tbody {
        th,
        td {
          display: block;
          width: 100% !important;
        }
      }

      tbody {
        th {
          padding-bottom: 5px;
          text-align: left;

          & + td {
            padding-bottom: 10px;
          }
        }
      }
    }

    @include global.media-breakpoint-up(md) {
      tr {
        border-bottom: 0;
      }

      th,
      td {
        padding: 5px 10px;
      }
    }
  }

  .is-admin-page, // 管理ページ内にのみ適用
  .acms-form {
    // モーダルで開く編集画面内と、エントリーのカスタムフィールドとユニット編集画面内を考慮
    .acms-table-admin-edit {
      @include global.media-breakpoint-up(md) {
        th {
          padding-right: 25px;
        }

        tr {
          &:first-child th,
          &:first-child td {
            padding: 10px 10px 5px;
          }

          &:first-child th {
            padding-right: 25px;
          }

          &:last-child th,
          &:last-child td {
            padding: 5px 10px 10px;
          }

          &:last-child th {
            padding-right: 25px;
          }

          &:only-child th,
          &:only-child td {
            padding: 10px;
          }

          &:only-child th {
            padding-right: 25px;
          }
        }

        thead {
          tr:first-child,
          tr:last-child,
          tr:only-child {
            th,
            td {
              padding: 3px 10px;
            }
          }
        }
      }
    }
  }

  // メディア機能 テーブル
  .acms-table-admin-media-edit-wrap {
    margin: 0 -5px;
  }

  .acms-table-admin-media-edit {
    width: 100%;
    border-collapse: collapse;
    border: none;

    @include global.font-size(14);

    th {
      text-align: right;
    }

    th,
    td {
      padding: 5px;
      vertical-align: top;
    }

    @include global.media-breakpoint-down(md) {
      th {
        text-align: left;
      }

      th,
      td {
        display: block;
        text-align: left;
      }
    }
  }

  // タブの直下の編集画面テーブル
  .acms-tabs-panel {
    .acms-table-admin-edit {
      border: 0;
    }
  }

  .acms-table-admin-edit-bordered {
    --acms-table-admin-edit-bordered-border: #{global.$acms-table-admin-edit-bordered-border};
  }

  .acms-table-admin-edit-bordered {
    width: 100%;

    @include global.font-size(14);

    tr {
      border: var(--acms-table-admin-edit-bordered-border);
    }

    th {
      max-width: global.$acms-table-admin-edit-bordered-th-width;
      padding: 10px;
      vertical-align: top;
      text-align: right;
    }

    td,
    th {
      padding: 5px 10px;
    }

    &-th-x {
      border-right: var(--acms-table-admin-edit-bordered-border);
    }

    // 下階層のtableは線なし
    table {
      tr {
        border: none;
      }
    }

    @include global.media-breakpoint-down(md) {
      th,
      td {
        display: block;
        text-align: left;
      }
    }
  }

  // ---------------
  // テーブル ミニ
  // ---------------
  .acms-admin-mini-table {
    --acms-admin-mini-table-border: #{global.$acms-admin-mini-table-border};
  }

  .acms-admin-mini-table {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border: var(--acms-admin-mini-table-border);

    thead {
      background: global.$acms-color-white;
      border-bottom: var(--acms-admin-mini-table-border);
    }

    tr,
    td,
    th {
      padding: 7px 10px;
    }

    th {
      text-align: left;
    }

    + p {
      margin-top: -15px;
    }

    .acms-admin-mini-table-action {
      width: 80px;
    }

    .acms-admin-mini-table-import-action {
      width: 120px;
    }

    ul {
      padding-left: 1em;
      margin-bottom: 0;
    }
  }

  [class*='acms-table-scroll-'],
  .acms-table-responsive {
    .acms-admin-mini-table {
      border: 0;
    }
  }

  .acms-table .acms-table-action {
    width: 50px;
  }

  [class*='acms-table-scroll-'] .acms-table-admin,
  .acms-table-responsive .acms-table-admin {
    tr:last-child td {
      border-bottom: 0;
    }
  }
}

// ---------------
// テーブル カラー
// ---------------
// info
.acms-table-info {
  --acms-table-info-bg: #{global.$acms-table-info-bg};
}

.acms-table-info {
  & th,
  & td,
  &,
  .acms-table-hover &:hover th,
  .acms-table-hover &:hover td,
  .acms-table-hover &:hover {
    background: var(--acms-table-info-bg);
  }
}

// success
.acms-table-success {
  --acms-table-success-bg: #{global.$acms-table-success-bg};
}

.acms-table-success {
  & th,
  & td,
  &,
  .acms-table-hover &:hover th,
  .acms-table-hover &:hover td,
  .acms-table-hover &:hover {
    background: var(--acms-table-success-bg);
  }
}

// warning
.acms-table-warning {
  --acms-table-warning-bg: #{global.$acms-table-warning-bg};
}

.acms-table-warning {
  & th,
  & td,
  &,
  .acms-table-hover &:hover th,
  .acms-table-hover &:hover td,
  .acms-table-hover &:hover {
    background: var(--acms-table-warning-bg);
  }
}

// danger
.acms-table-danger {
  --acms-table-danger-bg: #{global.$acms-table-danger-bg};
}

.acms-table-danger {
  & th,
  & td,
  &,
  .acms-table-hover &:hover th,
  .acms-table-hover &:hover td,
  .acms-table-hover &:hover {
    background: var(--acms-table-danger-bg);
  }
}

// -----------------------------------------------------------
// テーブル モダン
// カスタムフィールドメーカーで生成されるモダンなタグのテーブルレイアウト
// -----------------------------------------------------------
.acms-grid-edit-table {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;

  @include global.font-size(14);

  * {
    box-sizing: border-box;
  }

  .acms-icon-tooltip {
    margin-left: 10px;
    cursor: pointer;
  }

  .acms-grid-edit-table-heading {
    width: 100%;
    font-weight: bold;
    line-height: 1.7;
    vertical-align: top;
    color: global.$acms-color-gray90;
    text-align: left;
  }
}

@include global.media-breakpoint-up(md) {
  .acms-grid-edit-table {
    display: grid;
    gap: 10px;

    .acms-icon-tooltip {
      margin-right: -25px;
    }

    .acms-grid-edit-table-heading {
      width: 250px;
      padding-right: 35px;
      text-align: right;
    }
  }
}

// ---------------
// テーブル ソート
// ---------------
.acms-th-sort-btn {
  box-sizing: content-box;
  display: inline-flex;
  column-gap: global.$acms-btn-column-gap;
  align-items: center;
  width: 100%;
  padding: var(--acms-table-cell-padding);
  margin: calc(-1 * var(--acms-table-cell-padding));
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  appearance: none;
  cursor: pointer;
  background-color: transparent;
  border: none;

  &:focus-visible {
    outline-offset: -5px;
  }
}

.acms-th-sort-btn::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: '';
  border-color: global.$acms-color-black;
  border-style: solid;
  border-width: 0;
}

th[aria-sort='ascending'] .acms-th-sort-btn::after {
  border-top-width: 2px;
}

th[aria-sort='descending'] .acms-th-sort-btn::after {
  border-bottom-width: 2px;
}

@media (any-hover: hover) {
  th:not([aria-sort]) .acms-th-sort-btn[data-next-sort='ascending']:hover::after,
  th[aria-sort='none'] .acms-th-sort-btn[data-next-sort='ascending']:hover::after {
    border-top-width: 2px;
  }

  th:not([aria-sort]) .acms-th-sort-btn[data-next-sort='descending']:hover::after,
  th[aria-sort='none'] .acms-th-sort-btn[data-next-sort='descending']:hover::after {
    border-bottom-width: 2px;
  }
}

.acms-th-sort-btn-icon {
  display: inline-block;
  visibility: hidden;
  width: 10px;
  height: 7px;
  background-color: global.$acms-color-black;
}

th[aria-sort='ascending'] .acms-th-sort-btn-icon {
  visibility: visible;
  clip-path: polygon(100% 100%, 0 100%, 50% 0);
}

th[aria-sort='descending'] .acms-th-sort-btn-icon {
  visibility: visible;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

// ---------------
// セル 画像
// ---------------
.acms-cell-image img {
  display: block;
  min-width: 50px;
  max-height: 50px;
}

// ---------------
// セル 画像
// ---------------
.acms-cell-file {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;

  @include global.font-size(12);
}

.acms-cell-file img {
  display: block;
  min-width: 50px;
  max-height: 50px;
}

// ---------------
// ユーティリティ
// ---------------
// 中央揃い
.acms-table-center {
  text-align: center;

  .acms-table-admin-edit &,
  .acms-table-admin-edit-bordered &,
  .acms-table-admin & {
    text-align: center;
  }
}

// 左揃い
.acms-table-left {
  text-align: left;

  .acms-table-admin-edit &,
  .acms-table-admin-edit-bordered &,
  .acms-table-admin & {
    text-align: left;
  }
}

// 右揃い
.acms-table-right {
  text-align: right;

  .acms-table-admin-edit &,
  .acms-table-admin-edit-bordered &,
  .acms-table-admin & {
    text-align: right;
  }
}

// 折り返し禁止
.acms-table-nowrap {
  width: 1%;
  white-space: nowrap;
}
