$formfield-minwidth: 100px;
$formfield-maxwidth: 600px;

@mixin form-field-container {
  @include withContext(".cobalt-FormField--withHint >") {
    @apply c-mb-sm;
  }

  width: 100%;

  display: inline-block;

  padding-bottom: 0;

  transition: padding-bottom 150ms;
}

.cobalt- {
  &FormField {
    @apply c-mt-xs c-mb-sm c-mx-none;

    min-width: $formfield-minwidth;

    justify-content: center;

    align-items: flex-start;

    display: flex;
    flex-direction: column;

    font-family: font-family(base);

    &:not(.cobalt-FormField--fullWidth) {
      max-width: $formfield-maxwidth;
    }

    .cobalt-FormField__Label {
      @apply c-text-base;
      display: inline-block;

      padding: 0 0 10px 1px;

      font-size: 14px;
      font-weight: 600;
      line-height: 18px;
    }

    .cobalt-Hint {
      margin-top: calc(
        theme("spacing.xs") * -1
      ); // to compensate the extra space added to animate the Tip

      animation-name: cobalt-FormField__Hint--fade-in;
      animation-duration: 200ms;
    }

    & + .cobalt-FormField {
      @apply c-mt-md;

      .cobalt-FormField__Label {
        @apply c-mt-xs;
      }
    }
  }
}

@keyframes cobalt-FormField__Hint--fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}