.vb-fileDropArea {
  width: auto;
  height: auto;
  position: relative;

  &__fade-enter,
  &__fade-exit {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &__fade-enter-active,
  &__fade-enter-done {
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  &__overlay {
    z-index: $vbOverlayZIndex;
    border: dashed 2px $vbColorsP05;
    transition-duration: 0.2s;
    transition-property: opacity;
    background-color: rgba($color: $vbColorsP05, $alpha: 0.1);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(1px);

    &--disabled {
      cursor: not-allowed;
      border: dashed 2px $vbColorsGY05;
      background-color: rgba($color: $vbColorsGY05, $alpha: 0.1);
    }
  }

  &__icon {
    fill: $vbColorsP10;

    &--disabled {
      width: 3rem;
      height: 3rem;
      margin-bottom: 1rem;
      fill: $vbColorsGY05;
    }
  }

  &__contentDescription {
    color: $vbColorsP10;
    font-weight: bold;

    &--disabled {
      color: $vbColorsGY05;
    }
  }
}