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

export const SelectInputStyle = styled(InputStyle)`
  padding: 0 65px 0 16px;

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

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

export const SelectInputButtonContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;

  position: absolute;
  right: 17px;

  opacity: 0.7;

  & > button {
    padding: 1px 7px;

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

    display: flex;

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

    cursor: pointer;

    ${fonts.button};
  }
`;
