// @flow
import * as React from 'react';

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

import type { Icon } from '../flowTypes';

const IconRelayFlag = ({ className = '', height = 16, title, width = 16, color = bdlGray50 }: Icon) => (
    <AccessibleSVG
        className={`bdl-IconRelayFlag ${className}`}
        height={height}
        title={title}
        viewBox="0 0 16 16"
        width={width}
    >
        <path
            fill={color}
            fillRule="nonzero"
            d="M11.998 2a.51.51 0 0 1 .29.093l-.053-.033a.5.5 0 0 1 .032.019l.02.014a.508.508 0 0 1 .198.297.493.493 0 0 1 .013.11l-.005-.066a.503.503 0 0 1 .004.042V2.5a.509.509 0 0 1-.092.29l.036-.059a.5.5 0 0 1-.025.043l-.011.016-2.235 3.131 3.66 3.203a.508.508 0 0 1 .169.34L14 9.5a.504.504 0 0 1-.124.33l.033-.042A.502.502 0 0 1 13.5 10l.087-.008a.503.503 0 0 1-.048.006L13.5 10H4.911l1.065 3.348a.5.5 0 0 1-.241.594l-.083.034a.5.5 0 0 1-.628-.324l-3.5-11A.507.507 0 0 1 1.5 2.5l.007.083a.497.497 0 0 1-.007-.067V2.5a.51.51 0 0 1 .125-.33.442.442 0 0 1 .088-.08.528.528 0 0 1 .135-.066l-.055.02a.497.497 0 0 1 .043-.017l.012-.003A.507.507 0 0 1 2 2l-.083.007A.497.497 0 0 1 1.985 2H2zM7.025 3H2.683l1.909 6h3.577L5.171 6.376a.508.508 0 0 1-.168-.317.505.505 0 0 1 .09-.35l-.036.06a.501.501 0 0 1 .067-.098l-.042.056.011-.017L7.025 3zm4 0H8.254L6.17 5.921 9.688 9h2.481L9.171 6.376a.508.508 0 0 1-.168-.317.505.505 0 0 1 .09-.35l-.036.06a.501.501 0 0 1 .067-.098l-.042.056.011-.017L11.025 3z"
        />
    </AccessibleSVG>
);

export default IconRelayFlag;