.property-configure {
  .form-input, .form-select {
    line-height: 1rem;
    padding: 0.25rem 0.5rem;
  }
}

.property-value-content {
  cursor: text;
  min-height: 24px;
}

.property-configure-popup-content {
  @apply min-w-[700px] p-2 overflow-auto;

  /*noinspection CssUnresolvedCustomProperty*/
  max-height: var(--radix-dropdown-menu-content-available-height);
}

.property-block-container {
  @apply -ml-5 flex flex-1;
}

.ls-page-properties > .ls-properties-area > .property-block {
  margin-left: -22px;
}

.ls-block .ls-properties-area {
  margin-left: 0;
}

.ls-block .property-pair,
.property-block .property-value,
.block-property-value {
  margin-left: 7px;
}

.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, 120px);
}

.ls-block .ls-properties-area {
  margin-top: 2px;
}

.ls-properties-area {
  @apply grid;

  .property-pair {
    @apply grid grid-cols-5 gap-1;

    .jtrigger {
      @apply relative;

      &-id {
        @apply absolute left-[-22px] top-[2px] rounded-full leading-none
        flex items-center justify-center bg-primary text-primary-foreground border-none
        text-xs min-w-[20px] min-h-[20px] scale-95;
      }
    }

    .jtrigger-view {
      > .jtrigger-id {
        @apply left-[-14px];
      }

      &:has(> .jtrigger-id) {
        .property-m {
          @apply invisible;
        }
      }
    }

    .property-k {
      .jtrigger {
        &-id {
          @apply left-[16px];
        }
      }

      @apply inline-block overflow-hidden text-ellipsis whitespace-nowrap;
    }

    .property-value {
      @apply pl-1;

      .jtrigger-id {
        @apply left-[-34px] top-[2px];
      }

      &-inner[data-type=checkbox] {
        .jtrigger-id {
          @apply left-[-44px] top-[-2px];
        }
      }

      &-inner[data-type=date] {
        .jtrigger-id {
          @apply top-[4px];
        }

        &.empty-value {
          @apply -ml-1;

          .multi-values {
            @apply gap-0;
          }
        }
      }
    }
  }

  .add-button-link {
    opacity: 0.5;
  }

  tr:nth-child(even), tr:nth-child(odd) {
    background: none;
  }

  .editor-inner {
    padding: 0;
    width: 100%;
  }

  .cp__select-main {
    width: fit-content;
    margin: 0;

    .ui__dropdown-trigger {
      position: absolute;

      .dropdown-wrapper {
        left: 0;
      }
    }
  }

  .cp__select .input-wrap {
    height: auto;
    min-width: 14em;
  }

  .cp__select .input-wrap input.cp__select-input {
    border: none;
  }

  .cp__select .input-wrap input.cp__select-input:focus {
    outline: none;
    box-shadow: none;
  }

  .ls-block {
    @apply w-full;
    margin: 0;
  }

  .property-key a {
    color: var(--ls-primary-text-color);
  }

  .property-key a:hover {
    color: var(--ls-link-text-hover-color);
  }

  .multi-values {
    @apply cursor-pointer active:opacity-80;
  }
}

.ui__button.empty-btn, .empty-text-btn {
  @apply !h-6 !px-0 font-normal opacity-50 text-sm;
}

.ui__button.empty-btn:hover, .empty-text-btn:hover {
  @apply opacity-100;
}


.positioned-properties, .property-value-inner {
  .select-item {
    @apply flex items-center;
  }

  .ls-icon-priorityLvlUrgent {
    @apply text-orange-rx-08;
  }
}

.block-main-container .ls-properties-area {
  margin-top: 0.25em;
}

input.simple-input {
  @apply px-1;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid;
}

input.simple-input:focus {
  box-shadow: none;
}

.page-configure {
  @screen md {
    max-width: 720px;
  }
}

.property-key .bullet-container, .property-key .bullet-container .bullet {
  border-radius: 0px;
}

