@import '../../../../theme/colors';

:host {
  flex-grow: 1;
}

.task-details {
  &__header {
    padding: 8px 8px 0 8px;
    height: 88px;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr ;
  }

  &__badge-message {
    font-size: 1.1rem;
    background-color: $transparent-grey;
    border-radius: 4px;

    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    position: relative;
    top: 4px;
  }

  &__action-buttons {
    grid-area: 1/1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  &__button--primary {
    background-color: $aquamarine;
    color: white;
    margin-right: 4px;
    min-width: 1%;
  }

  &__button--secondary {
    margin-right: 4px;
    min-width: 1%;
    color: #555;
  }

  &__icon--aquamarine {
    color: $aquamarine;
  }

  &__icon--red {
    color: $invalid;
  }

  &__task-name {
    font-size: 1.5rem;
    padding: 0 0.5rem 0.5rem 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-area: 2/1;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  &__tab-group-wrapper {
    width: 100%;
    height: 100%;
  }

  &__tab-wrapper {
    padding: 12px;
  }
}

::ng-deep .mat-tab-body-wrapper {
  height: 100%;
  max-height: calc(100vh - 182px);
}

::ng-deep
  .task-details__tab-group-wrapper
  > .mat-tab-group
  > .mat-tab-header
  > .mat-tab-label-container
  > .mat-tab-list
  > .mat-tab-labels
  > .mat-tab-label {
  min-width: 0 !important;
  height: 36px !important;
}
