import styled from "styled-components";

export const DatePickerWrapper = styled.div`
`;

export const DateCont = styled.div`

      display: flex;
      align-items: center;
      width: 120px;
      border-radius: 10px;
      padding: 7px 12px;
    //   border: 0.5px solid #e0e0e0;
      border: 0.5px solid ${(props) => (props.borderColor ? props.borderColor : "#e0e0e0")};


      .react-datepicker{
        background: #FFFFFF;
        border: none;
        border-radius: 12px;
        z-index: 1;
        // padding: 5px;
      
      }

      .react-datepicker__header{
        background: #FFFFFF;
        border: none;
        
      }

      .react-datepicker__input-container{
        margin-left: 12px;
        // margin-left: 50px;
        opacity: ${(props) => (props.opacity ? props.opacity : 0.7)};
        
        input{
          border: none;
         width: 78px;
        }
      }

      .react-datepicker__current-month{
        display: flex;
        justify-content: space-between;
        padding: 5px 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        font-weight: 600;
        font-size: 16px;
      }

      .react-datepicker__navigation {
        background: #F7F7F7;
        border: 0.458333px solid #E0E0E0;
        border-radius: 1.83333px;
        padding: 15px;
        margin-top: 15px;
        // margin-right: 10px;
        
      }
      .react-datepicker__navigation--next {
        margin-right: 22px;
        font-size: 10px;
      }

      .react-datepicker__day--keyboard-selected{
        background: #00C2C2;
      }

      .react-datepicker__navigation--previous {
        margin-left: 275px;
        font-size: 10px;
      }

      .react-datepicker__navigation-icon--next {
        width: 10px;
        height: 20px;
        font-size: 20px;
        margin-right: 10px;
      }

      .react-datepicker__navigation-icon--previous{
        width: 10px;
        height: 20px;
        font-size: 20px;
        margin-left: 10px;
      }

      .react-datepicker__navigation-icon--next{

      }

      .react-datepicker__day-names {
        display: flex;
        justify-content: space-around;
        font-weight: 600;
        font-size: 15px;
        padding: 5px 5px;

      }

      .datepicker_style{
        background: #FFFFFF;
        border-radius: 12px;
        .react-datepicker__day{
          width: 46px;
          height: 33px;
          padding: 4px;
          font-size: 14px;
          &:focus {
            border: 2px solid rgba(59, 59, 59, 0.282);
          }
          color: #444444;
          &:hover {
            color: #0094BA;
            background: rgba(0, 148, 186, 0.04);
          }
        }

        .react-datepicker__day--selected{
          background: #00C2C2;
          color: #EEEEEE;
          border-radius: 10px;

          &:hover {
            color: #0094BA;
            background: rgba(0, 148, 186, 0.04);
          }
        }
      }

      svg {
        width: 45px;
      }
      .react-datepicker-wrapper {
        width: auto !important;

        .react-datepicker__input-container input {
          border: none;
          font-size: 12px;
          width: 100%;
          outline: none;
        }
      }

      .react-datepicker__day--selected,
      .react-datepicker__day--keyboard-selected,
      .react-datepicker__day--in-selecting-range,
      .react-datepicker__day--in-range {
        border-radius: 1.3rem;
        background-color: rgba(176, 220, 220, 0.42);
        color: #313333;
      }
      .datepicker-container {
        display: flex;
        align-items: center;
        position: relative;
        color: rgba(176, 220, 220, 0.42);
        // width: 215px;
        padding: 8px 16px;
        border-radius: 12px;
        font-size: 13px;
        margin-left: auto;
      }
`;

export const GraphCardBody = styled.div`
  width: 100%;
  display: flex;
  margin-top: 20px;
  margin-bottom: 10px;
`;

export const GraphCardFooter = styled.div`
  width: 100%;
  display: flex;

  span {
    background-color: #f3f3f3;
    border: 0.5px solid #d9d9d9;
    font-weight: 500;
    font-size: 12px;
    color: #000000;
    border-radius: 10px;
    margin-right: 10px;
    padding: 12px 16px;
    cursor: pointer;

    &.active {
      background-color: #00c2c2;
      color: #ffffff;
    }
  }
`;


// Date picker Navigation button

export const NavContainer = styled.div`
    display: flex;
    justify-content: space-between;
    margin-right: 20px;
    padding: 3px;

    .custom-datepicker-selected-month{
      font-weight: 600;
      font-size: 16px;
      line-height: 150%;
      text-align: center;
      color: #000000;
      margin-left: 20px;
    }

    .buttons{
      display: flex;
    }

    .left_icon{
      margin-right: 7px;
    }
`;

export const NavButton = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F7F7F7;
  width: 22px;
  height: 22px;

  
  
`;