@use './cmf-task.lib.scss' as lib;
@use './cmf-task.data.scss' as data;
@use '../../../../common/angular/cmf-ui/widgets/status-dropdown-button/status-dropdown-button.lib.scss' as
  statusDropdownLib;

@mixin flexStart {
  display: flex;
  align-items: flex-start;
}

$rightBlockSize: 420px;
$color-red: var(--default-color-red);

:host {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 100%;

  color: data.$textColor;

  .body {
    position: relative;
    overflow: hidden auto;

    &__full {
      overflow-y: unset;
      margin-left: -6px;
      padding: 24px 16px 24px 0;

      @media (width >= 1950px) {
        $fullScreenHDWidth: 1645px;

        display: flex;
        flex-direction: column;

        min-width: $fullScreenHDWidth;
        max-width: $fullScreenHDWidth;
        margin-right: auto;
        margin-left: auto;
      }
    }
  }

  .toolbar {
    @include flexStart;

    position: sticky;
    z-index: 9999;
    top: 0;

    justify-content: space-between;

    padding: 23px 20px 5px 32px;

    background-color: var(--default-background-overlay);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    &__left {
      margin-top: 8px;
      margin-left: 3px;

      &-full {
        margin-left: -14px;
      }
    }

    &__right {
      position: relative;
      top: 6px;
      right: 1px;

      display: flex;
      gap: 6px;
      align-items: center;
      justify-content: flex-end;

      app-cmf-icon,
      app-cmf-doodle-icon {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .task-deadline-icon {
        cursor: pointer;
        transform: translateY(-2px);
      }

      .spectators-eye-widget {
        margin-right: 5px;

        &:not(.filled) {
          color: var(--color-gray-222);
        }
      }

      .like-icon {
        cursor: pointer;
        transform: translateY(-1px);
        margin-right: 4px;
      }

      .magic-lock-icon {
        transform: translateY(-1px);
        margin-right: 4px;
      }

      .toggle-screen-arrow {
        cursor: pointer;
        transform: translateY(-0.5px);
        margin: 0 4.5px;
      }

      .open-settings-button {
        cursor: pointer;
        transform: rotate(90deg) translateX(0.5px);
        margin-right: 1px;
      }

      .task-close-popup {
        cursor: pointer;
      }
    }

    &__full {
      margin-left: 6px;
    }

    &.full {
      background: none;
    }

    &__favorites {
      display: flex;
      justify-content: center;
      width: 30px;
    }

    &__list-view-change {
      margin-right: -4px;
      margin-left: 3px;
    }
  }

  .uwork-code-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 16px;
  }

  .feed-edit {
    &__header {
      &__breadcrumbs {
        @include flexStart;
        @include lib.textEllipsis(a, 200px);

        align-items: center;
        color: var(--color-gray-888);

        .cmf-interactive-item {
          display: flex;

          &:hover .inline-pencil-icon {
            visibility: visible;
          }
        }

        .separator {
          padding: 0 11px 0 10px;
        }

        .parent-editor {
          display: none;

          &.visible {
            display: block;
          }
        }

        .inline-pencil-icon {
          position: relative;
          top: -14px;
          right: 5px;

          width: 0;
          height: 0;

          visibility: hidden;
        }

        .uwork-code {
          display: flex;
          align-items: center;

          &-icon {
            cursor: pointer;
            margin-left: 5px;
            visibility: hidden;
          }

          &:hover .uwork-code-icon {
            visibility: visible;
          }
        }
      }
    }
  }

  .content {
    display: flex;
    padding: 0 20px 24px 32px;

    &__full {
      margin-left: 20px;
      padding-left: 0;
    }

    &__left {
      width: calc(100% - 420px);
      min-width: 380px;
      padding-right: 50px;

      .content-item {
        display: block;
        margin-bottom: 27px;
      }

      &-full {
        padding-right: 32px;

        @media (width >= 1950px) {
          width: 1170px;
        }
      }
    }

    &__right {
      width: $rightBlockSize;
      min-width: $rightBlockSize;
      margin-top: 5px;

      &-wrapper {
        width: 100%;
        margin-top: 14px;
      }
    }

    .form {
      position: relative;
      flex: 0 100%;

      &__header {
        justify-content: space-between;
        margin-top: 42px;
        padding: 0;
        padding-bottom: 20px;

        .task-from-to {
          display: flex;
          align-items: flex-start;

          .avatar {
            width: 32px;
            height: 32px;
            margin-right: 10px;

            font-size: 32px;
            line-height: 32px;
            color: #fff;
            text-align: center;

            background: #777;
            border-radius: 50%;
          }

          .row {
            margin-bottom: 8px;

            &.detail {
              display: grid;
              grid-template-columns: repeat(1, max-content);

              font-size: 14px;
              font-weight: 400;
              color: #777;

              .list-release-hidden {
                opacity: 0;
              }

              &:hover .list-release-hidden {
                opacity: 1;
              }

              .cmf-interactive-item {
                display: flex;
                align-items: center;

                &:hover .inline-launch-icon {
                  max-width: fit-content;
                  visibility: visible;
                  transition-delay: 1s;
                }

                &:hover .inline-pencil-icon {
                  max-width: fit-content;
                  visibility: visible;
                }

                .inline-launch-icon {
                  position: relative;
                  top: 1px;

                  width: 18px;
                  max-width: 0;
                  height: 18px;
                  margin-left: 4px;

                  visibility: hidden;
                }
              }
            }

            .from__wrapper {
              display: flex;
              gap: 5px;

              .responsible-container {
                display: flex;

                &:hover .edit-menu-trigger {
                  visibility: visible;
                }

                .edit-menu-trigger {
                  cursor: pointer;
                  visibility: hidden;
                }
              }
            }
          }
        }
      }

      &__title {
        display: inline-flex;
        align-items: baseline;

        width: 100%;
        margin-top: 12px;
        margin-bottom: 25px;
        margin-block: 1em;

        font-family: var(--header-font);
        font-weight: var(--font-header-weight);

        .task-name-edit {
          display: block;

          width: 100%;

          font-size: 24px;
          line-height: var(--default-line-height);
          color: data.$textColor;
        }

        .priority-icon {
          margin-right: 5px;
          padding-top: 5px;
        }
      }

      &__description {
        position: relative;

        .action-viewform {
          position: absolute;
          top: 5px;
          right: 5px;

          display: flex;
          gap: 7px;

          &__close {
            cursor: pointer;
          }
        }

        .request-type-description {
          margin-bottom: 20px;
          padding: 15px;
          background-color: var(--theme-hack-bg2-color, #eff8fc);
          border-radius: 10px;
        }
      }

      &__actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;

        app-cmf-doodle-icon {
          display: flex;
        }

        & .form-action:last-child {
          margin-left: auto;
        }

        .form-action > app-cmf-doodle-icon {
          margin-right: 5px;
        }

        .form-action.comments-sort > app-cmf-doodle-icon {
          margin-right: 0;
        }

        .form-action-comment {
          margin-left: 5px;
        }

        .form-action {
          .icon-subtask,
          .icon-related-task {
            margin-right: 3px;
          }
        }

        .add-related-task,
        .app-add-subtask-button,
        .app-change-audit-button,
        .comments-sort,
        .app-add-attachment-button,
        .more-actions,
        .add-more {
          cursor: pointer;
          font-size: 12px;
          line-height: 20px;
          color: data.$actionsColor;
        }

        .app-add-attachment-button {
          padding-right: 10px;
          padding-left: 0;
          border: none;
        }

        .app-add-subtask-button,
        .add-related-task,
        .app-change-audit-button,
        .add-more {
          padding-right: 10px;
        }

        .app-change-audit-button {
          display: flex;
        }

        .comments-filter-icon {
          display: flex;
          align-items: center;
          margin-left: 0;
        }

        .add-more {
          display: flex;
          align-items: center;
        }

        .add-related-task {
          display: flex;

          &__more-btn {
            display: flex;
            align-items: center;
            margin-left: 0;
          }
        }
      }

      &__footer {
        margin-top: 14px;
        margin-bottom: 20px;
        padding-top: 0;
        transition: 0.3s;
      }

      .task-result {
        width: 100%;

        .task-result__title {
          font-size: 18px;
          font-weight: 600;
        }
      }
    }
  }

  .dummy-actions {
    display: flex;
    justify-content: flex-end;

    padding-top: 15px;
    padding-right: 36px;
    padding-bottom: 15px;

    background: var(--default-background-overlay);
    border: 1px solid var(--color-gray-eee);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;

    &__left {
      display: flex;
      align-items: center;
      margin-right: 5px;

      &__counter {
        padding-left: 25px;
        color: var(--color-gray-888);
      }
    }

    .dummy-save-btn {
      margin-left: 10px;
    }
  }

  .uwork__hint {
    position: relative;
    top: 2px;
    left: 2px;
  }

  .from__owner,
  .from__responsible {
    font-weight: 500;
  }

  .feed-edit__header__breadcrumbs .inline-pencil-icon.parent-edit {
    top: -5px;
    right: -5px;
    margin-right: 0;
  }
}

