///
//  Copyright (c) 2022 GrowStocks
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
//  copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
//  The above copyright notice and this permission notice shall be included in all
//  copies or substantial portions of the Software.
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
//  SOFTWARE.
///

@use '../kardia';

@mixin init($top-label-distance, $left-label-distance, $top-padding) {
  .gs-form-field {
    display: flex;
    flex-flow: column nowrap;
    position: relative;

    @content;

    .gs-form-field__label {
      position: absolute;
      top: calc(#{$top-label-distance} + 2px);
      left: calc(#{$left-label-distance} + 1px);
      @include kardia.color-apply('form-field-label', (
        fill: rgba(0 0 0 / 0),
        ink: inherit,
      ));
      @include kardia.struct-apply('form-field-label', (
        padding: ('xs' 'xs' 0 0),
      ));
      @include kardia.typography-apply('form-field-label', (
        family: inherit,
        size: inherit,
        weight: inherit,
        line-height: inherit,
      ));
      @include kardia.prefix(transition, all var(--gs-transition-time) ease);
      cursor: text;
    }

    .gs-form-field__input {
      @include kardia.struct-apply('form-field', (
        width: 100%,
        margin: 0,
        radius: 0,
        border-width: 2px,
        border-style: solid,
        shadow: 'none',
      ));
      padding: kardia.key-get('form-field-padding');
      padding-top: calc(#{$top-padding} + 1rem) !important;
      @include kardia.color-apply('form-field', (
        fill: inherit,
        ink: inherit,
        border: inherit
      ));
      @include kardia.typography-apply('form-field', (
        family: inherit,
        size: inherit,
        weight: inherit,
        line-height: inherit,
      ));
      outline: none;
      resize: none;
      cursor: text;
      -webkit-appearance: caret;
      @include kardia.prefix(transition, all var(--gs-transition-time) ease);

      &::placeholder {
        // display: none !important;
        color: rgba(0 0 0 / 0) !important;
        user-select: none !important;
      }

      &:focus,
      &:not(:placeholder-shown){
        + .gs-form-field__label {
          top: 0.33rem;
          @include kardia.typography-bind('form-field-label', (
            family: 'small',
            size: 'small',
          ));
        }
      }
    }

    .gs-form-field__helper {
      @include kardia.color-apply('form-field-helper', (
        ink: inherit,
      ));
      @include kardia.typography-apply('form-field-helper', (
        family: inherit,
        size: inherit,
        weight: inherit,
        line-height: inherit,
      ));
      @include kardia.prefix(transition, all var(--gs-transition-time) ease);
    }
  }
}