@use '../../../../styles/_globals.scss' as *;
@use 'task.component.mixins' as *;

// CONTROLS
// --------
.all-controls-wrapper {
  display: flex;
  flex-flow: row;
  position: relative;
  margin-left: var(--s);
  margin-right: var(--s-half);
  align-items: stretch;

  //@include verySmallMainContainer {
  //  flex-direction: column-reverse;
  //  align-items: flex-end;
  //  justify-content: center;
  //}
}

.controls {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  text-align: right;
  margin-right: var(--s-quarter);
  position: relative;

  button {
    margin-top: auto;
    margin-bottom: auto;
    height: 100% !important;
    min-height: 40px;
    border-radius: var(--card-border-radius);

    ::ng-deep {
      .mat-mdc-button-persistent-ripple {
        border-radius: var(--card-border-radius);
      }
    }

    &:hover {
      ////  background: var(--c-light-10);
      //
      //
    }
  }

  @include mq(xs, max) {
    white-space: normal;
    margin-left: 5px;
  }

  //@include smallMainContainer {
  //  white-space: normal;
  //  margin-left: 5px;
  //}

  //@include verySmallMainContainer {
  //  min-height: 40px;
  //}
}

// OTHER UI ELEMENTS
// -----------------
.title-and-tags-wrapper {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 180px;
  // we cannot do this since this cuts of the box shadow of the task edit
  //overflow: hidden;

  > * {
    @include touchOnlyDevice {
      pointer-events: none;
    }
  }

  // note: we use .tags-container, since we don't want margins for an empty list
  ::ng-deep .tags-container {
    // to match task title padding
    margin-left: 6px;
    margin-bottom: 5px;
  }
}

@mixin timeWrapperMinimalStyles() {
  .time {
    font-size: 13px;
    flex-direction: column;
  }

  .separator {
    border-top: 1px solid;
    height: 1px;
    opacity: 0.1;
    width: 100%;
  }
}

// TIME
.time-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-right: var(--s);
  z-index: var(--z-time-wrapper);
  // note: fixes styles for empty time for very small mobile
  min-width: 25px;
  //border: 1px solid red;

  @include mq(xxs) {
    min-width: 0;
  }

  @include verySmallMainContainer {
    display: none;
  }

  &.isEditable {
    cursor: pointer;

    &:hover {
      .time {
        transition: var(--transition-standard);
        opacity: 1 !important;
      }
    }
  }

  &.hasNoTimeSpentOrEstimate {
    display: none;
  }

  .time {
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    font-weight: 300;

    @include mq(xs) {
      opacity: 0.5;
      flex-direction: row;
    }
  }

  .time-val,
  .separator {
    display: block;
    white-space: nowrap;
  }

  .time-val {
    mat-icon {
      display: inline-flex;
      vertical-align: middle;
      height: 16px;
      margin-right: var(--s-quarter);
      margin-top: -2px;

      @include mq(xs, max) {
        margin-right: var(--s-quarter);
        height: 14px;
      }
    }

    span:not(:last-child) {
      margin-right: var(--s-quarter);
    }
  }

  .separator {
    padding: 0 var(--s-half);
  }

  //@include smallMainContainer {
  @include timeWrapperMinimalStyles;
  //}

  @include mq(xs, max) {
    @at-root .time-wrapper {
      margin-right: 0;
      @include timeWrapperMinimalStyles;

      @include isDoneForFirstLine {
        opacity: calc(var(--task-is-done-dim-opacity) + 0.1);
      }
    }
  }

  //@include verySmallMainContainer {
  //  flex-direction: row;
  //  &:after {
  //    display: none;
  //  }
  //  .time {
  //    flex-direction: row;
  //  }
  //  .separator {
  //    display: block;
  //  }
  //}
}

// Hide the time-wrapper while hover-controls are mounted: they're absolutely
// positioned over .time-wrapper and would let its digits ghost through on
// translucent themes (velvet, glass) and paint redundantly on solid ones.
// Angular only renders task-hover-controls on hover (non-touch), so :has()
// exactly matches the visibility intent without needing :hover guards.
.first-line:has(task-hover-controls) .time-wrapper {
  visibility: hidden;
}

.additional-info {
  display: block;
  // required as sort of a clearfix (fixes padding issue)
  overflow: hidden;
}

.drag-over-msg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 1;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
  z-index: var(--z-drag-over-msg);
}

progress-bar {
  z-index: var(--z-progress-bar);
}

// BUTTON STYLES
// -------------
.toggle-sub-tasks-btn,
.first-line ::ng-deep .ico-btn,
.first-line .ico-btn {
  margin: 0 var(--task-button-spacer);
  padding: 0;
  z-index: var(--z-btn);
  @extend %standardTaskOpacityChange;

  &:hover {
    z-index: var(--z-btn-hover);
  }

  &:focus {
    outline: none;
  }
}

.first-line .menu-trigger {
  @include mq(xs) {
    opacity: 0;
  }
}

.first-line:hover .menu-trigger {
  @include standardTaskOpacityChange;
}

.delete-btn {
  mat-icon.delete-icon {
    color: var(--c-warn) !important;
  }
}

