$gray: #c5c5c5;
$darkGray: gray;
$border: 1px solid $gray;

.right {
  display: flex;
  flex-direction: column;
  gap: 20px;

  min-width: 50vw;
  height: 50vh;
  padding: 16px 0 0 16px;
}

.left {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;

  min-width: 300px;
  height: 50vh;
  padding: 16px;

  border-right: 1px solid #c5c5c5;
}

.cmf-dialog__header {
  margin: 0;
}

.ubql-label {
  display: flex;
  gap: 5px;
}

.filter-editor {
  margin-right: 16px;
}

.input {
  flex: 1;

  padding: 4px 8px 4px 22px;

  background: transparent;
  border: $border;
  border-radius: 3px;

  transition: border-color 0.2s ease;

  &:focus-visible {
    border-color: $darkGray;
    outline: none;
  }
}

.name {
  position: relative;
  top: 1px;
  display: flex;
  align-items: center;
}

ul {
  margin: 0;
  padding-left: 0;
}

.search-icon {
  position: absolute;
  left: 6px;
}

.buttons {
  display: flex;
  flex-flow: row;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;

  button {
    cursor: pointer;

    margin: 0;

    font-weight: 600;
    color: var(--color-href);

    background: none;
    border: none;
  }
}

:host {
  .header {
    margin: 0;
    font-size: 20px;
    line-height: 50px;
  }

  .wrapper {
    display: flex;

    wg-wiki-ui-input-dumb {
      margin-right: 16px;
    }

    frm-test-choice-list {
      scrollbar-width: thin;
      overflow-y: auto;
    }
  }
}