@use 'pix-design-tokens/typography';

.training-trigger {
  &__link {
    color: var(--pix-primary-500);

    svg {
      height: 0.75em;
      margin-left: 2px;
      vertical-align: -0.05em;
    }
  }
}

.trigger-card {
  &__title {
    @extend %pix-body-l;

    display: flex;
    align-items: baseline;
    margin-bottom: var(--pix-spacing-2x);
    font-weight: 500;
  }

  &__threshold {
    margin-left: var(--pix-spacing-4x);
    color: var(--pix-neutral-900);
    font-size: 1rem;
    line-height: 1.5;
  }

  &__tubes-count {
    margin-left: auto;
  }

  &__description {
    @extend %pix-body-m;

    margin-bottom: var(--pix-spacing-4x);
  }

  &__toggler {
    display: inline-flex;

    svg {
      margin-right: var(--pix-spacing-2x);
    }
  }
}

.edit-training-trigger {
  counter-reset: title;

  &__actions {
    display: flex;
    gap: var(--pix-spacing-6x);
    margin: var(--pix-spacing-6x) 0;
  }

  &__threshold {
    margin-bottom: var(--pix-spacing-6x);
  }

  .card__title {
    counter-increment: title;

    &::before {
      content: counter(title) '.\00a0';
    }
  }
}

.edit-training-trigger-threshold {
  &__description {
    margin-bottom: var(--pix-spacing-4x);
  }

  &__input {
    max-width: 8.75rem;
  }
}
