/**
 * Copyright (C) 2025 Brainformatik GmbH (info@brainformatik.com)
 *
 * This file is part of brainX.
 * All Rights Reserved.
 *
 * This part of brainX can not be copied and/or distributed without the
 * express permission of Brainformatik GmbH.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .twemoji {
    display: inline-block;
    height: 1em;
    width: 1em;
    margin-inline: 0.125em;
    vertical-align: -0.15em;
  }

  .date-field input[type='date'],
  .date-field input[type='datetime-local'],
  .date-field input[type='time'] {
    appearance: none;
    -webkit-appearance: none;
    background-image: none;
    position: relative;
  }

  .date-field input::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 2.5rem;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    cursor: pointer;
  }

  .date-field input::-webkit-clear-button,
  .date-field input::-webkit-inner-spin-button {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
  }

  .date-field input::-moz-focus-inner,
  .date-field input::-ms-clear {
    border: 0;
    display: none;
  }

  .twemoji img {
    height: 100%;
    width: 100%;
  }
}

@layer components {
  label.field {
    @apply cursor-pointer;
  }

  .field {
    @apply relative flex flex-col pt-6 px-4 py-[6px] border-b border-grey-100 bg-white rounded-t focus-within:border-primary transition duration-200 ease-in-out;

    &:has(.minicolors) {
      @apply pb-[0.325rem];
    }

    &:not(.no-hover) {
      @apply hover:border-grey-200 focus-within:hover:border-primary;
    }

    &.color-field {
      @apply pb-0;

      .clr-field button {
        @apply left-auto right-3 h-3 w-3 rounded-sm;
      }

      input {
        @apply pr-8 text-grey w-full;
      }
    }

    &.outlined {
      @apply border rounded-sm;

      &:not(.no-hover) {
        @apply hover:border-primary;
      }

      &.no-label {
        @apply pt-2;
      }

      &.color-field {
        @apply pb-[0.325rem];

        .clr-field {
          @apply w-full;
        }

        .clr-field button {
            @apply h-6 w-6 rounded-sm right-0;
        }
      }
    }

    .label {
      @apply absolute text-sm text-grey-600 duration-300 transform top-4 origin-[0] left-4 max-w-[calc(100%-2rem)] isolate
      after:inset-0 after:top-auto after:bottom-0 after:h-[57%] after:block after:absolute truncate;

      &:after {
        z-index: -1;
      }
    }

    &:focus-within:not(:has(.editor-container)) .label,
        /* when placeholder shown */
    &:has(.text-value:not(:placeholder-shown)) .label,
        /* when no text/password input, and color picker element exists and no editor element exists */
    &:has(input:not([type="text"], [type="password"]), input.color-picker):not(:has(.editor-container)) .label,
        /* when no input no select and no textarea */
    &:not(:has(input, select, textarea)) .label,
    &.select-field .label {
      @apply -translate-y-2.5 top-4 text-xs;
    }

    &.field--has-value .label {
      @apply -translate-y-2.5 top-4 text-xs;
    }

    &.field-toggle {
      @apply flex-row items-center justify-between gap-4 py-2;

      .field-toggle__label {
        @apply text-base text-grey-900;
      }
    }

    /* when editor exists label has to be static above the editor */

    &:has(.editor-container) .label {
      @apply static;
    }

    .text-value {
      @apply grow border-0 ring-0 outline-none p-0 bg-transparent text-base leading-6 text-grey-900;

      &[disabled],
      &[readonly] {
        @apply text-grey-900;
      }

      &[disabled] {
        @apply cursor-not-allowed;
      }
    }

    .display-value {
      @apply block text-base leading-6 text-grey-900 p-0 bg-transparent;
      word-break: break-word;

      &:not(:hover):not(.no-truncate) {
        @apply flex truncate;
      }
    }

    &.readonly {
      @apply bg-white border-grey-100;
    }

    &.error {
      @apply border-error;

      .label {
        @apply text-error;
      }

      .field-icons {
        @apply text-error;
      }
    }

    &.error::after {
      content: '\f06a';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      @apply pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-error text-base;
    }

    &.error:has(.field-icons)::after {
      @apply right-12;
    }

    &.select-field {
      @apply pb-[6px];

      &:not(.outlined) {
        @apply border-0;
      }
    }

    .field-icons {
      @apply pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-grey-500;
    }
  }

  button.field {
    @apply w-full text-left bg-transparent pb-[6px];
    appearance: none;

    &:focus {
      @apply outline-none ring-0;
    }
  }

  button.field:disabled {
    @apply cursor-not-allowed opacity-100 text-grey-900;
  }

  .field.select-field .display-value {
    @apply mt-0 pl-0;
    padding-right: 2rem;
  }

  .select-field--minimal {
    @apply border-0 px-0 pt-0 pb-0 bg-transparent;
  }

  .select-field--minimal .label {
    @apply static mb-1 text-xs text-grey-600 left-0;
  }

  .select-field--minimal .ts-wrapper {
    @apply mt-0;
  }

  .ts-wrapper {
    @apply w-full;
  }

  .ts-wrapper .ts-control {
    @apply w-full min-h-[2.75rem] border border-grey-100 rounded-md bg-white px-3 py-2 text-base leading-6 text-grey-900 shadow-none;
  }

  .ts-wrapper.focus .ts-control,
  .ts-wrapper.single.input-active .ts-control,
  .ts-wrapper.single.has-items .ts-control {
    @apply border-primary;
  }

  .ts-control--minimal {
    @apply border-grey-200 rounded-lg bg-white;
  }

  .ts-wrapper.disabled .ts-control {
    @apply bg-grey-50 text-grey-500 cursor-not-allowed;
  }

  .ts-dropdown {
    @apply mt-2 border border-grey-100 rounded-md bg-white shadow-lg;
  }

  .ts-dropdown .option {
    @apply px-3 py-2 text-sm text-grey-900;
  }

  .ts-dropdown .option.active {
    @apply bg-primary-50 text-primary;
  }

  .ts-dropdown .option.selected {
    @apply bg-primary-100 text-primary;
  }

  .field.date-field .display-value {
    padding-right: 2rem;
  }


  .date-field input[type='date'],
  .date-field input[type='datetime-local'],
  .date-field input[type='time'] {
    appearance: none;
    -webkit-appearance: none;
  }

  .date-field input::-webkit-calendar-picker-indicator {
    display: none;
  }

  .search-field { /* medium size in designer design system */
    @apply relative border border-grey-200 bg-white text-grey-500 rounded-full h-9 flex items-center;

    &:focus-within, &:hover {
        @apply bg-white border-primary;

        input[type="text"] {
            @apply placeholder:text-grey;
        }
    }

    input[type="text"] {
        @apply grow w-full border-0 ring-0 outline-none p-0 bg-transparent text-sm pl-10 pr-4 py-2 placeholder:text-grey-500 text-grey;

        &:focus {
            @apply placeholder:text-grey-500;
        }
    }

    button:not(.excluded) {
        @apply absolute right-4 top-2/4 w-5 h-5 -mt-2.5 flex items-center text-grey-500 hover:text-grey-700 transition duration-200 ease-in-out;
    }

    &:before {
        @apply absolute w-4 h-4 top-2/4 -mt-2 left-3 pointer-events-none font-bold text-grey flex items-center justify-center;

        content: '\1f50d';
    }

    &.medium { /* small in designer design system */
        @apply h-8;

        &:before {
            @apply w-3 h-3 text-xs left-3 -mt-1.5;
        }

        input[type="text"] {
            @apply text-xs pl-8;
        }

        button:not(.excluded) {
            @apply right-3;

            i {
                @apply text-xs;
            }
        }
    }
}

  .outline-field {
    @apply relative;

    input:not([type="checkbox"]):not(.dropdown-input), textarea, .field-content {
        @apply bg-white border border-grey-100 rounded-sm placeholder-grey-500 text-sm ring-0 outline-none px-3 py-2.5;

        &.autocompleteInput {
            @apply border-none p-0;
        }

        &[disabled] {
            @apply bg-white text-grey-900 cursor-not-allowed;
        }

        &[readonly] {
            @apply text-grey-900;
        }

        &:not([disabled]) {
            &:hover,
            &:focus,
            &:focus-within,
            &:active {
                @apply border-primary ring-0 outline-none;
            }
        }

        & + label:not(.ignore-label) {
            @apply absolute text-sm text-grey-500 duration-300 transform top-3 origin-[0] left-4 max-w-[90%] truncate pointer-events-none px-2 isolate
            after:inset-0 after:top-auto after:bottom-0 after:border-t after:border-white after:h-[57%] after:bg-white after:block after:absolute;

            &:after {
                z-index: -1;
            }
        }

        &[disabled] + label:not(.ignore-label) {
            @apply after:bg-white;
        }

        &:focus + label:not(.ignore-label) {
            @apply text-primary;
        }

        &:focus + label:not(.ignore-label),
        &:not(:placeholder-shown) + label:not(.ignore-label) {
            @apply -translate-y-5 top-3 text-xs;
        }

        &[disabled]:placeholder-shown + label:not(.ignore-label) {
            @apply after:border-grey-100;
        }
    }

    &:has(input[type="checkbox"]) {
        @apply bg-white border border-grey-100 rounded-sm placeholder-grey-500 text-sm ring-0 outline-none px-3 py-2.5 flex justify-between flex-row-reverse;

        .text-value {
            @apply w-1/12;
        }

        &[disabled] {
            @apply bg-white text-grey-900 cursor-not-allowed;
        }

        &:not([disabled]) {
            &:hover,
            &:focus,
            &:focus-within,
            &:active {
                @apply border-primary ring-0 outline-none;
            }
        }
    }

    .field-content {
        @apply flex items-center gap-2;
    }

    .outline-label {
        @apply absolute text-grey-500 duration-300 transform origin-[0] left-2 max-w-[90%] truncate pointer-events-none px-2 text-[0.7rem] -translate-y-4 top-2 isolate
        after:inset-0 after:top-auto after:bottom-0 after:border-t after:border-white after:h-[57%] after:bg-white after:block after:absolute;

        &:after {
            z-index: -1;
        }
    }

    &:focus-within {
        .outline-label {
            @apply text-primary;
        }
    }

    .text-value {
        @apply w-full;
    }

    .help-text {
        @apply text-[0.7rem] block text-grey-500 mt-1;
    }

    &.disabled {
        input {
            @apply bg-white text-grey-900 cursor-not-allowed;
        }
    }

    .error-text {
        @apply hidden;
    }

    &.error {
        @apply border-error text-error;

        input {
            @apply border-error placeholder-error text-error;
        }

        .error-text {
            @apply block text-[0.7rem] text-error mt-0.5;
        }

        .label, .outline-label {
            @apply text-error;
        }
    }

    &.color-field {
        .clr-field button {
            @apply left-auto right-3 h-3 w-3 rounded-sm;
        }

        input {
            @apply pr-8 text-grey w-full;
        }
    }

    &.small {
        @apply h-8;

        input:not([type="checkbox"]):not(.dropdown-input), textarea, .field-content {
            @apply text-xs py-2 max-h-full;

            & + label:not(.ignore-label) {
                @apply text-xs left-2 px-1.5 top-2 translate-y-0;
            }

            &:focus + label:not(.ignore-label) {
                @apply text-primary;
            }

            &:focus + label:not(.ignore-label),
            &:not(:placeholder-shown) + label:not(.ignore-label) {
                @apply scale-75 -translate-y-5 top-3;
            }
        }

        .outline-label {
            @apply text-[0.7rem] left-2 px-1.5 top-2;
        }
    }
  }

  .field.outlined + ul.validation-errors, .outline-field + ul.validation-errors {
    @apply mt-1;
  }

  .field:not(.outlined) + ul.validation-errors {
    @apply mt-1 ml-4;
  }

  .table-cell-field {
    &:has(.display-value) {
        @apply h-full;
    }

    .quickEditForm {
        @apply h-full;
    }

    .quickEditFieldContainer {
        @apply h-full;
    }

    .quickEditFieldContainer .display-value {
        @apply h-full border-b border-grey-200 focus-within:border-primary;
    }

    .fieldValue {
        @apply h-full;
    }

    .text-value {
        @apply border-none focus:border-none hover:border-none focus:ring-0 ring-0 outline-none w-full h-full text-sm group-hover:bg-grey-100 hover:bg-grey-100;
    }
  }
}

.font-awesome {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}