.wysiwyg-table {
  padding: var(--spacing-small) 0;

  @media (width < 767px) {
    padding: var(--spacing-big) 0;
  }

  .wysiwyg-table-content {
    overflow-x: auto;
    margin: 0 auto;
    max-width: var(--width-xlarge);
    padding: 0 var(--spacing-medium);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: var(--spacing-medium);

    @media (width > 768px) {
      font-size: var(--body-font-size-l);
      line-height: var(--body-line-height-l);
    }

    @media (width > 1400px) {
      font-size: var(--body-font-size-xl);
      line-height: var(--body-line-height-xl);
    }
  }

  table thead th {
    background-color: var(--color-neutral-720);
    color: var(--color-brand-secondary-675);
    font-weight: bold;
    text-align: center;
    padding: var(--spacing-xmsmall) var(--spacing-small);
    padding-right: var(--spacing-medium);
    border: 1px solid var(--color-neutral-50);
  }

  table tbody td {
    padding: var(--spacing-xmsmall) var(--spacing-small);
    padding-right: var(--spacing-medium);
    border: none;
    color: var(--color-neutral-950);
  }

  table tbody tr:nth-child(even) td {
    background-color: var(--color-neutral-720);
  }

  table tbody tr:nth-child(odd) td {
    background-color: var(--color-neutral-50);
  }

  &.toll-info{
    table{
      border-collapse: collapse;
      border-style: hidden;
      border-bottom-style: initial;
    }

    table thead th {
      background-color: #f7f7f7;
      border: 1px solid #979797;
      color: #666;
      font-size: 16px;
      text-align: left;
    }
    
    table tbody tr td {
      border: 1px solid #979797;
      color: #666;
      font-size: 16px;
    }
  }
  
  &.wysiwyg-table-primary {
    table thead th {
      text-align: left;
      background-color: var(--color-brand-secondary-600);
      color: var(--color-neutral-50);
      border: none;
      border-bottom: 4px solid var(--color-brand-650);
    }
  }
}

.wysiwyg-table-container {
  .wysiwyg-table-wrapper {
    max-width: initial;
    padding:0;
  }
}

/* tableEditorMode - START */
.table-editor-mode {
  .table-numbering {
    background: var(--color-brand-secondary-500) !important;
    color: #fff !important;
    font-weight: bold !important;
    text-align: center !important;

    &[data-synthetic="h"] {
      border: 1px solid var(--color-brand-secondary-700);
    }

    &[data-synthetic="v"] {
      border: 1px solid var(--color-brand-secondary-700);
    }
  }

  .table-rc-wrap {
    position: relative !important;
    z-index: 20;
    cursor: pointer;

    .table-rc-badge {
      display: block;
      align-self: flex-start;
      align-items: flex-start;
      font-size: 12px;
      line-height: 1.2;
      background-color: var(--color-neutral-900);
      color: #fff;
      padding: 4px 6px;
      border-radius: 3px;
      user-select: none;
      cursor: pointer;
      z-index: 2;

      &.copied {
        background-color: var(--color-positive-700) !important;
      }
    }

    &:hover {
      .table-rc-badge {
        background: var(--color-brand-600);
      }
    }
  }

  .missing-col-label {
    display: flex;
    flex-direction: column;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.2;
    background: var(--color-brand-200);

    b {
      font-weight: bolder;
    }

    em {
      color: rgb(0 0 0 / 75%);
    }
  }
}

.table-settings {
  display: none;
}

html.js-focus-visible:not(.adobe-ue-edit) {
  .table-editor-mode {
     .table-numbering {
      opacity: 0;
      border: 1px solid transparent !important;
    }

    .table-rc-wrap {
      .table-rc-badge {
        display: none;
      }
    }

    .missing-col-label {
      display: none;
    }


    &:hover {
      .table-numbering {
        opacity: 1;
        border: 1px solid var(--color-brand-secondary-700) !important;
      }

      .table-rc-wrap {
        .table-rc-badge {
          display: block;
        }
      }

      .missing-col-label {
        display: inline-flex;
      }
    }
  }
}

/* tableEditorMode - END */