@import './../../sdesk.mixins';

:host {
  display: flex;
  flex: 1;
  flex-flow: column nowrap;
}

.project,
.knowledge-base {
  h1 {
    margin: 8px 0 0;

    font-size: 1.71429em;
    font-weight: 500;
    font-style: inherit;
    line-height: 1.16667;
    color: var(--theme-hack-color, --sdesk-text-color, #182c4b);
    letter-spacing: -0.01em;
    word-break: break-word;
    white-space: pre-wrap;
  }

  h2 {
    font-size: 1.14286em;
    font-weight: 600;
    font-style: inherit;
    line-height: 1.25;
    color: var(--theme-hack-color, --sdesk-text-color, #182c4b);
    letter-spacing: -0.006em;
  }

  .header {
    display: flex;
    flex-flow: row nowrap;
  }
}

.breadcrumbs {
  @include sdesk-breadcrumbs;
}

.form-field mat-label.small {
  font-size: 11px;
  color: var(--color-gray-888);
}

.form-field .label {
  @include sdesk-label;

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

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

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

  padding-top: 24px;
}

button {
  cursor: pointer;

  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;

  max-width: 100%;
  height: 2.28571em;
  padding: 0 8px;

  font-size: inherit;
  font-weight: 500;
  font-style: normal;
  line-height: 2.28571em;
  white-space: nowrap;

  opacity: 1;
  border: none;
  border-radius: 3px;
  outline: none;

  transition: opacity 0.2s ease;

  &:disabled {
    cursor: default;
    opacity: 0.5;

    &:hover {
      opacity: 0.5;
    }
  }

  span {
    font-weight: 600;
    line-height: 1em;
  }

  &:hover {
    opacity: 0.7;
  }

  &.primary {
    color: #fff;
    background-color: var(--sdesk-content-background-color);
  }

  &.basic {
    color: var(--color-gray-222);
    background-color: var(--color-gray-fff);
  }
}

#dropZone ::ng-deep .ngx-file-drop__drop-zone {
  border: 2px dashed rgb(244 245 247);
  border-radius: 3px;
  transition: border-color 0.2s ease;

  &.ngx-file-drop__drop-zone--over {
    background: none;
    border-color: var(--sdesk-link-text-color);
  }

  .wrapper-upload-files .upload-files-mask {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
  }

  .wrapper-upload-files .upload-files-mask .upload-files-label {
    color: var(--color-gray-222);
  }
}

#isLoadingSpinner {
  margin: 0 15px;

  ::ng-deep circle {
    stroke: var(--sdesk-link-text-color);
  }
}

.attachment-list .size {
  margin: 0 4px;
  font-size: smaller;
  color: var(--color-gray-222);
}

.form-field {
  width: 100%;

  button.sdesk-button {
    @include sdesk-button;

    justify-content: space-between;
    width: 100%;
  }
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.field-fk.select-model-widget,
.field-m2m.select-models-widget {
  @include sdesk-button;

  display: flex;
  justify-content: space-between;
  width: 100%;
}

.field-m2m.select-models-widget {
  flex-wrap: wrap;
  height: fit-content;
}

.wrap-field {
  position: relative;
  display: flex;
  align-items: center;

  .icon {
    cursor: pointer;
    position: absolute;
    right: 8px;
    height: 100%;
  }

  .field-fk,
  .field-m2m {
    flex-grow: 2;
  }

  &:has(.edit-mode) .icon {
    visibility: hidden;
  }
}

wg-task-form-data-edit {
  display: block;
  margin-top: 20px;
}

// Fixme: Пока на портале цвет бордера отличается от кубиков
:host ::ng-deep wg-readonly-view[data-appearance='outline']::after {
  border-color: var(--color-gray-888);
}

// Добавляем отступ только если есть выбранные опции
// т.к. в самом виджете padding обнулены
:host ::ng-deep .field-m2m.select-models-widget ul:has(li) {
  padding-top: 5px;
}

// Выравниваем дропдаун относительно кнокпи
::ng-deep .mat-autocomplete-panel.dropdown-widget {
  position: static;
}