/**
 * @license
 * FOURBURNER CONFIDENTIAL
 * Unpublished Copyright (C) 2021 FourBurner Technologies, Inc. All Rights Reserved.
 *
 * NOTICE: All information contained herein is, and remains the property of FOURBURNER TECHNOLOGIES, INC.
 * The intellectual and technical concepts contained herein are proprietary to FOURBURNER TECHNOLOGIES, INC.
 * and may be covered by U.S. and Foreign Patents, patents in process, and are protected by trade secret
 * or copyright law. Dissemination of this information or reproduction of this material is strictly forbidden
 * unless prior written permission is obtained from FOURBURNER TECHNOLOGIES, INC. Access to the source code
 * contained herein is hereby forbidden to anyone except current FOURBURNER TECHNOLOGIES, INC. employees,
 * managers or contractors who have executed Confidentiality and Non-disclosure agreements explicitly
 * covering such access.
 *
 * The copyright notice above does not evidence any actual or intended publication or disclosure of
 * this source code, which includes information that is confidential and/or proprietary, and is a
 * trade secret, of FOURBURNER TECHNOLOGIES, INC. ANY REPRODUCTION, MODIFICATION, DISTRIBUTION, PUBLIC
 * PERFORMANCE, OR PUBLIC DISPLAY OF OR THROUGH USE OF THIS SOURCE CODE WITHOUT THE EXPRESS WRITTEN
 * CONSENT OF FOURBURNER TECHNOLOGIES, INC. IS STRICTLY PROHIBITED, AND IN VIOLATION OF APPLICABLE
 * LAWS AND INTERNATIONAL TREATIES. THE RECEIPT OR POSSESSION OF THIS SOURCE CODE AND/OR RELATED
 * INFORMATION DOES NOT CONVEY OR IMPLY ANY RIGHTS TO REPRODUCE, DISCLOSE OR DISTRIBUTE ITS CONTENTS,
 * OR TO MANUFACTURE, USE, OR SELL ANYTHING THAT IT MAY DESCRIBE, IN WHOLE OR IN PART.
 */

@use 'sass:math';
@use './form.input';

// Styles that only apply to the fill appearance of the form-field.


.twnd-form-field-appearance-fill {
  .twnd-form-field-flex {
    @apply mt-4 backdrop-filter transition-all transform-gpu duration-500 ease-in-out border-l-4 border-gray-300 hover:border-purple-500 dark:border-gray-600 rounded-lg px-4 py-4 text-gray-900 dark:text-gray-400 bg-gray-50 dark:bg-gray-600;
  }

  // &.twnd-focused .twnd-form-field-flex {
  // }

  .twnd-form-field-underline::before {
    @apply content-start absolute bottom-0 border-l-2 rounded-lg w-full hidden;
  }

  .twnd-form-field-ripple {
    @apply bottom-0 border-b-4 rounded-lg hidden;
  }

  // Note that we need this specific of a selector because we don't want
  // the hover effect to show when the user hovers over the hints.
  &:not(.twnd-form-field-disabled) .twnd-form-field-flex:hover ~ .twnd-form-field-underline {
    .twnd-form-field-ripple {
      @apply rounded-lg opacity-100 transform-none transition-opacity duration-700;
    }
  }

  &._twnd-animation-noopable:not(.twnd-form-field-disabled) .twnd-form-field-flex:hover {
    & ~ .twnd-form-field-underline .twnd-form-field-ripple {
      @apply transition-none;
    }
  }

  .twnd-form-field-subscript-wrapper {
    @apply py-2;
  }
}