:host {
  display: block;

  width: 60vw;
  max-width: 1660px;
  height: 65vh;
  max-height: 800px;

  .cmf-dialog {
    display: flex;
    flex-direction: column;
    height: 100%;

    .cmf-dialog__content {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      gap: 10px;

      .template {
        display: grid;
        flex-grow: 1;

        // TODO: превью шаблона в следущей версии шаблонов [SD-1625011305]
        // grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding-bottom: 20px;

        .template-editor,
        .template-preview {
          display: grid;
          grid-template-rows: 25px 1fr 40px;
          gap: 15px;
        }

        .template-editor .editor-wrap,
        .template-preview .preview {
          padding: 5px;
          border: 1px solid var(--color-gray-444);
          border-radius: 5px;
        }

        .editor {
          height: 100%; // где-то выставляется 'height: 200px;'
        }
      }

      .template-editor .tabs {
        position: relative;
        display: flex;
        align-items: center;
        border-bottom: 2px solid var(--color-gray-eee);

        .tab {
          cursor: pointer;

          position: relative;

          min-width: 90px;
          margin-right: 10px;
          padding: 0 2px 4px;

          font-weight: 500;
          color: var(--color-gray-444);
          text-align: center;

          &.active {
            color: var(--menu-item-selected-color);
          }
        }

        .tab.active::before {
          content: '';

          position: absolute;
          bottom: -2px;
          left: 0;

          width: 100%;
          height: 2px;

          background-color: var(--menu-item-selected-color);
        }
      }
    }
  }
}