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

.badge-details {
  display: flex;

  &__image {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin: 1rem 3rem 0 0;
  }

  &__content {
    flex-grow: 1;
  }

  &__tag:not(:first-child) {
    margin-top: 0.5rem;
  }

  &__action {
    margin-left: auto;
  }
}

.badge-edit-form {
  width: 50%;

  &__field {
    margin-bottom: 1rem;

    .pix-input {
      width: 100%;
    }
  }

  &__checkboxes {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  &__actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
  }
}

.badge-criterion__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pix-spacing-2x) var(--pix-spacing-4x);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--pix-spacing-3x);
}

.badge-criterion__title {
  @extend %pix-title-xs;

  &:not(:first-child) {
    margin-top: var(--pix-spacing-2x);
    padding-top: var(--pix-spacing-6x);
    border-top: 1px dashed var(--pix-neutral-100);
  }
}

.capped-tubes-criterion__text {
  margin-block: var(--pix-spacing-2x) var(--pix-spacing-4x);
}
