/**
* 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: center;
    gap: 18px;
    height: auto;
  }

  input {
    display: none;
  }

  .horizontal-div {
    max-height: 62px;
    width: 100%;
    min-width: 230px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    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);
  }
  
  .hover-state {
    border-color: var(--nile-colors-primary-600);
  }

  .vertical-div {
    height: auto;
    min-height: 156px;
    min-width: 240px;
    width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    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; 
    margin-bottom: 10px;
  }

  .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;
  }

  .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 */
  nile-loader {
    line-height: 0;
  }

  .uploading {
    height: 62px;
    width: 100%;
    padding: 12px;
    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);
    border-radius: 4px;
    background-color: var(--nile-colors-white-base);
  }
  
  .uploading:hover {
    border-color: var(--nile-colors-neutral-400);
  }

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

  .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);
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 222px;
  }

  .progress-bar-container .horizontal-file-name {
    font-size: var(--nile-type-scale-1);
    font-weight: var(--nile-font-weight-regular);
    color: var(--nile-colors-dark-500);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  
  .progress-bar-container .vertical-file-name {
    font-size: var(--nile-type-scale-1);
    font-weight: var(--nile-font-weight-regular);
    color: var(--nile-colors-dark-500);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 212px;
  }

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

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

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

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

  .preview-image-container img, iframe {
    height: 42px;
    width: 42px;
    object-fit: contain;
    border-radius: var(--nile-radius-radius-xs);
    border: 1px solid var(--nile-colors-neutral-400);
  }

  .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;
    align-items: center;
    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: 4px;
  }

  .preview-file-info p {
    margin: 0px;
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
  }

  .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);
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
  }

  .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: 95%;
    display: flex;
    align-items: center;
    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: 4px;
  }

  .file-info p {
    margin: 0px;
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 538px;
  }
  
  .file-info nile-tooltip span, .file-info span {
    color: var(--nile-colors-red-700);
    font-size: var(--nile-type-scale-2);
    font-weight: var(--nile-font-weight-regular);
    max-width: 90%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
  }

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

  .file-info .horizontal-file-name {
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
    color: var(--nile-colors-dark-900);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 538px;
  }

  /* VERTICAL 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;
    text-align: center;
  }

  .content-container h4 {
    font-weight: var(--nile-font-weight-regular);
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 222px;
  }

  .content-container p:first-child {
    margin: 0px;
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 222px;
  }

  .content-container p:last-child {
    margin: 0px;
    font-size: var(--nile-type-scale-2);
    font-weight: var(--nile-font-weight-regular);
    color: var(--nile-colors-neutral-700);
    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;
    padding-top: 40px;
  }

  .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);
  }

  .file-info-vertical-state {
    width: 100%;
    text-align: center;
  }

  .file-info-vertical-state p {
    margin: 0px;
    font-size: var(--nile-type-scale-3);
    font-weight: var(--nile-font-weight-regular);
    padding-bottom: 6px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 222px;
  }
  
  .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {
    color: var(--nile-colors-red-700);
    font-size: var(--nile-type-scale-2);
    font-weight: var(--nile-font-weight-regular);
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    max-width: 212px;
  }

  .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: center
  }

  .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;
  }
  .preview-file-info p {
    width: 100%;
    }
`;

export default [styles];