.feed-edit__header__breadcrumbs {
  flex-wrap: wrap;
  margin-left: 1px;
}

.breadcrumb-wrapper {
  display: flex;
  margin-bottom: 7px;
  line-height: 18px;
}

.feed-edit__header__breadcrumbs .breadcrumb-wrapper:not(:last-child)::after {
  content: '/';
  padding: 0 11px 0 10px;
}

.edit-menu-container {
  margin: -18px -3px 0;
  background: var(--color-gray-fff);

  .edit-menu-waiting-for-container {
    display: flex;
    gap: 10px;

    .label {
      font-weight: 500;
    }
  }
}

:host ::ng-deep {
  .inline-edit-wrapper {
    max-width: 100%;
    font-size: var(--value-font-size);
  }

  .empty-warn,
  .task-name-edit.invalid {
    .inline-edit-text-placeholder {
      color: $color-red !important;
    }
  }

  .task-name-edit.required .inline-edit-text-placeholder,
  .task-name-edit.required .inline-edit-item {
    &::after {
      content: '*';

      position: absolute;
      top: -10px;
      right: -10px;

      color: $color-red;
    }
  }

  .parent-block {
    :hover .inline-pencil-icon {
      visibility: visible;
    }

    &.required {
      .required-block {
        position: relative;

        &::after {
          content: '*';

          position: absolute;
          top: -5px;
          right: -5px;

          color: $color-red;
        }
      }
    }
  }

  .parent-item.required,
  .parent-editor.required .inline-edit-text-placeholder {
    position: relative;

    &::after {
      content: '*';

      position: absolute;
      top: -6px;
      right: -5px;

      color: $color-red;
    }
  }

  .prewrap-placeholder .inline-edit-wrap .inline-edit .inline-edit-text .inline-edit-text-placeholder {
    word-break: break-word;
    white-space: pre-wrap;
  }
}

