.answer-template {
  overflow-x: hidden;
  display: grid;
  grid-template-rows: 1fr 82% 2fr;
  gap: 10px;

  width: 35vw;
  height: 55vh;
  padding: 20px;

  &__title {
    font-size: 19px;
  }

  &__body {
    display: grid;
    grid-template-columns: 35% 65%;
    border: 1px solid var(--color-gray-aaa);
    border-radius: 7px;
  }

  .list {
    overflow: hidden;
    display: grid;
    grid-template-rows: 54px 1fr;

    max-height: 100%;

    border-right: 1px solid var(--color-gray-aaa);

    &__search {
      padding: 10px 15px;

      ::ng-deep .search-input {
        width: 100%;

        .search-field {
          min-width: auto;
        }
      }
    }

    &__groups {
      .group__title {
        padding: 10px 15px;
        color: var(--color-gray-888);
      }

      .group__item {
        cursor: pointer;

        overflow: hidden;

        padding: 7px 15px;

        color: #3e516d;
        text-overflow: ellipsis;
        white-space: nowrap;

        &.select {
          background-color: var(--menu-item-active-color-bg);
        }
      }

      .group__more-btn {
        display: inline-block;
        margin: 5px 15px;
      }
    }
  }

  .preview {
    padding: 15px;

    &__header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 22px;

      .type {
        padding: 2px;

        font-size: 11px;
        font-weight: 600;
        color: var(--header-panel-color-bg);
        letter-spacing: 0.3px;

        background-color: #deebfe;
        border-radius: 3px;
      }

      .actions {
        display: flex;
        gap: 10px;

        .edit-btn,
        .remove-btn {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    &__field {
      &:not(:first-child) {
        margin-top: 18px;
      }

      .caption {
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 600;
      }
    }
  }

  &__actions {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;

    .left {
      display: flex;
      align-items: center;
    }

    .right {
      display: flex;
      gap: 10px;
    }
  }

  .button {
    cursor: pointer;
    color: #0053a0;
  }

  .disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
  }
}