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

/**
 * FileUpload CSS
 */
export const styles = css`
  :host {
    display: inline-block;
    width: 100%;
  }

  * {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
  }

  input {
    display: none;
  }

  .horizontal-div {
    height: 62px;
    width: 100%;
    min-width: 230px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-radius: var(--nile-radius-radius-xs);
    border: 1px dashed var(--nile-colors-neutral-500);
    color: var(--nile-colors-dark-900);
    background-color: var(--nile-colors-white-base);
  }

  @media (width < 400px) {
    .browse-file-button {
      display: none;
    }

    .horizontal-div {
      cursor: pointer;
    }
  }

  .hover-border {
    border-color: var(--nile-colors-primary-600);
  }

  .title {
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
    color: var(--nile-colors-dark-900);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 454px;
    width: 100%;
  }

  .subtitle {
    font-size: var(--nile-type-scale-2);
    font-weight: var(--nile-font-weight-regular);
    color: var(--nile-colors-dark-500);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 454px;
  }

  .vertical-div {
    min-height: 156px;
    height: auto;
    min-width: 240px;
    width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: var(--nile-radius-radius-xs);
    color: var(--nile-colors-dark-900);
    border: 1px dashed var(--nile-colors-neutral-500);
    background-color: var(--nile-colors-white-base);
    position: relative;
  }

  .vertical-div:hover {
    border-color: var(--nile-colors-blue-500);
  }

  .outer-div-border {
    border: 1px solid var(--nile-colors-neutral-400);
  }

  .inner-div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    box-sizing: border-box;
  }

  .content {
    display: flex;  
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  .content h4 {
    margin: 0px;
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
    color: var(--nile-colors-dark-900);
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 454px;
  }
      
  .content p {
    margin: 0px;
    font-size: var(--nile-type-scale-2);
    color: var(--nile-colors-neutral-700);
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 454px;
  }

  ::slotted(img), ::slotted(nile-icon), ::slotted(video) {
    --nile-svg-height: 24px !important ;
    --nile-svg-width: 24px !important ;
    height:42px;
    width: 42px;
    object-fit: cover;
  }

  .browse-file-button {
    cursor: pointer;
  }

  /*  DISABLED STATE */
  .disable {
    background-color: var(--nile-colors-dark-200);
    opacity: 0.8;
    cursor: not-allowed;
    color: var(--nile-colors-neutral-500);
    pointer-events: none;
  }

  /* DRAGGING */
  .dragging {
    background-color: var(--nile-colors-blue-100);
    border-color: var(--nile-colors-primary-600);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    color: var(--nile-colors-blue-700);
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
  }

  .icons-container {
    display: flex;
    gap: 4px;
  }

  .general-icon {
    transform: rotate(-18.11deg);
    position: relative;
    bottom: 3px;
  }

  .image-icon {
    transform: rotate(15deg);
  }

  .icon:hover {
    cursor: pointer;
  }

  /* Uploading State */
  .uploading {
    width: 648px;
    min-width: 230px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    box-sizing: border-box;
    border: 1px solid var(--nile-colors-neutral-400)
  }
  
  .uploading:hover {
    border-color: var(--nile-colors-neutral-400);
  }

  .progress-bar-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px;
  }

  .progress-bar-percent {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: var(--nile-type-scale-2);
    font-weight: var(--nile-font-weight-regular);
  }

  .progress-bar-container p {
    margin: 0px;
  }

  .progress-bar-container > p {
    font-size: var(--nile-type-scale-1);
    color: var(--nile-colors-dark-500);
  }

  /* PREVIEW STATE */
  .preview {
    border: 1px solid var(--nile-colors-neutral-400);
  }

  .preview:hover {
    border-color: var(--nile-colors-neutral-400);
  }

  .preview-inner {
    display: flex;
    gap: 18px;
  }

  .preview-image-container {
    height: 42px;
    width: 42px;
  }

  .preview-image-container img {
    height: 42px;
    width: 42px;
    object-fit: contain;
    border-radius: var(--nile-radius-radius-xs);
    border: 1px solid var(--nile-colors-neutral-400);
  }
  
  .preview-file-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
  }

  .preview-file-info p {
    margin: 0px;
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
  }

  .preview-file-info p:last-of-type{
    color: var(--nile-colors-neutral-700);
    font-size: var(--nile-type-scale-2);
    font-weight: var(--nile-font-weight-regular);
  }

  .preview nile-icon:hover {
    cursor: pointer;
  }

  /* NO PREVIEW STATE */
  .no-preview {
    border: 1px solid var(--nile-colors-neutral-400);
  }

  .no-preview:hover {
    border-color: var(--nile-colors-neutral-400);
  }

  .no-preview-container {
    display: flex;
    gap: 18px;
  }

  .document-icon {
    height: 40px;
    width: 40px;
    border-radius: var(--nile-radius-radius-xs);
    padding: 2px 3px 2px 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--nile-colors-blue-400);
    background-color: var(--nile-colors-blue-100);
  }

  .document-icon nile-icon {
    height: 40px;
    width: 40px;
  }
  
  .preview-file-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
  }

  .preview-file-info p {
    margin: 0px;
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
  }

  .preview-file-info p:last-of-type{
    color: var(--nile-colors-neutral-700);
    font-size: var(--nile-type-scale-2);
    font-weight: var(--nile-font-weight-regular);
  }

  .no-preview > nile-icon:hover {
    cursor: pointer;
  }

  /* ERROR STATE */
  
  .error {
    border: 1px solid var(--nile-colors-neutral-400);
  }

  .error:hover {
    border-color: var(--nile-colors-neutral-400);
  }

  .error-container {
    width: 100%;
    display: flex;
    gap: 18px;
  }

  .error-icon {
    height: 40px;
    width: 40px;
    border-radius: var(--nile-radius-radius-xs);
    padding: 2px 3px 2px 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--nile-colors-red-400);
    background-color: var(--nile-colors-red-100);
  }

  .error-icon nile-icon {
    height: 40px;
    width: 40px;
  }
  
  .file-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
  }

  .file-info p {
    margin: 0px;
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
  }

  .file-info p:last-of-type{
    color: var(--nile-colors-red-700);
    font-size: var(--nile-type-scale-2);
    font-weight: var(--nile-font-weight-regular);
  }

  .error > nile-icon:hover {
    cursor: pointer;
  }

  /* VARTICAL STATE START */
  /* Default State */

  .vertical-default {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px
  }

  .content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .content-container div.title {
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
    color: var(--nile-colors-dark-900);
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 222px;
  }

  .content-container div.subtitle {
    font-size: var(--nile-type-scale-2);
    font-weight: var(--nile-font-weight-regular);
    color: var(--nile-colors-dark-500);
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 222px;
  }

  /* Drag State */
  .vertical-drag {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:18px;
    font-size: var(--nile-type-scale-3);
    color: var(--nile-colors-blue-700);
    background-color: var(--nile-colors-blue-100);
    border-color: var(--nile-colors-blue-500);
  }

  /* Uploading State */
  .vertical-uploading {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    border: 1px solid var(--nile-colors-neutral-400);
  }

  .vertical-uploading:hover {
    border-color: var(--nile-colors-neutral-400);
  }

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .corner-icon {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  /* Preview State */
  .vertical-preview {
    border: 1px solid var(--nile-colors-neutral-400);
  }

  .vertical-preview:hover {
    border-color: var(--nile-colors-neutral-400);
  }

  .image-preview {
    border: 1px solid var(--nile-colors-neutral-400);
    object-fit: cover;
    width: 80px;
    height: 80px;
    border-radius: var(--nile-radius-radius-xs);
  }

  /* Vertical No Preview State */
  .vertical-no-preview {
    border: 1px solid var(--nile-colors-neutral-400);
  }

  .vertical-no-preview:hover {
    border-color: var(--nile-colors-neutral-400);
  }

  .vertical-document-icon {
    height: 80px;
    width: 80px;
    padding: 2px 3px 2px 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--nile-radius-radius-xs);
    border: 1px solid var(--nile-colors-blue-400);
    background-color: var(--nile-colors-blue-100);
  }

  /* Veritcal Error State */
  .vertical-error {
    border: 1px solid var(--nile-colors-neutral-400);
  }

  .vertical-error:hover {
    border-color: var(--nile-colors-neutral-400);
  }

  .error-bg {
    background-color: var(--nile-colors-red-100);
    border: 1px solid var(--nile-colors-red-400);
  }

  .error-message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0px;
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
    text-align: start;
  }

  .error-p {
    color: var(--nile-colors-red-700);
    font-size: var(--nile-type-scale-2);
    width: 216px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }

  .error-p p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }


  /* Displaing uploaded files CSS */
  .display-files {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: 648px;
    min-width: 230px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--nile-colors-neutral-700);
    border-radius: var(--nile-radius-radius-xs);
    scrollbar-width: none;
    padding: 12px;
  }

  ul, li {
    width: 100%;
  }

  li {
    list-style-type: none;
  }

  /* for the upload error messages */
  .upload-error {
    font-size: var(--nile-type-scale-2);
    font-weight: var(--nile-font-weight-regular);
    color: var(--nile-colors-red-700);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--nile-spacing-one-half-x);
    margin-top: 10px;
  }

  .upload-error > nile-tooltip > span {
    color: var(--nile-colors-red-700);
    white-space: nowrap;
    text-align: left;
    max-width: 560px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vertical-upload-error {
    display: flex;
    gap: 4px;
    margin-top: 10px;
  }

  .vertical-upload-error nile-tooltip span, .vertical-upload-error span {
    color: var(--nile-colors-red-700);
    white-space: nowrap;
    text-align: left;
    width: 222px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--nile-type-scale-2);
    display: inline-block;
  }
`;

export default [styles];