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

:host p {
  text-align: center;
}

:host {
  ::ng-deep {
    mat-pseudo-checkbox {
      display: none !important;
    }

    .mat-button-toggle-checked
      .mat-button-toggle-button:has(.mat-button-toggle-checkbox-wrapper) {
      padding-left: 0;
    }
  }
}

.time {
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  margin-bottom: var(--s2);
}

.track-to-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-top: var(--s2);
  padding-bottom: var(--s);
  border-top: 1px solid var(--extra-border-color);

  &:first-of-type {
    border-top: none !important;
  }

  // TODO mobile styles => not needed now
  .first-block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  select-task {
    margin: 0 var(--s2);
    width: 220px;

    &.isDisabled {
      pointer-events: none;
      opacity: 0.4;
    }
  }
}

.simple-counter-section {
  text-align: center;
}

.simple-counter {
  margin: 0 var(--s-half);
  box-shadow: none !important;
}
