@import "./vars.pcss";

.filesUploader {
  position: var(--filesUploaderPosition);
  width: var(--filesUploaderWidth);
  @mixin mb var(--filesUploaderMb);

  /* error */

  .isInvalid ~ &,
  &&--isError,
  &:has(.isInvalid) {
    --filesUploaderZoneBorderColor: var(--filesUploaderZoneInvalidBorderColor);
    --filesUploaderZoneBg: var(--filesUploaderZoneInvalidBg);
    --filesUploaderZoneColor: var(--filesUploaderZoneInvalidColor);
  }

  /* loading */

  &&--isLoading {
    --filesUploaderZoneBorderColor: var(--filesUploaderZoneLoadingBorderColor);
    --filesUploaderZoneBg: var(--filesUploaderZoneLoadingBg);
    --filesUploaderZoneColor: var(--filesUploaderZoneLoadingColor);
    --filesUploaderContainerCursor: var(--filesUploaderContainerLoadingCursor);
  }

  /* disabled */

  &&--isDisabled {
    --filesUploaderZoneBorderColor: var(--filesUploaderZoneDisabledBorderColor);
    --filesUploaderZoneBg: var(--filesUploaderZoneDisabledBg);
    --filesUploaderZoneColor: var(--filesUploaderZoneDisabledColor);
    --filesUploaderContainerCursor: var(--filesUploaderContainerDisabledCursor);
  }

  /* Скрытое поле */
  &__input {
    @mixin visuallyHidden;
  }

  /* Общий контейнер */

  &__container {
    display: block;
    cursor: var(--filesUploaderContainerCursor);

    @mixin transition var(--filesUploaderTransitionDuration);
    @mixin mb var(--filesUploaderContainerMb);
  }

  /* Зона загрузки */

  &__zone {
    width: var(--filesUploaderZoneWidth);
    min-height: var(--filesUploaderZoneMinHeight);
    padding: var(--filesUploaderZonePadding);
    display: var(--filesUploaderZoneDisplay);
    flex-direction: var(--filesUploaderZoneFlexDirection);
    align-items: var(--filesUploaderZoneAlignItems);
    justify-content: var(--filesUploaderZoneJustifyContent);
    background: var(--filesUploaderZoneBg);
    border-width: var(--filesUploaderZoneBorderWidth);
    border-style: var(--filesUploaderZoneBorderStyle);
    border-color: var(--filesUploaderZoneBorderColor);
    border-radius: var(--filesUploaderZoneBorderRadius);
    color: var(--filesUploaderZoneColor);
    user-select: none;
    touch-action: none;
    @mixin transition var(--filesUploaderTransitionDuration);

    &:hover {
      @media (hover: hover) {
        --filesUploaderZoneBorderColor: var(--filesUploaderZoneHoverBorderColor);
        --filesUploaderZoneBg: var(--filesUploaderZoneHoverBg);
        --filesUploaderZoneColor: var(--filesUploaderZoneHoverColor);
      }
    }
  }

  /* Иконка */

  &__icon {
    height: var(--filesUploaderIconWrapperSize);
    width: var(--filesUploaderIconWrapperSize);
    @mixin flexCenter;

    @mixin mb var(--filesUploaderIconMb);

    .icon {
      --iconSize: var(--filesUploaderIconSize);
    }
  }

  /* Подсказка */

  &__tip {
    line-height: var(--filesUploaderTipLineHeight);
    font-size: var(--filesUploaderTipFontSize);
    color: var(--filesUploaderTipColor);
    @mixin mb var(--filesUploaderTipTextMb);
  }

  /* Список для файлов */

  &__list {
    display: var(--filesUploaderListDisplay);
    flex-flow: var(--filesUploaderListFlexFlow);
    gap: var(--filesUploaderListGap);
    @mixin resetList;
  }

  /* Приложенный файл */

  &__file {
    width: var(--filesUploaderFileWidth);
    display: var(--filesUploaderFileDisplay);
    flex-flow: var(--filesUploaderFileFlexFlow);
    gap: var(--filesUploaderFileGap);
    align-items: var(--filesUploaderFileAlignItems);

    &--isLink {
      --filesUploaderFileNameCursor: pointer;
    }

    &Data {
      display: var(--filesUploaderFileDataDisplay);
      flex-flow: var(--filesUploaderFileDataFlexFlow);
      gap: var(--filesUploaderFileDataGap);
    }

    &Name {
      max-width: var(--filesUploaderFileNameMaxWidth);
      cursor: var(--filesUploaderFileNameCursor);
      @mixin textOverflow;
    }

    &Size {
      color: var(--filesUploaderFileSizeColor);
    }

    &Actions {
      display: flex;
      align-items: center;

      .btn {
        --btnBg: var(--filesUploaderFileDeleteBtnBg);
        --btnHoverBg: var(--filesUploaderFileDeleteBtnHoverBg);
        --btnBorderWidth: var(--filesUploaderFileDeleteBtnBorderWidth);
        --btnBorderColor: var(--filesUploaderFileDeleteBtnBorderColor);
        --btnBorderRadius: var(--filesUploaderFileDeleteBtnBorderRadius);
        --btnHeight: var(--filesUploaderFileDeleteBtnSize);

        .icon {
          --iconSize: var(--filesUploaderFileDeleteBtnIconSize);
        }
      }
    }
  }
}