.table {
  // Tables
  //
  // Customizes the `.table` component with basic values, each used across all table variations.

  --#{$prefix}table-bg: #{$table-bg};

  --#{$prefix}table-accent-bg: #{$table-accent-bg};
  --#{$prefix}table-hover-bg: #{$table-hover-bg};
  --#{$prefix}table-border-color: #{$table-border-color};

  margin-bottom: 18px;

  > :not(caption) > * > * {
    background-color: inherit;
  }

  .table {
    background-color: var(--#{$prefix}secondary-bg);
  }

  > thead,
  > tbody,
  > tfoot {
    > tr {
      border-top: 1px solid var(--#{$prefix}table-border-color);

      > th,
      > td {
        padding: 8px;
        line-height: $line-height-base;
        white-space: nowrap;

        &.active {
          background-color: rgba(38, 38, 38, 0.3);
        }
      }
    }
  }

  thead {
    > tr {
      > th {
        vertical-align: bottom;
      }
    }

    .sorting,
    .sorting_asc,
    .sorting_desc {
      cursor: pointer;
    }

    .sorting {
      background: url('@/assets/table/sort_both.png') no-repeat center right;
    }

    .sorting_asc {
      background: url('@/assets/table/sort_asc.png') no-repeat center right;
    }

    .sorting_desc {
      background: url('@/assets/table/sort_desc.png') no-repeat center right;
    }
  }

  > caption + thead,
  > colgroup + thead,
  > thead:first-child {
    > tr:first-child {
      > th,
      > td {
        border-top: 0;
      }
    }
  }

  > tbody + tbody {
    border-top: 2px solid var(--#{$prefix}table-border-color);
  }

  .chart-cell {
    padding: 3px;
  }
}

.table-lg {
  > :not(caption) > * > * {
    padding: $table-cell-padding-y-lg $table-cell-padding-x-lg;
  }
}

.table-hover {
  tbody {
    td,
    th {
      @include transition(background-color 0.2s);
    }
  }

  > thead,
  > tbody,
  > tfoot {
    > tr {
      > td,
      > th {
        &.active:hover {
          background-color: rgba(26, 26, 26, 0.3);
        }
      }
    }
  }
}

.table-images {
  td {
    height: 60px;
    vertical-align: middle;
    img {
      height: 60px;
    }
  }
}

.table-editable {
  th a {
    display: block;
    cursor: pointer;
    color: var(--#{$prefix}body-color);
    text-decoration: underline;
  }

  td.editor,
  tbody tr:nth-child(odd) td.editor {
    background-color: rgba(36, 119, 255, 0.05);
    outline: 1px solid $primary;
    outline-offset: -1px;
    box-sizing: border-box;

    @include transition(width 0.2s ease-in-out);
    @include transition(outline 0.2s ease-in-out);
    @include transition(background-color 0.2s ease-in-out);
  }

  td.editor {
    input[type='text'] {
      color: var(--#{$prefix}input-color);
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      background-color: transparent;
      border: 0;
      outline: 0;
      box-shadow: none;
      box-sizing: border-box;
    }

    &.error {
      background-color: rgba(228, 148, 0, 0.1);
      outline: 1px solid $warning;
    }
  }

  tbody tr:nth-child(odd) td.editor.error {
    background-color: rgba(228, 148, 0, 0.1);
    outline: 1px solid $warning;
  }

  td,
  th {
    &.editor:focus {
      outline: 0;
    }
  }
}

[data-bs-theme='dark'] .table {
  // Tables
  //
  // Customizes the `.table` component with basic values, each used across all table variations.

  --#{$prefix}table-bg: #{$table-bg-dark};

  --#{$prefix}table-accent-bg: #{$table-accent-bg-dark};
  --#{$prefix}table-hover-bg: #{$table-hover-bg-dark};
  --#{$prefix}table-border-color: #{$table-border-color-dark};
}