import * as React from 'react';

import AccessibleSVG from '../accessible-svg';
import { bdlBoxBlue } from '../../styles/variables';

import { Icon } from '../iconTypes';

const IconMobileApp = ({ className = '', color = bdlBoxBlue, height = 155, title, width = 150 }: Icon) => (
    <AccessibleSVG
        className={`icon-mobile-app ${className}`}
        height={height}
        title={title}
        viewBox="0 0 150 155"
        width={width}
    >
        <g fill="none" fillRule="evenodd">
            <path
                className="fill-color"
                d="M101 2.134v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.004 1.004 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49c-.276 0-.5-.23-.5-.505v-.63a.993.993 0 0 1-.366-.365h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm-90.5 83.5v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.004 1.004 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49c-.276 0-.5-.23-.5-.505v-.63a.993.993 0 0 1-.366-.365H9.49a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm136 5.5v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.004 1.004 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49c-.276 0-.5-.23-.5-.505v-.63a.993.993 0 0 1-.366-.365h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm-29-78v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.004 1.004 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49c-.276 0-.5-.23-.5-.505v-.63a.993.993 0 0 1-.366-.365h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm-74 13.5v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.004 1.004 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49c-.276 0-.5-.23-.5-.505v-.63a.993.993 0 0 1-.366-.365h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm3 111.5v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.004 1.004 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49c-.276 0-.5-.23-.5-.505v-.63a.993.993 0 0 1-.366-.365h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm20.938-13.925v-.403c0-.17.144-.307.312-.307.173 0 .313.134.313.307v.402a.623.623 0 0 1 .228.228h.403c.17 0 .307.144.307.312a.308.308 0 0 1-.307.313h-.402a.623.623 0 0 1-.228.228v.403c0 .17-.144.307-.312.307a.314.314 0 0 1-.313-.303v-.406a.623.623 0 0 1-.228-.228h-.403a.312.312 0 0 1-.307-.312c0-.173.134-.313.307-.313h.402a.623.623 0 0 1 .228-.228zm69.062-5.576v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.004 1.004 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49c-.276 0-.5-.23-.5-.505v-.63a.993.993 0 0 1-.366-.365h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zM37.937 34.71v-.403c0-.17.145-.307.313-.307.173 0 .313.134.313.307v.402a.628.628 0 0 1 .228.227h.403c.17 0 .307.145.307.313a.308.308 0 0 1-.307.313h-.402a.628.628 0 0 1-.227.228v.403a.313.313 0 0 1-.626.004v-.406a.628.628 0 0 1-.228-.227h-.403a.313.313 0 0 1-.307-.313c0-.173.134-.313.307-.313h.402a.628.628 0 0 1 .227-.228zm-17.5 69v-.403c0-.17.145-.307.313-.307.173 0 .313.134.313.307v.402a.623.623 0 0 1 .228.228h.403c.17 0 .307.144.307.312a.308.308 0 0 1-.307.313h-.402a.628.628 0 0 1-.227.228v.403a.313.313 0 0 1-.626.004v-.406a.623.623 0 0 1-.228-.228h-.403a.312.312 0 0 1-.307-.312c0-.173.134-.313.307-.313h.402a.628.628 0 0 1 .227-.228zm107 10.5v-.403c0-.17.145-.307.313-.307.173 0 .313.134.313.307v.402a.623.623 0 0 1 .228.228h.403c.17 0 .307.144.307.312a.308.308 0 0 1-.307.313h-.402a.623.623 0 0 1-.228.228v.403c0 .17-.144.307-.312.307a.314.314 0 0 1-.313-.303v-.406a.623.623 0 0 1-.228-.228h-.403a.312.312 0 0 1-.307-.312c0-.173.134-.313.307-.313h.402a.623.623 0 0 1 .228-.228z"
                fill={color}
            />
            <g transform="translate(55 27)">
                <rect
                    className="stroke-color"
                    fill="#FFF"
                    height="112"
                    rx="3.6"
                    stroke={color}
                    strokeWidth="2"
                    width="61"
                    x="3"
                />
                <circle className="stroke-color" cx="33" cy="99" r="5" stroke={color} strokeWidth="1.8" />
                <path
                    className="stroke-color"
                    d="M3 21h61v66H3z"
                    fill="#FFF"
                    stroke={color}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                />
                <rect
                    className="fill-color"
                    fill={color}
                    fillOpacity=".1"
                    height="60"
                    rx="2.574"
                    width="55"
                    x="6"
                    y="24"
                />
                <path
                    className="stroke-color"
                    d="M28 14h10"
                    stroke={color}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="1.8"
                />
                <circle className="fill-color" cx="33" cy="8" fill={color} r="2" />
                <ellipse className="fill-color" cx="32.5" cy="125" fill={color} fillOpacity=".1" rx="32.5" ry="3" />
            </g>
            <g transform="translate(1 34)">
                <rect
                    className="stroke-color"
                    fill="#FFF"
                    height="60"
                    rx="1.5"
                    stroke={color}
                    strokeWidth="2"
                    width="40"
                    x="22"
                />
                <path
                    className="stroke-color"
                    d="M31 9.498C31 8.67 31.676 8 32.5 8h32.41c.83 0 1.924.528 2.437 1.166l7.716 9.6c.517.642.937 1.844.937 2.656V66.51c0 .822-.67 1.49-1.497 1.49H32.497A1.5 1.5 0 0 1 31 66.502V9.498z"
                    fill="#FFF"
                    stroke={color}
                    strokeWidth="2"
                />
                <path
                    className="fill-color"
                    d="M.864 28.922a1.036 1.036 0 0 0-.005.098C.86 33.396 3.93 35 9.5 35H21a1 1 0 0 0 0-2H9.5c-4.542 0-6.58-1.03-6.64-3.853v-.02c0-2.15 1.523-3.97 3.796-4.13L40.5 25c1.765 0 2.5.446 2.5 1.5 0 1.056-.735 1.5-2.5 1.5H10.887a1 1 0 0 0 0 2H40.5c2.727 0 4.5-1.073 4.5-3.5 0-2.425-1.774-3.5-4.5-3.5H6.586C3.22 23.235.96 25.854.864 28.922zM38.5 36a1 1 0 0 1 .998-1h28.004a1 1 0 1 1 0 2H39.498a.997.997 0 0 1-.998-1zm0 5a1 1 0 0 1 .998-1h28.004a1 1 0 1 1 0 2H39.498a.997.997 0 0 1-.998-1zm0 5c0-.552.445-1 .993-1h16.014c.548 0 .993.444.993 1 0 .552-.445 1-.993 1H39.493a.994.994 0 0 1-.993-1zm20.4 0a1 1 0 0 1 .99-1h4.02c.546 0 .99.444.99 1a1 1 0 0 1-.99 1h-4.02a.993.993 0 0 1-.99-1zM14.39 21H10.5a1 1 0 1 1 0-2H21a1 1 0 0 1 0 2h-6.61z"
                    fill={color}
                />
                <path
                    className="fill-color"
                    d="M33 56.095c0-.828.64-1.275 1.445-1.07 0 0 1.3.926 12.222.926 6.79 0 9.8 2.838 13.666 2.838 7.822 0 12.4-3.403 12.4-3.403.7-.436 1.267-.11 1.267.71v8.38c0 .827-.677 1.498-1.508 1.498H34.508a1.507 1.507 0 0 1-1.508-1.5v-8.378z"
                    fill={color}
                    fillOpacity=".1"
                />
                <path
                    className="stroke-color"
                    d="M75 19h-8.385A1.617 1.617 0 0 1 65 17.385V9"
                    stroke={color}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                />
            </g>
        </g>
    </AccessibleSVG>
);

export default IconMobileApp;
