import styled from "styled-components";

export const Wrapper = styled.div`
    display: flex;
    width: 99%;
    margin: 0 0 5px -10px;
    padding: 5px 0 5px 10px;
    display: flex;
    align-items: center;
    transition: 0.2s;
    border-radius: 0 3px 3px 0;
    background: ${({ active }) =>
        active ? "rgba(255, 255, 255, 0.1)" : "none"};

    &:hover {
        cursor: pointer;
        background: rgba(255, 255, 255, 0.1);
    }
`;

export const Text = styled.p`
    font-size: 14px;
    margin-left: 10px;
`;

export const Image = styled.img`
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(116deg)
        brightness(109%) contrast(109%);
    width: 20px;
    height: 20px;
`;