@use '../../../../styles/_globals.scss' as *;

:host {
  //border: 1px solid var(--c-light-20);
  border: 1px solid var(--extra-border-color);
  border-radius: 8px;
  min-height: 200px;
  min-width: 280px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 100%;
  // space for outline
  padding: 1px;

  @include mq(xs, max) {
    min-height: 300px;
  }

  planner-task {
    margin-bottom: 8px;
    margin-right: 4px;
  }

  add-task-inline {
    display: block;
  }
}

header {
  padding: 4px 16px;
  padding-right: 4px;
  display: flex;
  align-items: center;

  //@include mousePrimaryDevice() {
  //  button {
  //    opacity: 0;
  //  }
  //  &:hover {
  //    button {
  //      opacity: 1;
  //    }
  //  }
  //}

  button {
    //margin-left: auto;
    margin-left: 10px;
    opacity: 0.7;

    &:hover {
      opacity: 1;
    }
  }

  .title {
    font-size: 14px;
    margin-right: 8px;
  }

  .tasks-total-estimate {
    white-space: nowrap;
    margin-left: auto;
    margin-right: 4px;
    //margin-right: auto;
    font-style: italic;
    opacity: 0.7;
  }
}

.task-items {
  overflow: auto;
  padding: 0 8px;
  border-radius: 8px;
  min-height: 100px;
  flex-grow: 1;
  //border-color: var(--extra-border-color);
}

.empty {
  text-align: center;
  font-style: italic;
  line-height: var(--planner-item-height);
}

.schedule-btn {
  opacity: 0.7;
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
  height: 100% !important;
  border-radius: var(--card-border-radius);

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

  &:hover {
    opacity: 1;
  }
}

.time-badge {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  margin-top: 10px;
  font-size: 12px;
  z-index: 10;
  line-height: 1;
  text-align: center;
  padding: 1px 2px 0;
  border: 1px solid var(--extra-border-color);
  border-radius: var(--card-border-radius);
  white-space: nowrap;

  // avoid affecting drag handle
  pointer-events: none;

  border-color: var(--extra-border-color);
  background: var(--bg-lighter);

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