import styled from "styled-components";
import(
  "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000&display=swap"
);

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

export const DropDownHeader = styled.h3`
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  color: #313333;
`;

export const DropDownControls = styled.div`
  display: flex;
  border: 1px solid rgba(49, 51, 51, 1);
  border-radius: 12px;
  align-items: center;
  padding: 11px 20px;
  position: relative;
  p {
    font-size: 16px;
    font-family: "Nunito", sans-serif;
    width: 100%;
    cursor: pointer;
    margin: 0;
  }
  svg {
    cursor: pointer;
  }
`;

export const ControlInput = styled.input`
  font-size: 16px;
  font-family: "Nunito", sans-serif;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  border: none;
  cursor: caret;
  background: none;

  &::placeholder {
    color: #adb2b2; // Placeholder text color
  }
`;

// export const DropDownContent = styled.ul`
//   position: absolute;
//   top: 35px;
//   left: 0;
//   list-style-type: none;
//   padding-left: 25px;
//   padding-bottom: 0px;
//   width: 100%;
//   max-height: 200px;
//   overflow-y: scroll;
//   scrollbar-width: thin;
//   scrollbar-color: transparent transparent;

//   &::-webkit-scrollbar {
//     width: 6px;
//     background-color: transparent;
//   }

//   &::-webkit-scrollbar-thumb {
//     background-color: transparent;
//   }

//   .loader {
//     margin-bottom: 20px;
//   }
// `;

export const DropDownContent = styled.ul`
  position: absolute;
  top: 35px;
  left: 0;
  list-style-type: none;
  padding-left: 25px;
  padding-bottom: 0px;
  width: 100%;
  max-height: 100px;
  /* height: 142px; */
  overflow-y: auto;

  /* Added for Firefox */
  scrollbar-width: thin; 
  scrollbar-color: #888 #f5f7f7; 

  /* Added for Chrome, Safari, and Opera */
  &::-webkit-scrollbar {
    width: 6px; 
  }

  &::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #f5f7f7; 
    border-radius: 10px;
  }

  .loader {
    margin-bottom: 20px;
  }
`;


export const DropDownItem = styled.li`
  font-family: "Nunito", sans-serif;
  padding: 4px 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5f7f7;
  svg {
    cursor: pointer;
    path {
      stroke: rgba(49, 51, 51, 1);
    }
  }
  &:hover {
    color: white;
    background: rgba(0, 194, 194, 1);
    cursor: pointer;
    transition: background 0.4s;
    svg {
      path {
        stroke: white;
      }
    }
  }
`;

export const DownIcon = styled.svg`
  width: ${({ width }) => width || "18px"};
  height: ${({ height }) => height || "9px"};
  fill: none;
  cursor: pointer;
  path {
    stroke: ${({ fill }) => fill || "#7C8080"};
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
`;

export const Tick = styled.svg`
  width: ${({ size }) => size || "16px"};
  height: ${({ size }) => size || "16px"};
  fill: none;
  path {
    stroke: ${({ stroke }) => stroke || "white"};
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
`;
