@import "../../../style/mixin";

@include export-module('file-upload-common-service-input-theme') {
  .file-upload-common-service-input {
    .upload-wrapper {
      background-color: $tp-upload-wrapper-bg-color;
      border: $tp-upload-wrapper-border-color $tp-upload-wrapper-border-width dashed;
      border-radius: $tp-upload-wrapper-border-radius;
      transition: all $tp-upload-wrapper-transition;

      &:hover {
        @extend .highlight;
      }
    }

    .file-selected {
      .file-info {
        .name {
          font-weight: $tp-file-name-font-weight;
        }

        .size {
          font-size: $tp-file-size-font-size;
          color: $tp-file-size-color;
        }
      }

      .reset-file {
        opacity: $tp-reset-file-opacity;
        transition: all $tp-reset-file-transition;

        &:hover {
          opacity: 1;
        }
      }

      .upload-status {
        font-size: $tp-upload-status-font-size;
        color: $tp-upload-status-color;
      }
    }

    .upload-progress {
      color: $tp-upload-progress-color;
      font-size: $tp-upload-progress-font-size;

      .progress-container {
        background-color: $tp-progress-container-bg-color;
        border-radius: $tp-progress-container-border-radius;
      }

      .progress-bar {
        background-color: $tp-progress-bar-bg-color;
        border-radius: $tp-progress-bar-border-radius;
        transition: width $tp-progress-bar-transition ease;
      }
    }

    .requirements-info {
      color: $tp-requirements-info-color;
      font-size: $tp-requirements-info-font-size;
    }

    .highlight {
      border-color: $tp-highlight-border-color;
      background-color: $tp-highlight-bg-color;
    }

    .wrong-file-type {
      opacity: $tp-wrong-file-type-opacity;
    }
  }
}
