import styled from "styled-components";
import { InputContainer } from "../../Input.styled";

export const AsyncInputContainer = styled(InputContainer)<{ stroke?: string }>`
  & > article {
    width: 16px;
    height: 16px;

    position: absolute;
    right: 16px;

    button {
      width: 16px;
      height: 16px;

      border: 0;
      
      background-color: #FFF;

      cursor: pointer;
    }

    div {
      width: 100%;
      height: 100%;

      border: 4px solid ${({ stroke }) => stroke};
      border-radius: 50%;

      background-color: #fff;
    }

    svg {
      width: 100%;
      height: 100%;

      stroke: ${({ stroke }) => stroke};
    }
  }
`;
