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

.attach-container{
  border: 1px solid #e7e5e5;
  border-radius: 6px;
  height: 86px;
  margin-right: 20px;
  width: 205px;
}

.attach-preview{
  background-position: center;
  background-size: 100% auto;
  height: calc(100% - 34px);
  position: relative;
  width: 100%;
}

.attach-data{
  align-items: center;
  display: flex;
  height: 34px;
  width: 100%;

  >div{
    align-items: center;
    background-color: #f2f2f2;
    border-radius: 3px;
    display: flex;
    height: 19px;
    margin: 0 8px;
    width: 19px;
  }

  i{
    color: #b3b3b3;
    margin: 0 auto;
  }
}

.attach-downloaded{
  >div{
    height: 100%;
    position: absolute;
    width: 100%;

    .button-attach-preview{
      background-color: transparent;
      border: solid 1px #818080;
      display: none;
      margin: 0 auto;
    
      span{
        font-size: 10px;
        font-weight: 300;
        margin: 0 20px;
        top: 1px;
      }
    }

    >div {
      align-items: center;
      background-color: black;
      display: none;
      height: 23px;
      position: absolute;
      border-radius: 50%;
      right: 6px;
      top: 5px;
      width: 23px;
  
      i{
        color: white;
        margin: 0 auto;
        position: relative;
        top: -1px;
      }
    }

    &:hover{
      align-items: center;
      background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      display: flex;
      position: relative;

      .button-attach-preview{
        display: flex;
      }

      >div{
        display: flex;
      }
    }
  }
}

.attach-data-name{
  flex-grow: 2;
  font-size: 12px;
  font-weight: 600;
}

.attach-data-size{
  color: #9b9b9b;
  font-size: 12px;
  font-weight: 500;
  margin: 0 10px;
}







.attach-download{
  
}

.attach-unavailable{
  align-items: center;
  background-color: #d8d8d8;
  display: flex;
  
  div{
    background-image: url(../#{$_PATH_TO_IMAGES}/file-unsent.png);
    background-position: center;
    background-size: 100%;
    height: 37px;
    margin: 0 auto;
    width: 37px;
  }
}