@import "~styles/mixins";

.FileStackInput {

  .preview-wrapper {
    margin-top: $form_element_vertical_spacing;
  }


  .preview {
    max-width: 300px;
    // broken image
    min-height: 50px;
    position: relative;
    font-size: 0;


    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .delete {
      cursor: pointer;
      @include absolute-fill;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: all 300ms;

      .button {
        @include center_align;
        color: white;
        font-size: 16px;
      }

      &:hover {
        opacity: 1;
      }
    }
  }

  .file {
    border: 1px solid $color_border;
    padding: 8px 10px;
    text-align: center;
    background-color: $color-grey-background;
  }

  .file-selector {
    margin-top: $form_element_vertical_spacing;
    position: relative;
    padding: 8px 10px;
    text-align: center;
    border-radius: $border_radius;
    border: 1px solid $color_border;
    background-color: $color-grey-background;

    &:hover {
      cursor: pointer;

      &:before {
        content: '';
        @include absolute-fill;
        background-color: rgba(0, 0, 0, 0.08);
      }
    }
  }


}