.app-feed-executor-link {
  color: inherit;
  text-decoration: none;
}

.add-related-task__more-menu {
  max-width: 400px;
  padding: 5px 0;

  background-color: var(--app-bg-color-l1);
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 0 rgb(25 25 25 / 40%);

  .more-menu-item {
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 10px 15px;

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

    &__icon {
      display: flex;
      align-items: center;
    }
  }
}

:host ::ng-deep {
  .task-name-edit .inline-edit-wrap .inline-edit .inline-edit-text span.inline-edit-text-placeholder {
    color: var(--color-gray-222);
  }

  @each $gridColumn in lib.$gridColumns {
    [grid-area='#{$gridColumn}'] {
      grid-area: $gridColumn;
    }
  }
}

.activity-title {
  cursor: pointer;

  display: flex;

  margin-top: 0;
  margin-bottom: 16px;

  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-transform: capitalize;

  .titleArrow {
    display: flex;
    align-items: center;
    margin-left: 4px;
    visibility: hidden;
  }

  &:hover,
  &.force-visible-arrow {
    .titleArrow {
      visibility: visible;
    }
  }
}

.form-action {
  display: flex;
  align-items: center;
}

.toolbar-edit-item {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  line-height: 16px;
}

.status-wrapper {
  display: flex;
  margin-bottom: 8px;
}

