import styled from 'styled-components';

import { RiUploadCloud2Line } from 'react-icons/ri';
import { BsSearch } from 'react-icons/bs';

export const Container = styled.div`
  width: 100%;

  .upload-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin: 40px;
    width: 350px;
    height: max-content;

    .dragger-props-custom {
      border: none;
      background: transparent;
    }

    button.upload-dash {
      margin: 16.5px 0px;
    }

    .upload-dash {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      width: 100%;
      height: 250px;
      
      padding-top: 35px;
      padding-bottom: 35px;

      background: #FFFFFF;
      border: 4px solid rgba(67, 219, 178, 0.25);
      border-radius: 50px;

      cursor: pointer;
      transition: ease-in-out 0.2s;

      .search-desc {
        margin-bottom: 20px;
      }
      
      .upload-desc {
        text-align: center;

        font-size: 20px;
        font-weight: 600;
        color: rgba(67, 219, 178, 0.25);

        transition: ease-in-out 0.2s;
      }

      &:hover {
        border: 4px dashed #33AC91;

        .upload-icon {
          color: #33AC91;
        }

        .upload-desc {
          color: #33AC91;
        }
      }
    }

    .handle-button {
      width: 200px;
      height: 45px;

      margin-top: 50px;

      color: #FFFFFF;
      font-size: 20px;
      font-weight: 600;

      background-color: #43DBB2;
      border: none;
      border-radius: 50px;

      transition: ease-in-out 0.2s;

      &:hover {
        background-color: #33AC91;
      }
    }
  }

  .upload-search-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;

    padding-right: 250px;
    padding-left: 250px;

    .search-dash {
      border: 4px solid rgba(67, 219, 178, 0.25);

      &:hover {
        border: 4px solid #33AC91 !important;
      }
      
    }
  }
`;

export const UploadIcon = styled(RiUploadCloud2Line)`
  font-size: 100px;
  color: rgba(67, 219, 178, 0.25);

  transition: ease-in-out 0.2s;
`;

export const SearchIcon = styled(BsSearch)`
  font-size: 80px;
  color: rgba(67, 219, 178, 0.25);

  transition: ease-in-out 0.2s;
`;