// Temporary
.input-file {
	position: relative;

  &-wrapper {
    position: relative;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
    background-color: $background;
    width: 200px;
    height: 200px;
    border: 1px solid $smoke-blue;
    border-radius: 3px;
    margin-bottom: 0;
    padding: 20px;

    &:hover {

      .btn {
        opacity: 1;
        visibility: visible;
      }

      .input-file-preview {

        &::before {
          opacity: 1;
          visibility: visible;
        }
      }
    }

    span {
      @include center();
      font-size: 0.75rem;
      color: $text-gray;
      width: 100%;
      text-align: center;
    }

    .btn {
      position: absolute !important;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      visibility: hidden;
    }
  }

  &-preview {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    &::before {
      @include center;
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background-color: rgba($white, 0.85);
      transition: all 0.35s;
      opacity: 0;
      visibility: hidden;
    }
  }

  .label {
    display: block;
    max-width: 200px;
  }

	input[type='file'] {
		position: absolute;
		top: 0;
		left: 0;
		width: 2px;
		height: 2px;
		overflow: hidden;
		opacity:0;
	}
}