wg-crud-detail-accordion {
  width: 100%;
}

frm-task-tabs,
.form-group-widget:not(.included) {
  display: block;

  &.hidden {
    display: none;
  }
}

[name='smartComment'] {
  position: relative;
  top: 1px;
}

.toolbar-icon,
.magic-lock-icon {
  cursor: pointer;
}

.task-deadline {
  position: relative;
  display: flex;
  max-height: 27px;
  margin-right: 5.5px;
}

.inline-quick-options {
  width: min-content;

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

  .inline-quick-options-month span {
    cursor: pointer;

    display: inline-block;

    width: 36px;
    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;
  }
}

.calendar-trigger-icon {
  cursor: pointer;
}

.inline-quick-options-value {
  display: flex;
  gap: 3px;
  justify-content: space-between;

  width: 150px;
  margin-bottom: 3px;
  padding: 10px 10px 5px;

  font-size: 12px;

  border-bottom: 1px solid var(--color-gray-ddd);
}

.inline-quick-options .panel {
  z-index: 100;
  background: var(--color-gray-fff);
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 #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: 39px;
  height: 32px;

  font-size: 11px;
  line-height: 32px;

  &.interval-reset-btn {
    padding-left: 5px;
  }

  &:hover {
    cursor: pointer;
    color: #fff;
    background: #578be1;
  }
}

.inline-quick-options ul {
  width: 100%;
  padding-left: 14px;
}

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

.button-widget {
  @include statusDropdownLib.workflow-button-mixin;
}

:host ::ng-deep {
  .cmf-inline-crud-person-caption.cmf-inline-crud-caption,
  .inline-edit-wrap .caption {
    color: var(--color-gray-444);
  }
}

.form-header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;

  .tag-list {
    padding: 2px 4px;

    font-size: 12px;
    color: #1f75cb;

    background-color: color-mix(in srgb, #e9f3fc 15%, var(--theme-hack-bg-color, #e9f3fc));
    border-radius: 4px;
  }
}

.form-obj-msg {
  position: absolute;
  z-index: 10000;
  top: 7px;
  left: 10px;

  padding: 0 4px;

  font-size: 12px;

  border-radius: 4px;

  &.archived {
    color: var(--color-gray-444);
    background-color: var(--color-gray-eee);
  }

  &.template {
    color: rgb(30 136 72);
    background-color: color-mix(in srgb, rgb(35 160 85) 20%, white);
  }
}

.activity-disable {
  pointer-events: none;
}

.activity-matmenu-button {
  display: flex;
  align-items: center;

  app-cmf-doodle-icon {
    display: flex;
    align-items: center;
    margin-right: 5px;
  }
}

.comment-sort-icon {
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.resolution-field-dropdown-widget {
  overflow: hidden;
  margin-left: 14px;
}

.description-editor {
  display: flex;
}

.crypto-warning {
  cursor: pointer;
  font-style: italic;
  color: var(--color-href);
  text-decoration: underline;
}

.encryption-process {
  display: flex;
  flex-flow: row;
  gap: 8px;

  ::ng-deep .mat-progress-spinner circle {
    color: var(--color-href);
    stroke: var(--color-href);
  }
}

.icon-container {
  margin-right: 5px;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
}

.block-expand {
  max-height: 18px;
}