@import '../../../styles/common.scss';

.container {
  .content {
    display: grid;
    grid-template-columns: min-content min-content;
    grid-template-rows: min-content min-content;
    align-self: start;
    max-width: var(--input-max-width, $input-max-width);

    input[type='file'] {
      display: none;
    }

    .fileuploadbutton {
      display: grid;
      align-items: center;
      justify-items: center;

      margin-left: -50px;
      border: none;
      background-color: var(--file-upload-button-bg-color, $file-upload-button-bg-color);

      transition: box-shadow 0.15s ease-in-out 0s;

      cursor: pointer;

      svg {
        height: 45%;
      }

      svg * {
        stroke: white;
      }

      &:hover {
        border: none;
        background-color: var(--file-upload-button-hover-bg-color, $file-upload-button-hover-bg-color);
      }

      &.disabled {
        border: none;
        background-color: var(--file-upload-button-disabled-bg-color, $file-upload-button-disabled-bg-color);
        cursor: default;

        svg * {
          stroke: color-mix(in srgb, white 50%, transparent);
        }
      }
    }

    .filename {
      display: grid;
      align-content: baseline;
      color: var(--input-disabled-font-color, $input-disabled-font-color);
      border: 1px dashed var(--file-upload-input, $file-upload-input);
      background-color: var(
        --read-only-text-background-color,
        $read-only-text-background-color
      );
      padding: 0 12px;
      font-size: 16px;
      outline: none;
      height: 50px;
      width: 600px;

      padding-right: 50px;

      transition: box-shadow 0.15s ease-in-out 0s;

      &.hasError {
        border: 1px solid
          var(--input-invalid-border-color, $input-invalid-border-color);

        border-right: transparent;
      }
    }

    .dropTarget {
      display: grid;
      align-content: center;
      text-align: center;
      border: 1px dashed var(--file-upload-input, $file-upload-input);
      grid-column: 1 / span 2;
      height: 100px;
      width: 650px;
      z-index: 9999;

      transition: box-shadow 0.15s ease-in-out 0s;

      &:hover {
        border: 1px solid var(--input-border-color, $input-border-color);
        box-shadow: 0 0 0 2px var(--input-border-color, $input-border-color);
      }
    }

    .progressbar {
      margin-top: 5px;
    }
  }
}
