@import '../../../scss/styles.scss';

@layer payload-default {
  .file-selections {
    --file-gutter-h: calc(var(--gutter-h) / 4);
    border-right: 1px solid var(--theme-border-color);
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 300px;
    overflow: visible;
    max-height: 100%;

    &__header {
      position: sticky;
      top: 0;
      margin-top: var(--base);
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: var(--theme-bg);
      flex-wrap: wrap;

      p {
        margin: 0;
      }
    }

    &__collectionSelect {
      width: 100%;

      .react-select {
        width: 100%;
      }
      .field-type__wrap {
        width: 100%;
        padding-block: var(--base);
        padding-inline: var(--file-gutter-h);
      }
    }

    &__headerTopRow {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--base);
      width: 100%;
      padding-block: var(--base);
      padding-inline: var(--file-gutter-h);
    }

    &__header__text {
      display: flex;
      flex-direction: column;
      gap: calc(var(--base) / 4);

      .error-pill {
        align-self: flex-start;
      }
    }

    &__filesContainer {
      display: flex;
      flex-direction: column;
      gap: calc(var(--base) / 4);
      margin-top: calc(var(--base) / 2);
      width: 100%;
      padding-inline: var(--file-gutter-h);

      .shimmer-effect {
        border-radius: var(--style-radius-m);
      }
    }

    &__fileRowContainer {
      --rowPadding: calc(var(--base) / 4);
      position: relative;
      &:last-child {
        margin-bottom: calc(var(--base) / 4);
      }
    }

    &__fileRow {
      @include btn-reset;
      display: flex;
      padding: var(--rowPadding);
      align-items: center;
      gap: calc(var(--base) / 2);
      border-radius: var(--style-radius-m);
      max-width: 100%;
      cursor: pointer;
      width: 100%;

      &:hover {
        background-color: var(--theme-elevation-100);
      }

      .file-selections__thumbnail,
      .file-selections__thumbnail-shimmer {
        width: calc(var(--base) * 1.2);
        height: calc(var(--base) * 1.2);
        border-radius: var(--style-radius-s);
        flex-shrink: 0;
        object-fit: cover;
      }

      p {
        margin: 0;
      }
    }

    &__fileDetails {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    &__fileRowContainer--active {
      .file-selections__fileRow {
        background-color: var(--theme-elevation-100);
      }

      .file-selections__remove {
        .icon--x {
          opacity: 1;
        }
      }
    }

    &__fileRowContainer--error {
      .file-selections__fileRow {
        background-color: var(--theme-error-100);
      }

      &.file-selections__fileRowContainer--active .file-selections__fileRow,
      .file-selections__fileRow:hover {
        background-color: var(--theme-error-200);
      }

      .file-selections__remove--overlay:hover {
        background-color: var(--theme-error-50);

        .icon--x {
          opacity: 1;
        }
      }
    }

    &__errorCount {
      margin-left: auto;
      position: absolute;
      transform: translate(50%, -50%);
      top: 0;
      right: 0;
    }

    &__fileName {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &__fileSize {
      font-size: calc(var(--base) / 2);
      color: var(--theme-elvation-400);
      flex-shrink: 0;
    }

    &__remove {
      @include btn-reset;
      margin: 0;
      margin-left: auto;

      .icon--x {
        opacity: 0.75;
      }
    }

    &__remove--underlay {
      pointer-events: none;
      opacity: 0;
    }

    &__remove--overlay {
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      bottom: 50%;
      right: var(--rowPadding);
      height: 20px;
      border-radius: var(--style-radius-m);
      cursor: pointer;

      &:hover {
        background-color: var(--theme-elevation-200);
      }
    }

    &__header__actions {
      display: flex;
      align-items: center;
      gap: var(--base);
    }

    &__header__addFile {
      height: fit-content;
    }

    &__toggler {
      display: none;
      margin: 0;
      padding-block: 0;

      &__text {
        display: none;
      }
    }

    &__header__mobileDocActions {
      display: none;
    }

    &__animateWrapper {
      overflow: auto;
    }

    &__mobileBlur {
      @include blur-bg;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1);
    }

    &__showingFiles {
      .file-selections__mobileBlur {
        opacity: 1;
      }
    }

    @include mid-break {
      --file-gutter-h: var(--gutter-h);
      flex-direction: column-reverse;
      width: 100%;
      position: sticky;
      bottom: 0;
      flex-shrink: 0;

      &__showingFiles {
        z-index: 2;
      }

      &__filesContainer {
        @include blur-bg;
      }

      &__fileRowContainer {
        z-index: 1;
      }

      &__header {
        margin-top: 0;
      }

      &__headerTopRow {
        border-top: 1px solid var(--theme-border-color);
        padding-block: 0 calc(var(--base) * 0.8) 0;
      }

      &__header__text {
        display: none;
      }

      &__header__actions {
        flex-grow: 2;
        display: flex;
        justify-content: flex-end;
      }

      &__header__mobileDocActions {
        position: relative;
        display: flex;
        width: 100%;
        padding-block: calc(var(--base) * 0.8);
        padding-inline: var(--file-gutter-h);
        border-top: 1px solid var(--theme-border-color);

        > div {
          display: flex;
          justify-content: flex-end;
          width: 100%;
          button {
            flex: 0.5;
          }
        }
      }

      &__toggler {
        padding-right: 0;
        padding-left: 0;
        padding-top: calc(var(--base) * 0.8);
        padding-bottom: calc(var(--base) * 0.8);
        display: flex;
        justify-content: flex-end;
        flex-grow: 1;

        .btn__label {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        &__text {
          display: flex;
        }

        svg {
          max-width: 1.5rem;
        }

        .btn__content {
          width: 100%;
        }
      }

      .btn {
        margin: 0;
      }
    }
  }
}