//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use "../../config" as *;
@use "../../motion" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../utilities/convert" as *;

@use "../select";

/// React dropzone styles
/// @access public
/// @group react-dropzone
@mixin react-dropzone {
  .#{$prefix}--dropzone {
    .#{$prefix}--file-container {
      .#{$prefix}--file__selected-file {
        gap: 0.75rem 0.5rem;
      }

      .#{$prefix}--file__state-container {
        .#{$prefix}--file-size {
          margin-right: 0.3rem;
          font-size: 0.875rem;
        }
        .#{$prefix}--loading__svg {
          stroke: $action-default-fill-primary-default;
          width: auto;
        }
        svg {
          width: 0.8rem;
          path {
            fill: $action-default-fill-primary-default;
          }
          &:hover {
            path {
              fill: $brand-wfp-blue-wfp-blue60;
            }
          }
        }
      }

      .#{$prefix}--file-filename {
        margin-left: 0;
        font-size: 0.875rem;
      }

      &__title {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 19.07px;
        margin-top: $spacing-05;
        margin-bottom: $spacing-05;
      }
    }

    &__input {
      padding: $spacing-05;
      border: 2px dashed $neutral-neutral90;
      border-radius: 4px;
      background: $neutral-neutral95;
      text-align: center;
      cursor: pointer;
      color: $action-default-fill-primary-default;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 102px;

      &--drag-active {
        background: $border-subtle;
        border-color: $action-default-fill-primary-default;
        box-shadow: 0px 0px 10px rgba(#0b77c2, 0.2);
      }
      @include type-style("body-short");
      &:hover {
        border-color: $action-default-fill-primary-default;
      }
      &:focus {
        outline: none;
        background: $layer-primary;
      }
      &__icon {
        margin-bottom: $spacing-03;
        path {
          fill: $action-default-fill-primary-default;
        }
      }
    }

    &__file-list {
      h4 {
        @include type-style("body-short");
        margin-bottom: $spacing-02;
      }
      margin-top: $spacing-03;
      @include type-style("body-short");
    }
  }
}