/*
* Upload component
*
*/

@import '../../../style/core/utilities.scss';

.dnb-upload {
  --upload-background: white;
  --upload-background--active: lightgray;
  --upload-border: gray;
  --upload-border--active: black;
  --upload-border-width: 2px;
  --upload-list-border: black;
  --upload-icon--default: black;
  --upload-icon--warning: red;
  --upload-highlight: lightyellow;
  --upload-text--primary: black;
  --upload-text--secondary: black;

  position: relative;
  display: flex;
  flex-direction: column;

  padding: var(--spacing-medium);

  @include allBelow(small) {
    padding: var(--spacing-medium) var(--spacing-small);
  }

  background-color: var(--upload-background);
  border-radius: 0.5rem;

  // svg border element
  &__outline {
    content: '';

    pointer-events: none;

    position: absolute;
    inset: 0;

    height: 100%;
    width: 100%;

    border-radius: 0.5rem;
    stroke: var(--upload-border);
    stroke-width: 0.1875rem;
  }

  &--active &__outline {
    inset: -1px;
    width: calc(100% + var(--upload-border-width));
    height: calc(100% + var(--upload-border-width));

    stroke: var(--upload-border--active);

    rect {
      stroke-width: 0.25rem;
      stroke-dasharray: 0;
    }
  }

  &--active {
    background-color: var(--upload-background--active);
  }

  &__file-input {
    position: absolute;
    visibility: hidden;
  }

  &__file-list {
    position: relative;

    padding: 0;
    margin-top: var(--spacing-medium);
    margin-bottom: 0;

    list-style: none;
  }

  // Border on top/bottom of list items
  &__file-list::before,
  &__file-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    height: 1px;
    background-color: var(--upload-list-border);
  }

  &__file-cell {
    position: relative;
    padding: var(--spacing-small) 0;

    /** Highlight Animation */
    transition: background-color;
    transition-duration: 1.5s;
    transition-timing-function: var(--easing-default);

    // Align border to bottom
    &::after {
      top: auto;
    }

    &__content {
      display: flex;
      column-gap: var(--spacing-small);

      justify-content: space-between;
      align-items: center;

      &__left {
        display: flex;
        column-gap: var(--spacing-small);
        align-items: center;

        .dnb-icon {
          color: var(--upload-icon--default);
        }
      }
    }

    &--warning &__content__left .dnb-icon {
      color: var(--upload-icon--warning);
    }

    &--highlight {
      background-color: var(--upload-highlight);
    }

    &__text-container {
      display: flex;
      flex-direction: column;

      &--loading {
        font-size: var(--font-size-basis);
      }
    }
  }

  &__text.dnb-p {
    color: var(--upload-text--secondary);
  }

  &__accepted-file-types-table {
    &.dnb-table {
      width: fit-content;
      & thead th {
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-basis);
        padding-top: 0;
        &:first-child {
          padding-left: 0;
        }
      }
      & tbody td:first-child {
        padding-left: 0;
      }
    }
  }

  &__subtitle.dnb-p {
    color: var(--upload-text--secondary);
  }
}