/* TODO:  */
.page-add-tags, .page-tags, .property-select, .ls-property-add,
.property-configure, .ui__dropdown-menu-content {
  .cp__select-main {
    width: fit-content;
    margin: 0;

    .ui__dropdown-trigger {
      position: absolute;

      .dropdown-wrapper {
        left: 0;
      }
    }

    .item-results-wrap {
      max-height: calc(var(--palettle-container-height) - var(--palettle-input-height) - 150px);
    }
  }

  .cp__select .input-wrap {
    height: auto;
    min-width: 14em;
  }

  .cp__select .input-wrap input.cp__select-input {
    border: none;
  }

  .cp__select .input-wrap input.cp__select-input:focus {
    outline: none;
    box-shadow: none;
  }
}

.page-title .page-tags {
  font-size: 1em;
  font-weight: 400;
}

a.control-link {
  @apply select-none;
  color: var(--ls-primary-text-color);

  span {
    @apply select-none;
  }
}

.property-value-container {
  min-height: 29px;
}

.ls-page-properties .property-key, .ls-properties-area .property-key {
  @apply flex flex-col justify-center;
}

.property-key {
  /* Same height with one-line block container */
  min-height: 29px;

  h1.title, h2.title {
    border-bottom: 0;
    padding-bottom: 0;
  }

  h1.title {
    margin-bottom: 1.5rem;
  }

  h2.title {
    margin-bottom: 1rem;
  }
}

.property-key-inner {
  @apply flex flex-row items-center gap-1 relative;
}

.property-select {
  .menu-link:hover, a.menu-link.chosen {
    .iconTablerExtBacklog {
      @apply text-gray-08;
    }

    .iconTablerExtCancelled {
      @apply text-red-rx-09;
    }
  }
}

.ls-page-title .ls-page-properties {
  @apply mt-4;
}

.ls-property-add {
  .cp__select-input {
    padding: 0.25em 0.75em;
  }
}

.ls-property-dropdown-editor {
  @apply w-[300px] p-1.5;

  .ui__dropdown-menu-item, .ui__dropdown-menu-sub-trigger {
  }

  [role=separator] {
    @apply my-2;
  }

  .inner-wrap {
    @apply flex items-center w-full justify-between;

    > strong {
      @apply flex items-center gap-1 font-normal opacity-90;
    }

    > label {
      @apply text-xs flex items-center opacity-50;
    }

    &.disabled {
      @apply opacity-70 select-none cursor-not-allowed;

      > label {
        @apply flex items-center gap-1 opacity-40 relative top-[2px] right-[1px];
      }
    }

    & + svg {
      @apply opacity-30;
    }

    .ui__switch {
      @apply relative top-[1px];
    }
  }
}

.ls-property-name-edit-pane,
.ls-base-edit-form {
  @apply px-2 pt-2 pb-1;

  > .input-wrap {
    @apply gap-1.5;

    > .ui__button:first-child {
      @apply px-0 py-0 !w-9 border overflow-hidden;

      > span {
        @apply flex items-center;
      }
    }

    > .ui__input:last-child {
      @apply !h-[29px] px-2;
    }
  }
}

.ui__dropdown-menu-sub-content {
  .cp__select-main {
    @apply -mx-4 my-0;
  }
}

.ls-property-choices-sub-pane {
  @apply w-[220px] p-0;

  > ul.choices-list {
    @apply m-0 px-1.5 pt-1 pb-1;

    li {
      @apply flex items-center gap-1 relative;

      .ls-icon-grip-vertical {
        @apply opacity-50 cursor-move active:opacity-80;
      }

      > strong {
        @apply text-sm px-0.5 flex-grow cursor-pointer font-normal
        select-none active:opacity-60;
      }

      > .ui__button {
        @apply !p-0 !w-7 !h-7 overflow-hidden flex-shrink-0;
      }

      > a.del {
        @apply items-center absolute right-0 top-0 px-1 py-[7px] scale-90 hidden
        opacity-80 hover:opacity-100 active:opacity-80 text-gray-08 hover:text-red-700;
      }

      &:hover a.del {
        @apply flex;
      }

      &:hover .ls-icon-grip-vertical {
        @apply opacity-80;
      }
    }
  }
}

.ls-property-ui-position-sub-pane {
  @apply w-[240px] p-0;
}
