import styled from "styled-components";
import { gray } from "../../core/colors/colors";
import { fonts } from "../../styles/fonts";

export const InputContainer = styled.div`
  width: 400px;
  height: 40px;

  display: flex;
  align-items: center;
  gap: 4px;

  position: relative;

  input::placeholder {
    color: ${gray[300]};

    ${fonts["body-r"]}
  }
`;

export const InputStyle = styled.input`
  width: 100%;
  height: 100%;

  padding: 0 16px;

  border: 1px solid ${gray[300]};
  border-radius: 8px;

  background-color: #fff;
  color: #000;
  outline: 0;

  &:disabled {
    border: 1px solid ${gray[300]};

    background-color: ${gray[50]};
    color: ${gray[400]};
  }
`;

export const InputXButton = styled.button`
  width: 16px;
  height: 16px;

  border: 1px solid ${gray[300]};
  border-radius: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: ${gray[100]};

  position: absolute;
  right: 16px;

  svg {
    width: 12px;
    height: 12px;

    stroke: ${gray[800]};
  }

  svg:hover {
    cursor: pointer;
  }
`;
