// ********************************************
// container definition
$uploader-wrapper: #{$prefix}-uploader-wrapper;
$uploader: #{$prefix}-uploader;
$uploader-drag-active: #{$prefix}-uploader-drag-active;
$uploader-icon-wrapper: #{$prefix}-uploader-icon-wrapper;
$uploader-info: #{$prefix}-uploader-info;

$divider: #{$prefix}-divider;
$dsicon: #{$prefix}-icon;

// ********************************************
// dimsum components
$dsbutton: #{$prefix}-button;

$container-radius: 4px; // todo: this should be global

.#{$divider} {
  margin: space(xxs) * 0.5 space(xxs);
  border-right: border-size() solid color(neutral, 100);
  border-bottom: border-size() solid color(neutral, 100);
}

.#{$uploader-wrapper} {
  display: inline-flex;
  flex-direction: column;

  .#{$uploader} {
    position: relative;
    display: inline-flex;
    border: border-size() solid color(neutral, 200);
    padding: space(xxs) * 1.5 space(s);
    border-radius: $container-radius;
    align-items: center;
    outline: none;

    .#{$uploader-icon-wrapper} {
      position: relative;
      @include icon-color(color(neutral, 500));
    }

    > .#{$divider} {
      height: space(l);
      margin: 0 space(s);
    }

    .#{$uploader-info} {
      &__text {
        @include body-text-style();
        color: color(neutral, 700);
      }
      &__actions {
        display: flex;

        .#{$dsbutton} {
          &:not(:first-child) {
            margin-left: space(xxs);
          }
          padding: 0;
          height: initial;
        }

        .#{$dsbutton}--variant-disabled {
          cursor: default;
        }
      }
    }

    .#{$uploader-drag-active} {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: color(brand-primary, 500);
      color: color(neutral, 000);
      border: border-size() solid color(brand-primary, 500);
      border-radius: $container-radius;
      @include body-text-style(bold);
      @include center();

      .#{$dsicon} {
        @include icon-color(color(neutral, 000));
        margin-right: space(xs);
      }
    }
  }

  &:not(.#{$uploader-wrapper}--disabled) {
    .#{$uploader} {
      &--drag-active {
        border: border-size() solid transparent;

        .#{$uploader-drag-active} {
          visibility: visible;
          display: flex;
        }
      }
    }

    .#{$uploader}:focus {
      @include dsFocus();
    }

    .#{$uploader}:hover,
    .#{$uploader}:focus {
      background-color: color(brand-primary, 100);
      border: border-size() dashed color(brand-primary, 500);
      .#{$divider} {
        border-color: color(brand-primary, 300);
      }
      .#{$uploader-icon-wrapper} {
        @include icon-color(color(brand-primary, 500));
      }
    }
  }

  &__accepted-types {
    margin-top: space(xxs) * 0.5;
    @include body-micro-text-style();
    color: color(neutral, 500);
    text-transform: uppercase;
    text-align: right;
  }
}