@import 'modules/app/viewports';

.inline-edit-wrap {
  display: flex;

  /* word-break: break-word; */
  .caption {
    position: relative;

    width: 120px;
    min-width: 120px;
    margin-right: 5px;

    font-size: var(--caption-font-size);
    font-weight: var(--caption-font-weight);
    word-wrap: break-word;

    .required-asterisk {
      &::after {
        content: '*';
        margin-left: 3px;
        color: var(--default-color-red);
      }
    }

    .wrapper-field-caption {
      display: grid;
      grid-template-columns: auto auto;
      width: max-content;
    }
  }

  .tags-show-asterisk {
    ::ng-deep .viewer__item__title::after {
      content: '*';
      margin-left: 3px;
      color: var(--default-color-red);
    }
  }

  span.flex-between {
    width: 100%;
  }

  &:hover {
    .is_checked_object {
      visibility: visible;
    }
  }

  .status-deal {
    width: 100%;
    padding-bottom: 3px;
  }

  .inline-edit {
    cursor: auto;
    position: relative;
    display: inline-block;

    &:has(.inline-edit-text) {
      overflow: hidden;

      .inline-edit-text:has(.inline-edit-text-placeholder) {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    // overflow: hidden для родительских элементов color-picker'а ломает отображение попапа выбора цвета
    &.color-input {
      overflow: visible;
    }

    &.is-editing {
      width: calc(100% - 20px);
    }

    &.text-limit {
      overflow: hidden;
      display: -webkit-box !important;
      -webkit-box-orient: vertical;

      text-overflow: ellipsis;

      -webkit-line-clamp: 1;
      line-clamp: 1;
    }

    .inline-edit-text-placeholder {
      cursor: pointer;

      position: relative;

      color: var(--color-text-subtlest);
      text-decoration: none;
      white-space: nowrap;
    }

    .inline-edit-text {
      display: block;
      max-width: 300px;

      .inline-edit-item {
        cursor: pointer;
        display: block;

        &.item-title-name {
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;

          word-break: break-all;

          -webkit-line-clamp: 1;
        }
      }

      &.inline-field {
        display: inline;
        max-width: 100%;
      }

      &.preline {
        word-break: break-word;
        white-space: pre-line;
      }

      .app-inline-edit-link {
        cursor: pointer;

        &:hover {
          .pencil-in-array-icon {
            cursor: pointer;
            text-decoration: none;
            opacity: 1;
          }

          .inline-launch-icon {
            visibility: visible;
            transition-delay: 1s;
          }
        }

        .inline-edit-link-wrapp.text-limit {
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;

          text-overflow: ellipsis;

          -webkit-line-clamp: 1;
          line-clamp: 1;

          .invisible-items-count {
            /* background-color: var(--color-gray-ddd); */

            /* border-radius: 5px; */
            padding: 1px 4px;
            font-size: smaller;
            font-weight: 600;
            color: var(--color-gray-666);
          }
        }
      }
    }

    mat-form-field {
      width: 100%;
    }

    .input {
      scrollbar-width: none;

      overflow-y: scroll;
      display: inline-block;

      width: 100%;
      margin: 0;
      padding: 0;

      -ms-overflow-style: none;
    }

    .input::-webkit-scrollbar {
      display: none;
    }

    .input::placeholder {
      font-weight: 500;
      color: var(--color-gray-888);
    }

    .input-color-picker {
      cursor: pointer;
    }
  }

  &.persons-edit-wrap {
    ::ng-deep .mat-form-field mat-chip .chip-text {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;

      -webkit-line-clamp: 1;
    }

    .check-button {
      position: absolute;
      right: 20px;
      margin-top: -4px;
    }

    .inline-edit-wrapper .inline-edit .inline-edit-item {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;

      -webkit-line-clamp: 1;
    }
  }

  .buttons {
    margin-left: 3px;
  }

  .buttons.buttons-hover {
    display: flex;
    align-items: baseline;
    visibility: hidden;

    &.show {
      visibility: visible;
    }
  }

  &:hover .buttons.buttons-hover {
    display: flex;
    align-items: baseline;
    visibility: visible;

    .inline-launch-icon {
      visibility: visible;
      transition-delay: 0.5s;
    }
  }
}

.setting-form + .caption {
  width: 250px;
}

.mat-icon-button {
  width: 14px;
  height: 14px;
  font-size: inherit;
  line-height: 14px;
}

.inline-edit-button {
  position: relative;
  display: inline-block;

  .pencil-edit {
    width: 18px;
    height: 18px;
  }
}

.inline-quick-options {
  position: relative;
  right: 40px;

  .inline-quick-options-month {
    font-size: 11px;
  }

  .inline-quick-options-month span {
    display: inline-block;

    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;

    line-height: 32px;
    text-align: center;
    vertical-align: middle;
  }

  .inline-quick-options-month span:hover {
    cursor: pointer;
    color: #fff;
    background: #578be1;
  }
}

.inline-edit-button:hover .inline-quick-options {
  display: block;
}

.inline-quick-options ul {
  position: absolute;
  z-index: 100;

  width: 99px;

  background: var(--theme-hack-bg-color, #f6f9fe);
  border-radius: 2px;
  box-shadow: 0 1px 2px #777;
}

.inline-quick-options ul,
.inline-quick-options ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.inline-quick-options ul li {
  display: inline-block;
  margin-right: 1px;
}

.inline-quick-options ul li a {
  cursor: pointer;

  display: inline-block;

  width: 32px;
  height: 32px;

  font-size: 11px;
  line-height: 32px;
  text-align: center;
}

.inline-quick-options ul li a:hover {
  color: #fff;
  background: #578be1;
}

.reset-icon {
  position: relative;
  top: 4px;
  font-size: 16px;
}

.pencil {
  cursor: pointer;
}

.inline-launch-icon {
  cursor: pointer;

  position: relative;

  height: 18px;
  padding-right: 3px;

  visibility: hidden;
}

.app-inline-edit-link {
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  color: inherit;
  text-decoration: none;
}

.inline-edit-wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;

  // font-size: var(--value-font-size);
  // Саша Хромлюк и Максим Репьев раскурить и в как надо делать записать
  // flex-grow: 1;

  // overflow: hidden для родительских элементов color-picker'а ломает отображение попапа выбора цвета
  &:not(:has(.color-input)) {
    overflow: hidden;
  }
}

.app-empty-str-field {
  cursor: pointer;
  display: flex;
  color: var(--color-text-subtlest);

  .pencil-icon-in-empty {
    cursor: pointer;
    position: relative;
    padding-left: 3px;
    opacity: 0;
  }

  &:hover {
    .pencil-icon-in-empty {
      opacity: 1;
    }
  }
}

.pencil-in-array-icon {
  position: relative;
  height: 18px;
  opacity: 0;
}

.text-area-reader {
  background: var(--color-gray-fff, #fff);
}

.editor-actions {
  padding: 10px;
  background: var(--theme-hack-bg-color, #f9f9f9);
  border: solid 1px var(--theme-hack-color, #e5e5e5);
  border-top: none;

  .btn-save,
  .btn-cancel {
    transition: 0.2s all;
  }

  .btn-save {
    color: #fff;
    background: #27ae60;

    &:hover {
      background: #2ecc71;
    }

    &.disabled {
      cursor: not-allowed;
      opacity: 1;
      background-color: rgb(149 165 166);

      &:hover {
        opacity: rgb(149 165 166);
      }
    }
  }

  .btn-cancel {
    margin-left: 5px;
    color: #fff;
    background: #7f8c8d;

    &:hover {
      background: #95a5a6;
    }
  }
}

mat-form-field {
  margin: -15px 0;
}

.align-center {
  margin: 0 auto;
  text-align: center;
}

.align-flex-end {
  align-items: flex-end;
}

.is_checked_object {
  cursor: pointer;

  position: absolute;
  top: 0;
  left: -22px;

  width: 14px;

  &:hover {
    color: var(--color-gray-222);
  }
}

.hidden-block {
  display: none;
}

ngx-monaco-editor {
  width: 100%;
  height: 400px;
  padding: 3px;
  border: 1px solid var(--color-gray-aaa);
}

::ng-deep .mat-checkbox-checked .mat-checkbox-background {
  border: 2px solid var(--theme-hack-color, var(--default-color));
  border-radius: 2px;
  background-color: var(--theme-hack-color, var(--default-color)) !important;
}

.edit-icon-placeholder {
  width: 21px;
}

@mixin line-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: 100%;
}

@mixin line-clamp-n($line-clamp-length) {
  @include line-clamp;

  -webkit-line-clamp: $line-clamp-length;

  a.inline-edit-item {
    @include line-clamp;

    -webkit-line-clamp: $line-clamp-length;
  }
}

.line-clamp-1 {
  @include line-clamp-n(1);
}

.line-clamp-2 {
  @include line-clamp-n(2);
}

app-cmf-icon.check {
  color: var(--accent-color-bg);
}

/** Аттрибут disabled - выключает инлайн-едит */
:host[disabled] {
  pointer-events: none;
  user-select: none;
  opacity: 0.5;

  &* {
    pointer-events: none;
    user-select: none;
  }
}

::ng-deep .border-none {
  .mat-form-field-wrapper {
    padding: 0;
  }

  .mat-form-field-underline {
    display: none;
  }

  .mat-form-field-infix {
    padding: 0;
  }
}

.button-group-end {
  display: flex;
  align-self: flex-end;
}

.button-auto {
  width: auto;
}

.base-url-wrapper {
  display: flex;
  align-items: center;
}

.base-url-control {
  max-height: 25px;
}
// } - линтер добавляет лишнюю скобку