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

.badge-form {
  &__title {
    @extend %pix-title-xs;

    margin-bottom: var(--pix-spacing-3x);
    font-weight: 500;
  }

  &__label {
    @extend %pix-body-s;

    margin-bottom: 2px;
    color: var(--pix-neutral-900);
    font-weight: 500;

    &--required::before {
      color: var(--pix-error-700);
      content: '* ';
    }
  }

  &__information {
    margin-bottom: 10px;
    font-size: 0.75rem;

    &--link {
      color: var(--pix-primary-700);
      text-decoration: underline;
    }
  }

  &__text-field {
    display: flex;
    flex-direction: column;
  }

  &__check-field {
    margin-left: 0.25rem;
  }

  &__text-field:not(:last-child),
  &__check-field:not(:last-child) {
    margin-bottom: 1rem;
  }

  &-check-field__control {
    margin: 0 8px;
  }

  &__action-buttons {
    display: flex;
    padding-top: 24px;
  }

  &-action-buttons__cancel {
    margin-right: 8px;

    &:hover {
      color: inherit;
      text-decoration: none;
    }
  }

  &-criteria {
    display: flex;
    gap: 32px;
    margin-bottom: 16px;

    &__threshold {
      width: 200px;
    }

    &__skill-set {
      flex: 1;
    }
  }

  &-criterion {
    margin: var(--pix-spacing-3x) 0 var(--pix-spacing-6x);
    padding: var(--pix-spacing-4x);
    background: var(--pix-neutral-20);
    border: 1px solid var(--pix-neutral-100);
    border-radius: 8px;

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    &__add {
      svg {
        margin-right: 0.5rem;
      }
    }
  }

  &-criteria-introduction {
    @extend %pix-body-s;
  }

  &-criteria-choice {
    margin-top: var(--pix-spacing-3x);

    p {
      margin-bottom: 0.75rem;
    }

    label {
      margin-bottom: 0;
    }

    .pix-checkbox {
      margin-left: 0.25rem;
    }
  }
}

input {
  &.badge-form-criterion {
    &__name {
      margin-bottom: 16px;
    }

    &__threshold {
      width: 134px;
      margin-bottom: 16px;
    }
  }
}

.badge-form-criterion .pix-input {
  display: flex;
}