done-toggle {
  --done-toggle-size: 34px;

  margin-left: var(--s);
  margin-right: 0;

  @include verySmallMainContainer {
    width: 8px;
    min-width: 0;
    opacity: 0;
  }
}

//
.play-icon-indicator {
  @include center;
  color: var(--c-accent);

  height: var(--play-icon-size);
  margin-top: 1px;
  width: var(--play-icon-size);
  font-size: var(--play-icon-size);
  line-height: var(--play-icon-size);
  opacity: 1 !important;
  z-index: 3;
  pointer-events: none;

  @include mq(xs) {
    margin-top: 0;
    //left: 10px;
  }

  //.first-line:hover & {
  //  display: none;
  //}
}

.ico-btn {
  color: inherit;

  &.mat-accent {
    color: var(--c-accent);
  }
}

.toggle-sub-tasks-btn,
.first-line .ico-btn {
  margin: auto var(--task-button-spacer);
  padding: 0;
  z-index: var(--z-btn);

  @extend %standardTaskOpacityChange;

  &:hover {
    z-index: var(--z-btn-hover);
  }

  &:focus {
    outline: none;
  }
}

.toggle-sub-tasks-btn.toggle-sub-tasks-btn {
  position: absolute !important;
  transform: translateY(-50%);
  left: -20px;
  top: 50%;
  z-index: var(--z-toggle-sub-task-btn) !important;
  min-width: 0;
  min-height: 0;
  width: 24px !important;
  height: 24px !important;
  margin-top: -1px !important;
  transform-origin: left top;
  transition-property: opacity, transform, background, box-shadow;
  box-shadow: none;
  background: var(--bg-lighter) !important;

  :host:hover & {
    opacity: 1;
  }

  mat-icon {
    transition: var(--transition-standard);
    font-size: 18px;
    width: 18px;
    height: 18px;

    &.isHideDoneTasks {
      transform: rotate(-45deg);
    }
  }
}

.attachment-btn,
.show-additional-info-btn {
  mat-icon {
    transition: transform var(--transition-standard);
  }
}

.start-task-btn {
  :host-context(.isHidePlayBtn) & {
    display: none !important;
  }
}

.parent-title {
  display: flex;
  align-items: center;
  padding-left: var(--s);
  padding-top: var(--s-half);
  margin-bottom: -2px;

  .title {
    font-size: 12px;
    @include truncateText();
  }
}

.schedule-btn {
  position: relative;
}

// Overdue indicator = the schedule icon itself, in the danger color. Driven by
// the semantic :host.isOverdue host state rather than Material's `color="warn"`
// modifier class, so the cue is decoupled from Material's theming internals and
// reads the same across light/dark/custom themes. !important wins over the
// Material icon-color token.
:host.isOverdue .schedule-btn mat-icon {
  color: var(--c-warn) !important;
}

// Time conflict indicator: a danger "!" shown next to the schedule control,
// replacing the former task-box border. It's a bare <mat-icon> dropped into the
// stretch-aligned controls row, so it needs explicit centering and sizing.
.time-conflict-ico {
  align-self: center;
  color: var(--c-warn);
  font-size: 20px;
  width: 20px;
  height: 20px;
  // tuck it close to the schedule button on its left, which it annotates
  margin-left: calc(-1 * var(--s-quarter));
}

.deadline-btn {
  position: relative;

  &.mat-warn mat-icon {
    color: var(--c-warn) !important;
  }

  &.mat-accent mat-icon {
    color: var(--c-accent) !important;
  }
}

.repeat-date-badge,
.time-badge {
  @include center;
  margin-top: 10px;
  font-size: 12px;
  z-index: 10;
  line-height: 1;
  text-align: center;
  padding: 1px var(--s-quarter) 0;
  @include extraBorder();
  border-radius: var(--card-border-radius);
  white-space: nowrap;
  background: var(--card-bg);

  // avoid affecting done toggle
  pointer-events: none;

  @include darkTheme() {
    border-color: var(--extra-border-color);
    background: var(--bg-lighter);
  }

  ::ng-deep span {
    font-size: 10px;
  }
}

.checklist-progress-btn {
  position: relative;

  &.isComplete mat-icon {
    color: var(--c-success, var(--c-accent));
  }
}

.checklist-progress-badge {
  @include center;
  margin-top: 10px;
  font-size: 10px;
  z-index: 10;
  line-height: 1;
  text-align: center;
  padding: 1px var(--s-quarter) 0;
  @include extraBorder();
  border-radius: var(--card-border-radius);
  white-space: nowrap;
  background: var(--card-bg);

  // let clicks fall through to the button
  pointer-events: none;

  @include darkTheme() {
    border-color: var(--extra-border-color);
    background: var(--bg-lighter);
  }
}

@media (min-width: #{$layout-sm}) and (max-width: #{$layout-xl - 1px}) {
  .closeBtn {
    min-width: 40px;
    margin-right: -29px !important;
  }
}

.tag-ico {
  font-size: 20px;
  line-height: 20px;
  height: 20px;
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--s-half);
}
