@import '../../../../../scss/styles';

@layer payload-default {
  .LexicalEditorTheme {
    &__tableScrollableWrapper {
      overflow-x: auto;
      margin: 0px 25px 30px 0px;
    }
    &__tableScrollableWrapper > .LexicalEditorTheme__table {
      /* Remove the table's vertical margin and put it on the wrapper */
      margin-top: 0;
      margin-bottom: 0;
    }

    &__tableAlignmentCenter {
      margin-left: auto;
      margin-right: auto;
    }
    &__tableAlignmentRight {
      margin-left: auto;
    }

    &__tableSelection *::selection {
      background-color: transparent;
    }

    &__table {
      border-collapse: collapse;
      max-width: 100%;
      border-spacing: 0;
      overflow-y: scroll;
      overflow-x: scroll;
      table-layout: fixed;
      width: fit-content;
      margin-top: 25px;
      margin-bottom: 30px;

      ::selection {
        background: rgba(172, 206, 247);
      }

      br::selection {
        background: unset;
      }
    }

    &__tableFrozenColumn tr > td:first-child {
      background-color: var(--theme-bg);
      position: sticky;
      z-index: 2;
      left: 0;
    }
    &__tableFrozenColumn tr > th:first-child {
      background-color: var(--theme-elevation-50);
      position: sticky;
      z-index: 2;
      left: 0;
    }
    &__tableFrozenColumn tr > :first-child::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 100%;
      border-right: 1px solid var(--theme-elevation-400);
    }

    &__tableRowStriping tr:nth-child(even) {
      background-color: var(--theme-elevation-100);
    }

    &__tableSelected {
      outline: 2px solid rgb(60, 132, 244);
    }

    &__tableCell {
      border: 1px solid var(--theme-elevation-200);
      vertical-align: top;
      text-align: start;
      padding: 6px 8px;
      position: relative;
      cursor: default;
      outline: none;
    }

    /*
    * A firefox workaround to allow scrolling of overflowing table cell
    * ref: https://bugzilla.mozilla.org/show_bug.cgi?id=1904159
    */
    &__tableCell > * {
      overflow: inherit;
    }

    &__tableCellResizer {
      position: absolute;
      right: -4px;
      height: 100%;
      width: 8px;
      cursor: ew-resize;
      z-index: 10;
      top: 0;
    }

    &__tableCellHeader {
      background-color: #f2f3f5;
      text-align: start;
    }

    &__tableCellSelected {
      caret-color: transparent;
    }

    &__tableCellSelected::after {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background-color: var(--color-success-250);
      mix-blend-mode: multiply;
      content: '';
      pointer-events: none;
    }

    &__tableAddColumns {
      height: 100%;
    }

    &__tableAddColumns,
    &__tableAddRows {
      position: absolute;
      background-color: var(--theme-elevation-100);
      animation: table-controls 0.2s ease;
      border: 0;
      cursor: pointer;
      min-width: 24px;
      min-height: 24px;
    }

    &__tableAddColumns:after,
    &__tableAddRows:after {
      display: flex;
      content: '+';
      font-size: 1.4rem;
      border-radius: $style-radius-s;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: var(--theme-elevation-500);
    }

    &__tableAddColumns:hover,
    &__tableAddRows:hover {
      background-color: var(--theme-elevation-150);
    }

    &__tableAddRows {
      width: calc(100% - 25px);
    }

    @keyframes table-controls {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    &__tableCellResizeRuler {
      display: block;
      position: absolute;
      width: 1px;
      background-color: rgb(60, 132, 244);
      height: 100%;
      top: 0;
    }

    &__tableCellActionButtonContainer {
      display: block;
      right: 5px;
      top: 6px;
      position: absolute;
      z-index: 4;
      width: 20px;
      height: 20px;
    }

    &__tableCellActionButton {
      background-color: #eee;
      display: block;
      border: 0;
      border-radius: 20px;
      width: 20px;
      height: 20px;
      color: #222;
      cursor: pointer;
    }

    &__tableCellActionButton:hover {
      background-color: #ddd;
    }
  }

  html[data-theme='dark'] {
    .LexicalEditorTheme {
      &__tableCellHeader {
        background-color: var(--theme-elevation-50);
      }

      &__tableCellSelected::after {
        background-color: var(--color-success-700);
        mix-blend-mode: screen;
      }

      &__tableAddColumns,
      &__tableAddRows {
        background-color: var(--theme-elevation-50);
      }

      &__tableAddColumns:hover,
      &__tableAddRows:hover {
        background-color: var(--theme-elevation-100);
      }
    }
  }
}
