@import (reference) url('../../../../Dropdown.less');
@import (reference) url('../../../../Icon.less');
@import (reference) url('../../../../IconButton.less');
@import (reference) url('../../../../Text.less');

.ProseMirror-tableContainer {
  background: var(--color-gray1);
  margin: var(--Text-height) calc(0px - var(--gap-m));
  padding: var(--gap-m);
  position: relative;

  .ProsemirrorEnhancementMenu {
    left: 0;
    margin-bottom: 0;
    position: static;
    top: 0;
    visibility: visible;
    z-index: 1;

    ul {
      padding-left: 0;
    }
  }
}

.ProseMirror-tableHeading {
  .Icon.is-s;
  .Text.is-s;

  align-items: center;
  display: flex;
  justify-content: space-between;
}

.ProseMirror-tableTitle::before {
  .Icon;

  content: 'border_all';
  margin-right: var(--gap-xs);
}

.ProseMirror .ProseMirror-tableSubmenuList {
  margin: 0;
  padding: 0;

  li {
    display: inline-block;

    a {
      display: block;
      text-decoration: none !important;

      &[data-icon] {
        .IconButton;

        &::before {
          content: attr(data-icon);
        }
      }
    }

    a.remove {
      .IconButton.is-red;
    }
  }
}

.ProseMirror-tableMenu {
  .Dropdown;

  &.is-open {
    .Dropdown.is-open;
  }

  .ProseMirror-tableMenuList {
    list-style-type: none;
    margin: 0;
    padding: 0;

    > li {
      .Dropdown-item;

      cursor: pointer;

      &[disabled] {
        opacity: 0.5;
        pointer-events: none;
      }

      > a {
        display: block;
        width: 100%;
      }
    }
  }
}

.ProseMirror-table {
  border-collapse: separate;
  border-spacing: 1px;
  margin-top: calc(var(--gap-m) - 1px);
  overflow-x: auto;
  position: relative;
  table-layout: fixed;
  width: 100%;

  tbody {
    width: 100%;
  }

  td {
    background: var(--color-white);
    border: 1px solid var(--Input-borderColor);
    padding: var(--gap-xs) var(--gap-s);
    position: relative;

    .Enhancement-preview,
    .Enhancement {
      margin-left: 0;
      margin-right: 0;
    }

    &.is-selected-cell,
    &.selectedCell {
      border: 1px solid var(--color-blue5);
    }

    .ProsemirrorEnhancementMenu-container-button:is(
        .edit,
        .arrow_upward,
        .arrow_downward,
        .open_with
      ) {
      display: none;
    }
  }
}
