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

@layer payload-default {
  .LexicalEditorTheme {
    &__table {
      border-collapse: collapse;
      max-width: 100%;
      border-spacing: 0;
      overflow-y: scroll;
      overflow-x: scroll;
      table-layout: fixed;
      width: fit-content;
      margin: 0 25px 30px 0;

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

      br::selection {
        background: unset;
      }
    }

    &__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;
    }

    &__tableCellSortedIndicator {
      display: block;
      opacity: 0.5;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background-color: #999;
    }

    &__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 {
      background-color: #c9dbf0;
    }

    &__tableCellPrimarySelected {
      border: 2px solid rgb(60, 132, 244);
      display: block;
      height: calc(100% - 2px);
      position: absolute;
      width: calc(100% - 2px);
      left: -1px;
      top: -1px;
      z-index: 2;
    }

    &__tableCellEditing {
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
      border-radius: $style-radius-m;
    }

    &__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 {
      background-image: url(../../../../../lexical/ui/icons/Add/index.svg);
      background-position: center;
      background-repeat: no-repeat;
      display: block;
      content: ' ';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.4;
    }

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

    &__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);
      }

      &__tableAddColumns:after,
      &__tableAddRows:after {
        background-image: url(../../../../../lexical/ui/icons/Add/light.svg);
      }
    }
  }
}
