@import 'src/theme/_colors.scss';

.task-list-toolbar {
  // padding: 4px 16px 16px 16px;
  padding: 0 0 16px 0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

  &__tab {
    display: flex;
    margin: 8px 16px 0 16px;
  }

  &__spacer {
    flex-grow: 1;
  }

  &__additional-toolbar {
    display: flex;
    margin: 0 16px;
  }

  &__additional-filter {
    position: relative;
    top: -8px;
    margin: 0 16px;
  }

  &__button--primary {
    background-color: $aquamarine;
    color: white;
    height: 36px;
    margin-right: 4px;
  }

  &__button--secondary {
    height: 36px;
    top: 12px;
    color: #555;
  }
}

::ng-deep
  .task-list-toolbar
  > .mat-tab-group
  > .mat-tab-header
  > .mat-tab-label-container
  > .mat-tab-list
  > .mat-tab-labels {
  background-color: $light-grey;
}

::ng-deep .task-list-toolbar__filter-input .mat-form-field-wrapper {
  width: 240px;
}
