/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { css } from 'lit';

/**
 * TextArea CSS
 */
export const styles = css`
  .form-control .form-control__label {
    display: none;
  }

  .form-control .form-control__help-text {
    display: none;
  }

  /* Label */
  .form-control--has-label .form-control__label {
    display: inline-block;
    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
    color: var(--nile-textarea-label-color, var(--ng-colors-text-secondary-700));
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    font-style: normal;
    font-weight: var(--nile-textarea-label-font-weight, var(--ng-font-weight-medium));
    line-height: var(--nile-textarea-label-line-height, var(--ng-line-height-text-sm));
    letter-spacing: 0.2px;
  }

  .form-control--has-label.form-control--medium .form-control__label {
    font-size: var(--nile-font-size-base, var(--ng-font-size-text-sm));
  }

  :host([required]) .form-control--has-label .form-control__label::after {
    content: '*';
    margin-inline-start: -2px;
     color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
  }

  /* Help text */
  .form-control--has-help-text .form-control__help-text {
    display: block;
    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
  }

  /* Error message */
  .form-control__error-message {
    display: block;
    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));
    font-size: var(--nile-type-scale-2), var(--ng-font-size-text-md);
    font-style: normal;
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));
    letter-spacing: 0.2px;
  }

  .form-control--has-help-text.form-control--medium .form-control__help-text {
    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));
  }

  /* Host styles */
  :host {
    display: block;
    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
  }

  :host([disabled]) .form-control--has-label .form-control__label {
    user-select: none;
    -webkit-user-select: none;
  }

  /* Textarea styles */
  .textarea {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    letter-spacing: 0.5px;
    vertical-align: middle;
    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) color, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) border, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) box-shadow, var(--nile-transition-duration-default, var(--ng-transition-duration-instant)) background-color;
    cursor: text;
    min-height: var(--nile-height-12px, var(--ng-height-12px));
  }

  /* Standard textareas */
  .textarea--standard {
    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    border: 1px solid var(--nile-textarea-standard-border-color, var(--ng-colors-border-primary));
    box-shadow:var(--nile-textarea-standard-box-shadow, var(--ng-colors-effects-shadow-xs));
  }

  .textarea--standard:hover:not(.textarea--disabled) {
    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-fg-quaternary-400));
    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
  }

  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
    border-color: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400));
    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
  }

  .textarea--standard.textarea--focused:not(.textarea--disabled) {
  position: relative; 
  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
  box-shadow: var(--nile-textarea-standard-focused-box-shadow, var(--ng-colors-effects-shadow-xs));
  border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-brand));
  /* border-width: var(--nile-border-width-1, var(--ng-border-width-2)); */
}

/* Added to apply the hover effect in nxtgen  */
.textarea--standard.textarea--focused:not(.textarea--disabled)::before {
  content: "";
  position: absolute;
  inset: 0;  
  pointer-events: none; 
  border-radius: 6.5px;
  box-shadow: inset 0 0 0 1px  var(--ng-colors-border-brand);
}


  .textarea--standard.textarea--warning:not(.textarea--disabled):hover {
    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-warning));
  }

  .textarea--standard.textarea--warning.textarea--focused:not(.textarea--disabled) {
    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-warning-subtle));
    border-width: var(--nile-border-width-1, var(--ng-border-width-2));
  }

  .textarea--standard.textarea--error:not(.textarea--disabled):hover {
    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-error));
  }

  .textarea--standard.textarea--error.textarea--focused:not(.textarea--disabled) {
    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-error));
  }

  .textarea--standard.textarea--success:not(.textarea--disabled):hover {
    border-color: var(--nile-textarea-standard-hover-border-color, var(--ng-colors-border-success));
  }

  .textarea--standard.textarea--success.textarea--focused:not(.textarea--disabled) {
    border-color: var(--nile-textarea-standard-focused-border-color, var(--ng-colors-border-success));
    border-width: var(--nile-border-width-1, var(--ng-border-width-2));
  }

  .textarea--standard.textarea--focused:not(.textarea--disabled)
    .textarea__control {
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
  }

  .textarea--standard.textarea--disabled {
    border-color: var(--nile-textarea-standard-disabled-border-color, var(--ng-colors-border-disabled));
    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
    cursor: not-allowed;
    user-select: none;
    -webkit-user-select: none;
    box-shadow:var(--nile-textarea-standard-disabled-box-shadow, var(--ng-colors-effects-shadow-xs));
  }

  .textarea--standard.textarea--disabled .textarea__control {
    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
    pointer-events: none;
  }

  .textarea--standard.textarea--disabled .textarea__control::placeholder {
    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
  }

  /* Textarea control styles */
  .textarea__control {
    flex: 1 1 auto;
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
    font-style: normal;
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md)); /* 100% */
    letter-spacing: 0.2px;
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
    border: none;
    background: none;
    box-shadow: none;
    cursor: inherit;
    -webkit-appearance: none;
  }

  .textarea--standard.textarea--disabled .textarea__control {
    cursor: not-allowed;
    resize: none;
  }

  .textarea__control::-webkit-search-decoration,
  .textarea__control::-webkit-search-cancel-button,
  .textarea__control::-webkit-search-results-button,
  .textarea__control::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }

  .textarea__control::placeholder {
    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
    user-select: none;
  }

  .textarea__control:focus {
    outline: none;
  }

  .textarea--medium .textarea__control {
    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
  }

  /* Resize types */
  .textarea--resize-none .textarea__control {
    resize: none;
    min-height: var(--nile-height-12px, var(--ng-height-12px));
  }

  .textarea--resize-vertical .textarea__control {
    resize: vertical;
    min-height: var(--nile-height-12px, var(--ng-height-12px));
  }

  .textarea--resize-auto .textarea__control {
    resize: none;
    overflow-y: hidden;
    min-height: var(--nile-height-12px, var(--ng-height-12px));
  }

  .textarea--standard.textarea--warning {
    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));
  }

  .textarea--standard.textarea--error {
    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));
  }

  .textarea--standard.textarea--success {
    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));
  }

  .textarea--standard.textarea--destructive {
    border-color: var(--nile-colors-red-400);
    box-shadow: var(--nile-box-shadow-1, var(--ng-colors-effects-shadow-xs));
  }

  .textarea--standard.textarea--destructive.textarea--focused {
    border-color: var(--nile-colors-red-400, var(--ng-colors-border-error));
    box-shadow: var(--nile-box-shadow-5, var(--ng-colors-effects-shadow-xs));
  }

  .input__non-printable {
    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
    max-width: 400px;
    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    //TODO: Need Token from design system
    border: 1px solid var(--nile-colors-red-500);
    //TODO: Need Token from design system
    color: var(--nile-colors-red-500);
    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));
    max-height: 300px;
    overflow-y: auto;
    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));
  }

  .input__remove-non-printable {
    color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));
    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
    font-size: var(--nile-type-scale-3, var(--nile-font-size-base));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
    cursor: pointer;
  }

  .input__srtiked-text-container {
    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
    word-break: break-all;
    overflow-wrap: break-word;
    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-md));
  }

  .input__srtiked-text {
    text-decoration: line-through;
    text-decoration-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    background-color: var(--nile-colors-red-500, var(--ng-colors-text-error-primary-600));
  }
`;

export default [styles];