@use 'global/common' as global;

/* ------------------------------
 テーブル
------------------------------- */
.acms-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-top: global.$acms-table-border;

  // データ
  th,
  td {
    padding: global.$acms-table-cell-padding;
    vertical-align: top;
    border-bottom: global.$acms-table-border;
  }

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

  // ボーダーなし 上
  &.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 {
  // データ
  th,
  td {
    border-bottom: global.$acms-table-heading-border;
  }

  // 見出し
  th {
    color: global.$acms-table-heading-th-text-color;
    background: global.$acms-table-heading-th-bg;
  }
}

// ------------------------------
// テーブル ボーダー
// ------------------------------
.acms-table-bordered {
  border-top: global.$acms-table-bordered-border;
  border-left: global.$acms-table-bordered-border;

  th,
  td {
    border-right: global.$acms-table-bordered-border;
    border-bottom: global.$acms-table-bordered-border;
  }
}

// ------------------------------
// テーブル striped
// ------------------------------
.acms-table-striped {
  tr:nth-of-type(odd),
  tr.odd {
    background: global.$acms-table-border-odd;
  }

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

// ------------------------------
// テーブル hover
// ------------------------------
.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 {
  cursor: pointer;
  background: global.$acms-table-hover-bg;
}

.acms-table-hover-line tr:hover,
.acms-table-hover-line tr:focus-within,
.acms-table-hover tr.hover {
  background: global.$acms-table-hover-line-bg;
}

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

  th,
  td {
    vertical-align: middle;
  }

  th {
    text-align: right;
  }
}

// ------------------------------
// テーブル 入れ替え
// ------------------------------
.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: global.$acms-table-sortable-bg;
  }
}

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

// global.$breakpoint-sm-max 以下
@media (max-width: global.$breakpoint-sm-max) {
  .acms-table-scroll-xs {
    @include global.table-scroll;
  }
}

// global.$breakpoint-sm-max 以上 global.$breakpoint-md-max以下
@media (min-width: global.$breakpoint-sm-min) and (max-width: global.$breakpoint-md-max) {
  .acms-table-scroll-sm {
    @include global.table-scroll;
  }
}

// global.$breakpoint-md-min 以上 global.$breakpoint-lg-max以下
@media (min-width: global.$breakpoint-md-min) and (max-width: global.$breakpoint-lg-max) {
  .acms-table-scroll-md {
    @include global.table-scroll;
  }
}

// global.$breakpoint-lg-min 以上 global.$breakpoint-xl-max以下
@media (min-width: global.$breakpoint-lg-min) and (max-width: global.$breakpoint-xl-max) {
  .acms-table-scroll-lg {
    @include global.table-scroll;
  }
}

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

@media (max-width: global.$breakpoint-md-max) {
  // ------------------------------
  // テーブル レスポンシブ
  // ------------------------------
  .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 {
  // ------------------------------
  // テーブル 管理画面
  // ------------------------------
  .acms-table-admin {
    width: 100%;
    border-collapse: collapse;

    // 見出し
    thead {
      border-bottom: global.$acms-table-admin-border;
    }

    thead th {
      padding: 5px;
      font-weight: bold;

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

    th,
    td {
      padding: global.$acms-table-admin-cell;
      line-height: 1.3;
      border-bottom: global.$acms-table-admin-border;
    }

    th {
      text-align: left;
    }

    td {
      background-color: global.$acms-table-admin-td-bg;
    }

    @media screen and (max-width: global.$breakpoint-md-max) {
      th,
      td {
        padding: 5px;
      }
    }
  }

  // ------------------------------
  // テーブル 管理画面 striped
  // ------------------------------
  .acms-table-admin-striped {
    tr:nth-of-type(odd),
    tr.odd {
      background: global.$acms-table-admin-border-odd;
    }

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

  // ------------------------------
  // テーブル 編集画面
  // ------------------------------
  .acms-table-admin-edit {
    width: 100%;
    background: global.$acms-table-admin-edit-bg;
    border: global.$acms-table-admin-edit-border;

    @include global.font-size(14);

    thead {
      border-bottom: global.$acms-table-admin-edit-border;

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

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

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

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

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

    @media screen and (max-width: global.$breakpoint-md-max) {
      thead,
      tbody {
        th,
        td {
          display: block;
          width: 100% !important;
        }
      }

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

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

    @media (min-width: global.$breakpoint-md-min) {
      tr {
        border-bottom: 0;
      }

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

  .is-admin-page, // 管理ページ内にのみ適用
  .acms-form {
    // モーダルで開く編集画面内と、エントリーのカスタムフィールドとユニット編集画面内を考慮
    .acms-table-admin-edit {
      @media (min-width: global.$breakpoint-md-min) {
        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;
    }

    @media screen and (max-width: global.$breakpoint-md-max) {
      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 {
    width: 100%;

    @include global.font-size(14);

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

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

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

    &-th-x {
      border-right: global.$acms-table-admin-edit-bordered-border;
    }

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

    @media screen and (max-width: global.$breakpoint-md-max) {
      th,
      td {
        display: block;
        text-align: left;
      }
    }
  }

  // ---------------
  // テーブル ミニ
  // ---------------
  .acms-admin-mini-table {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border: global.$acms-admin-mini-table-border;

    thead {
      background: global.$acms-color-white;
      border-bottom: global.$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 {
  & th,
  & td,
  &,
  .acms-table-hover &:hover th,
  .acms-table-hover &:hover td,
  .acms-table-hover &:hover {
    background: global.$acms-table-info-bg;
  }
}

// success
.acms-table-success {
  & th,
  & td,
  &,
  .acms-table-hover &:hover th,
  .acms-table-hover &:hover td,
  .acms-table-hover &:hover {
    background: global.$acms-table-success-bg;
  }
}

// warning
.acms-table-warning {
  & th,
  & td,
  &,
  .acms-table-hover &:hover th,
  .acms-table-hover &:hover td,
  .acms-table-hover &:hover {
    background: global.$acms-table-warning-bg;
  }
}

// danger
.acms-table-danger {
  & th,
  & td,
  &,
  .acms-table-hover &:hover th,
  .acms-table-hover &:hover td,
  .acms-table-hover &:hover {
    background: global.$acms-table-danger-bg;
  }
}

// ---------------
// ユーティリティ
// ---------------
// 中央揃い
.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-nowrap {
  width: 1%;
  white-space: nowrap;
}

.acms-table-break-word {
  word-break: break-word;
}
