.ff-input,
.ff-form-field {
  display: block;

  --mdc-shape-small: 5px;

  &__label {
    font-size: var(--ff-forms-font-size);
    margin-bottom: 0.25rem;
    font-weight: 600;
    display: block;
    @apply text-gray-900 dark:text-gray-300;
  }

  .mat-mdc-form-field {
    display: block;
    width: 100%;
  }

  input,
  textarea {
    font-size: var(--ff-forms-font-size) !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    @apply dark:text-white dark:placeholder-gray-400;
  }

  .mdc-text-field--outlined:not(.mdc-text-field--disabled) {
    .mdc-notched-outline__leading,
    .mdc-notched-outline__notch,
    .mdc-notched-outline__trailing {
      @apply border-gray-300 dark:border-gray-500;
    }

    &.mdc-text-field--focused {
      .mdc-notched-outline__leading,
      .mdc-notched-outline__notch,
      .mdc-notched-outline__trailing {
        @apply border-primary-600;
      }
    }
  }

  .mat-mdc-text-field-wrapper {
    @apply dark:bg-gray-900;
    transition: none !important;
    @apply dark:text-gray-600;
  }

  .mdc-text-field--outlined {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  input,
  textarea {
  }

  &--no-bottom-padding {
    .mat-mdc-form-field-subscript-wrapper {
      height: 0;
    }

    .mat-mdc-form-field-bottom-align::before {
      height: 0;
    }
  }
}

.mat-mdc-option,
.mat-mdc-select-value {
  font-size: var(--ff-forms-font-size) !important;
}

.mat-mdc-option-text {
  @apply dark:text-white;
}

.mat-mdc-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper {
  padding: 0 !important;
  margin-top: 4px !important;
}

// Checkboxes
.mat-checkbox .mat-checkbox-label {
  font-size: var(--ff-forms-font-size);
}

.ff-input--small,
.ff-form-field--small,
.ff-form-field--x-small {
  .mat-mdc-form-field {
    .mat-mdc-form-field-infix {
      border-top: 0;
      min-height: 0;
      padding: 0.6em 0 0.6em 0;
    }

    /* .mat-mdc-form-field-wrapper {
        margin: 0 !important;
    }

    .mat-mdc-form-field-outline {
        top: 0 !important;
    }

    .mat-select-arrow-wrapper {
        transform: none !important;
    }

    .mat-mdc-form-field-suffix {
        top: 0 !important;
        color: var(--ff-color-gray);
    }*/

    .mat-mdc-form-field-flex {
      align-items: center;
      margin-top: 0 !important;
    }
  }
}

.ff-form-field--x-small {
  .mat-mdc-form-field {
    .mat-mdc-form-field-infix {
      border-top: 0;
      padding: 0.4em 0 0.4em 0;
    }
  }
}

.mat-mdc-option,
.mat-mdc-form-field,
.mat-mdc-select,
.mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
  @apply subpixel-antialiased #{!important};
}