//
// Insert table picker
//

@insert-table-picker-cell-size: @base-value + 1; // Add 1 to account for the border size
@insert-table-picker-background-color: @background-color;
@insert-table-picker-selected-background-color: @color-tint;
@insert-table-picker-border-color: @border-color;
@insert-table-picker-selected-border-color: @insert-table-picker-border-color;
@insert-table-picker-label-color: contrast(@menu-background-color, @text-color-muted, @color-white);

.tox {
  .tox-insert-table-picker {
    background-color: @insert-table-picker-background-color;
    display: flex;
    flex-wrap: wrap;
    width: @insert-table-picker-cell-size * 10;

    // Cell styles
    > div {
      border-color: @insert-table-picker-border-color;
      border-style: solid;
      border-width: 0 1px 1px 0;
      box-sizing: border-box;
      height: @insert-table-picker-cell-size;
      width: @insert-table-picker-cell-size;

      // Option for removing colors on bottom row
      &:nth-last-child(-n+10) {
        //
      }
    }
  }

  // Remove menu padding when picker is used in a collection list context
  .tox-collection--list .tox-collection__group .tox-insert-table-picker {
    margin: -@menu-item-collection-list-padding -@collection-item-separator-margin-y;
  }

  // Selected cell
  .tox-insert-table-picker .tox-insert-table-picker__selected {

    @media (forced-colors: active) {
      border-color: Highlight;
      filter: contrast(50%);
    }

    background-color: @insert-table-picker-selected-background-color;
    border-color: @insert-table-picker-selected-border-color;
  }

  // Label for selected cells
  .tox-insert-table-picker__label {
    color: @insert-table-picker-label-color;
    display: block;
    font-size: @font-size-sm;
    padding: @pad-xs;
    text-align: center;
    width: 100%;
  }
}

.tox:not([dir=rtl]) {
  // Remove border on last cell of every row
  .tox-insert-table-picker > div {
    &:nth-child(10n) {
      border-right: 0;
    }
  }
}

// RTL
.tox[dir=rtl] {
  .tox-insert-table-picker > div {
    &:nth-child(10n+1) {
      border-right: 0;
    }
  }
}