/**
 * @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';

// The Input element proper.
.twnd-input-element {
  @apply inline-flex font-body rounded-md  dark:border-gray-500 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-gray-50 border-2 outline-none p-4 m-0 w-full max-w-full align-bottom text-left justify-start box-content;

  &:-moz-ui-invalid {
    @apply shadow-none;
  }

  // Clear Safari's decorations for search fields.
  &,
  &::-webkit-search-cancel-button,
  &::-webkit-search-decoration,
  &::-webkit-search-results-button,
  &::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }

  // Also clear Safari's autofill icons. Note that this can't be in the
  // same selector as the IE ones, otherwise Safari will ignore it.
  &::-webkit-contacts-auto-fill-button,
  &::-webkit-caps-lock-indicator,
  // Preserve the autofill icon on password inputs since it includes some important functionality.
  &:not([type='password'])::-webkit-credentials-auto-fill-button {
    @apply hidden;
  }

  &[type='date'],
  &[type='datetime'],
  &[type='datetime-local'],
  &[type='month'],
  &[type='week'],
  &[type='time'] {
    @apply text-xs;

    // Fixes an issue on iOS where the following input types will collapse to 1px,
    // if they're empty, because we've overridden their background color.
    // See: https://stackoverflow.com/questions/18381594/input-type-date-appearance-in-safari-on-ios
    &::after {
      content: ' ';
      @apply whitespace-pre w-px;
    }
  }

  // Reduce the size of the native buttons in a date/time input,
  // because they can increase the height of the input (see #13317).
  &::-webkit-inner-spin-button,
  &::-webkit-calendar-picker-indicator,
  &::-webkit-clear-button {
    @apply text-xs;
  }

  .twnd-form-field-hide-placeholder & {
    @apply text-transparent transition-none;
  }
}

textarea.twnd-input-element {
  @apply resize-y overflow-auto;

  &.cdk-textarea-autosize {
    @apply resize-none;
  }
}

textarea.twnd-input-element {
  @apply pl-2 -m-2;
}

select.twnd-input-element {
  -moz-appearance: none;
  -webkit-appearance: none;
  @apply relative bg-transparent inline-flex box-border pt-4 -mb-4;

  &::-moz-focus-inner {
    @apply border-0;
  }

  &:not(:disabled) {
    @apply cursor-pointer;
  }
}

.twnd-form-field-type-twnd-native-select {
  .twnd-form-field-infix::after {
    content: '';
    @apply w-0 h-0 border-l-4 border-r-4 border-t-4 absolute top-2/4 right-0 -mt-1.5 pointer-events-none;

    [dir='rtl'] & {
      @apply right-auto left-0;
    }
  }

  .twnd-input-element {
    @apply p-4 pr-1.5;

    [dir='rtl'] & {
      @apply pr-0 pl-1.5;
    }
  }

  .twnd-form-field-label-wrapper {
    @apply max-w-xs;
  }

  &.twnd-form-field-appearance-outline .twnd-form-field-infix::after {
    @apply -mt-1.5;
  }

  &.twnd-form-field-appearance-fill .twnd-form-field-infix::after {
    @apply -mt-3;
  }
}