@import "./../styles/index.scss";

.dropfilefiled-container{
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  height: calc(100% - 64px);
  justify-content: space-between;
  margin: 0;
  overflow-y: auto;
  position: relative;
  width: calc(100% - 4px);

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

.dragActive{
  border: 2px dashed #0091ff;
  border-radius: 8px;
  margin: 5px;
  width: calc(100% - 12px);

  &::before{
    content: url(../#{$_PATH_TO_IMAGES}/upload.svg);
    margin: 0 auto;
    position: relative;
    top: calc(50% - 28px);
  }
}

.dropfilefiled-content{
  align-items: center;
  display: flex;
  flex-direction: column;
  position: absolute;
  right: calc(50% - 50px);
  top: calc(50% + 30px);
  width: 100px;

  span{
    color: #4a4a4a;
    font-family: NunitoSans;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_COLOR_TEXT_DROPFILE, $_BACKGROUND_COLOR_DROPFILE){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .dragActive{
      background-color: $_BACKGROUND_COLOR_DROPFILE;
      
      .dropfilefiled-content span{
          color: $_COLOR_TEXT_DROPFILE;
      }
    }
  }
}

@include themable($_THEME_LIGHT, $_COLOR_TEXT_DROPFILE_LIGHT, $_BACKGROUND_COLOR_DROPFILE_LIGHT);
@include themable($_THEME_DARK, $_COLOR_TEXT_DROPFILE_DARK, $_BACKGROUND_COLOR_DROPFILE_DARK);