:host {
  z-index: 1;
}

.task-card {
  position: absolute;
  z-index: 1000;
  right: 25px;
  bottom: 12px;

  width: 400px;

  background-color: var(--color-gray-fff);
  border-radius: 3px;
  box-shadow: var(--ds-shadow-overlay, 0 8px 12px #091e423f, 0 0 1px #091e424f);

  .body {
    overflow: overlay;
    max-height: 420px;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0 20px;
    padding: 10px 0;

    .close-button {
      margin-left: 12px;
    }
  }

  .title {
    display: flex;
    align-items: center;
    font-weight: bolder;
  }

  .footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 16px 16px 32px;
  }

  .more-button {
    display: flex;
    align-items: center;

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

  ::ng-deep .mat-progress-bar-fill::after {
    background-color: #1a65aa;
  }

  ::ng-deep .mat-progress-bar-buffer {
    background: #e4e8eb;
  }

  .task {
    position: relative;
    width: calc(100% - 18px);
    padding: 16px 24px 0 20px;

    &:last-child {
      padding-bottom: 16px;
    }

    mat-progress-bar {
      height: 7px;
      border-radius: 4px;
    }

    .description {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 4px;
    }

    .name {
      overflow: hidden;
      width: 250px;
    }

    .status {
      display: flex;
      align-items: center;

      &-success {
        color: #36b37e;
      }

      &-in-progress {
        color: #1a65aa;
      }

      &-cancel {
        color: var(--default-color-red);
      }

      app-cmf-doodle-icon {
        display: flex;
        margin-right: 4px;
      }
    }

    .close-button {
      position: absolute;
      top: 9px;
      right: 4px;
    }
  }
}

.button {
  cursor: pointer;
  color: #a0a0a0;

  &:hover {
    color: #323232;
  }
}

.task-card-open {
  .header {
    border-bottom: 1px solid #e6e9eb;
  }
}