/* ==========================================================================
   Variables.
   ========================================================================== */
:root {
  --icon-datagone-angle-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Eangle-bottom%3C/title%3E%3Cpath d='M500 582.23l388.91-388.91L1000 304.42l-500 500-500-500 111.09-111.1z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Earrow-left%3C/title%3E%3Cpath d='M535.2,868.9,225.6,561l772.8.6,1.6-123.2L227,439,535.2,132.7,452.5,48.4,0,500.9,452.5,951.6Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Earrow-right%3C/title%3E%3Cpath d='M547.5,951.6,1000,500.9,547.5,48.4l-82.7,84.3L772.8,439,0,438.4,1.6,561.6l772.8-.6L464.8,868.9Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-arrow-long-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Earrow-long-left%3C/title%3E%3Cpath d='M1000,559.6H247.5l150,147.5-92.4,92.6L0,494.6,305.1,189.5l92.4,92.6-150,147.4H1000Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-arrow-long-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Earrow-long-right%3C/title%3E%3Cpath d='M-.3,434.9h753L602.6,287.4,695,194.8,1000.3,500,695,805.2l-92.4-92.6L752.7,565.1H-.3Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-arrow-long-right-sidebar: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' xml:space='preserve'%3E%3Cpath fill='%23010101' d='M0 434.9h578.3L463 321.6l71-71.1 234.5 234.4L534 719.3l-71-71.1 115.3-113.3H0zM900.2 250.5h99.8v468.8h-99.8z'/%3E%3C/svg%3E");
  --icon-datagone-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Ebell%3C/title%3E%3Cpath d='M962.3,835.2H37.7V742.7H83.9V420.5C83.9,189.9,270.2,3,500,3S916.1,189.9,916.1,420.5V742.7h46.2ZM176.4,742.7H823.6V420.5c0-179.5-144.9-325-323.6-325S176.4,241,176.4,420.5Zm208,138.7H615.6a115.6,115.6,0,1,1-231.2,0Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Eclose%3C/title%3E%3Cpath d='M500,388.9,888.9,0,1000,111.1,611.1,500,1000,888.9,888.9,1000,500,611.1,111.1,1000,0,888.9,388.9,500,0,111.1,111.1,0Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Ecode%3C/title%3E%3Cpath d='M1000,500,764.3,735.7l-58.9-58.9L882.2,500,705.4,323.2l58.9-58.9Zm-882.2,0L294.6,676.8l-58.9,58.9L0,500,235.7,264.3l58.9,58.9Zm290,375H319.2l273-750h88.6Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-double-quotes-l: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' xml:space='preserve'%3E%3Cpath d='M88.8 817.4C31 756.1 0 687.2 0 575.6c0-196.3 137.8-372.2 338.2-459.1l50.1 77.3C201.2 295 164.7 426.2 150.1 509c30.1-15.6 69.5-21.1 108.2-17.5 101.2 9.4 180.9 92.5 180.9 195.7 0 108.4-87.9 196.3-196.3 196.3-60.2 0-117.7-27.5-154.1-66.1m560.8 0c-57.8-61.3-88.8-130.2-88.8-241.8 0-196.3 137.8-372.2 338.2-459.1l50.1 77.3C762 295 725.5 426.2 710.9 509c30.1-15.6 69.5-21.1 108.2-17.5C920.2 500.9 1000 584 1000 687.2c0 108.4-87.9 196.3-196.3 196.3-60.2 0-117.7-27.5-154.1-66.1'/%3E%3C/svg%3E");
  --icon-datagone-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M26.32 894.74h947.36V1000H26.32zM552.63 588l319.53-319.58 74.42 74.42L500 789.47 53.42 342.89l74.42-74.47 319.53 319.47V0h105.26z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Eedit%3C/title%3E%3Cpath d='M550.9,213.1l236,236.1L236,1000H0V763.9L550.9,213Zm78.7-78.7,118-118.1a55.7,55.7,0,0,1,78.7,0L983.7,173.7a55.7,55.7,0,0,1,0,78.7l-118.1,118Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3EFacebook%3C/title%3E%3Cpath d='M7.68 114.05h893.06v893.06H7.68Z' fill='none'/%3E%3Cpath d='M687.61 997.86V612.25h129.15l19.32-149.91H687.61v-95.66c0-43.4 12.07-73 74.29-73h79.39V159.59a1059.64 1059.64 0 0 0-115.7-5.92c-114.42 0-192.75 69.86-192.75 198.17v110.5H403.41v149.91h129.43v385.61H56.43a55.36 55.36 0 0 1-55.36-55.35V56.79A55.37 55.37 0 0 1 56.43 1.43h885.72a55.36 55.36 0 0 1 55.35 55.36v885.72a55.35 55.35 0 0 1-55.35 55.35Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-file-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Efile-add%3C/title%3E%3Cpath d='M650,100H150V900H850V300H650ZM50,49.6A49.7,49.7,0,0,1,99.9,0H700L950,250V949.7a49.9,49.9,0,0,1-49.6,50.3H99.6A50,50,0,0,1,50,950.4ZM450,450V300H550V450H700V550H550V700H450V550H300V450Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-file-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Efile-chart%3C/title%3E%3Cpath d='M450,250H550V750H450ZM650,450H750V750H650ZM250,550H350V750H250ZM650,100H150V900H850V300H650ZM50,49.6A49.7,49.7,0,0,1,99.9,0H700L950,250V949.7a49.9,49.9,0,0,1-49.6,50.3H99.6A50,50,0,0,1,50,950.4Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-file-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 894.7 994.1'%3E%3Cpath fill='%23010101' d='M497.1 497.1h149.1L447.4 695.9 248.5 497.1h149.1V298.2H497v198.9zm99.4-397.7H99.4v795.3h695.9V298.2H596.5V99.4zM0 49.3C.1 22 22.3-.1 49.6 0h596.5l248.5 248.5V944c.2 27.5-21.9 49.9-49.3 50.1h-796C22.2 993.9.2 972 0 944.8V49.3z'/%3E%3C/svg%3E");
  --icon-datagone-file-transfer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Efile-transfer%3C/title%3E%3Cpath d='M650,100H150V900H850V300H650ZM50,49.6A49.7,49.7,0,0,1,99.9,0H700L950,250V949.7a49.9,49.9,0,0,1-49.6,50.3H99.6A50,50,0,0,1,50,950.4ZM500,450V300L700,500,500,700V550H300V450Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-fullscreen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Efullscreen%3C/title%3E%3Cpath d='M900,50h100V350H900V150H700V50ZM100,50H300V150H100V350H0V50ZM900,850V650h100V950H700V850Zm-800,0H300V950H0V650H100Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M-83.33-141.37h1184.54v1184.54H-83.33z' fill='none'/%3E%3Cpath d='M141.4 949l-1 1-1.05-1H49.6A49.65 49.65 0 010 899.35V98.65A50 50 0 0149.6 49h900.8a49.63 49.63 0 0149.6 49.65v800.7A50 50 0 01950.4 949zM900 649V149H100v700l500-500zm0 141.4l-300-300L241.4 849H900zM300 449a100 100 0 11100-100 100 100 0 01-100 100z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-layout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M-163.67-157.27h1325.31V1168H-163.67z' fill='none'/%3E%3Cpath d='M722.22 1000.37V389.26H1000v555.56a55.55 55.55 0 01-55.56 55.55zm-111.11 0H55.56A55.55 55.55 0 010 944.82V389.26h611.11zM1000 278.15H0V55.93A55.55 55.55 0 0155.56.37h888.88A55.55 55.55 0 011000 55.93z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3ELinkedIn%3C/title%3E%3Cpath d='M53.73 184H1209.8v1156H53.73Z' fill='none'/%3E%3Cpath d='M849.65 850.63H702.52V620c0-55-1.1-125.76-76.74-125.76-76.68 0-88.39 59.84-88.39 121.73v234.66H390.21V376.45h141.33V441h1.93c19.77-37.21 67.8-76.57 139.57-76.57 149.06 0 176.67 98.16 176.67 225.86v260.3ZM224 311.58a85.35 85.35 0 0 1-85.46-85.24v-.28A85.46 85.46 0 1 1 224 311.58Zm73.76 539.05H150.22V376.45h147.63v474.18ZM923.35 3.8H76.41C35.77 3.8 3 35.82 3 75.4v850.54c0 39.58 32.8 71.6 73.32 71.6h846.81c40.52 0 73.65-32 73.65-71.6V75.4c0-39.58-33.13-71.6-73.65-71.6h.22Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Elocation%3C/title%3E%3Cpath d='M-35.88-82.8h1084.63v1084.63H-35.88Z' fill='none'/%3E%3Cpath d='M505.18 999.18 212.65 706.66c-161.56-161.56-161.56-423.5 0-585.06s423.5-161.55 585.06 0 161.55 423.5 0 585.06Zm227.53-357.52c125.65-125.66 125.64-329.39 0-455s-329.4-125.64-455.05 0-125.64 329.37 0 455l227.52 227.53Zm-227.53-135.6a91.94 91.94 0 1 1 91.93-91.93 91.93 91.93 0 0 1-91.93 91.93Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Eminus%3C/title%3E%3Cpath d='M928.3,392.8H71.5A71.2,71.2,0,0,0,0,464.3v71.4a71.4,71.4,0,0,0,71.5,71.5h857a71.4,71.4,0,0,0,71.5-71.5V464.3a71.5,71.5,0,0,0-71.7-71.5Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Eplus%3C/title%3E%3Cpath d='M928.3,392.7H607.1V71.5A71.4,71.4,0,0,0,535.6,0H464.2a71.4,71.4,0,0,0-71.5,71.5V392.9H71.5A71.1,71.1,0,0,0,0,464.2v71.4a71.4,71.4,0,0,0,71.5,71.5H392.9V928.5a71.4,71.4,0,0,0,71.5,71.5h71.4a71.4,71.4,0,0,0,71.5-71.5V607.1H928.7a71.4,71.4,0,0,0,71.5-71.5V464.2a72,72,0,0,0-71.9-71.5Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M-364.06-169.22h1440.83V1271.6H-364.06z' fill='none'/%3E%3Cpath d='M671.47 500L248.91 218.27v563.46zm197.08 27.49l-700.46 467A33 33 0 01116.74 967V33a33 33 0 0151.35-27.47l700.46 467a33 33 0 010 55z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-printer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Eprinter%3C/title%3E%3Cpath d='M200,850H50A50,50,0,0,1,0,800V300a50,50,0,0,1,50-50H200V50A50,50,0,0,1,250,0H750a50,50,0,0,1,50,50V250H950a50,50,0,0,1,50,50V800a50,50,0,0,1-50,50H800V950a50,50,0,0,1-50,50H250a50,50,0,0,1-50-50Zm0-100V700a50,50,0,0,1,50-50H750a50,50,0,0,1,50,50v50H900V350H100V750ZM300,100V250H700V100Zm0,650V900H700V750ZM150,400H300V500H150Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-row-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M-92-48.44h1194.26v1194.29H-92z' fill='none'/%3E%3Cpath d='M903.21 598.47A49.77 49.77 0 01953 648.23V946.8a49.77 49.77 0 01-49.76 49.76H107a49.77 49.77 0 01-49.74-49.76V648.23A49.77 49.77 0 01107 598.47zM853.45 698H156.78v199h696.67zM505.11 1.32c137.4 0 248.82 111.42 248.82 248.81S642.51 498.94 505.11 498.94 256.3 387.53 256.3 250.13 367.72 1.32 505.11 1.32zm49.77 99.53h-99.53v99.47l-99.52.05v99.52l99.52-.05v99.58h99.53v-99.58l99.52.05v-99.52l-99.52-.05z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-row-remove: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M-163-170.95h1333V1162H-163z' fill='none'/%3E%3Cpath d='M944.32 55.68a55.56 55.56 0 0155.54 55.54v333.24A55.56 55.56 0 01944.32 500a276.24 276.24 0 0155.54 166.62c0 153.34-124.36 277.7-277.7 277.7S444.46 820 444.46 666.62A276.24 276.24 0 01500 500H55.68A55.56 55.56 0 01.14 444.46V111.22a55.56 55.56 0 0155.54-55.54zm-388.78 555.4v111.08h333.24V611.08zm333.24-444.32H111.22v222.16h777.56z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Esearch%3C/title%3E%3Cpath d='M786.1,719.6,997,930.4,927.3,1000,716.5,789.2A440.5,440.5,0,0,1,440,886.1c-244.5,0-443-198.5-443-443S195.5,0,440,0,883.1,198.5,883.1,443.1A441.4,441.4,0,0,1,786.1,719.6Zm-98.7-36.5a343.2,343.2,0,0,0,97.2-240C784.6,252.7,630.4,98.5,440,98.5S95.4,252.7,95.4,443.1,249.6,787.7,440,787.7a343.6,343.6,0,0,0,240-97.3Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Eshare%3C/title%3E%3Cpath d='M581,751.1,371.1,636.7c-75.5,80.6-202,84.8-282.6,9.4S3.6,444.1,79,363.5s202-84.9,282.6-9.5c3.3,3.1,6.4,6.2,9.5,9.5L581,249C554,141.9,618.9,33.2,725.9,6.2S941.7,44,968.8,151.1,930.9,366.8,823.9,393.9A199.9,199.9,0,0,1,629,336.7L419,451.2a199.4,199.4,0,0,1,0,97.7L628.9,663.4c75.5-80.6,202.1-84.8,282.7-9.3s84.7,202.1,9.2,282.7-202.1,84.7-282.7,9.2A200.2,200.2,0,0,1,581,751.1ZM225.1,600a100,100,0,1,0-100-100A99.9,99.9,0,0,0,225.1,600ZM774.9,300.1a100,100,0,1,0-99.9-100A100,100,0,0,0,774.9,300.1Zm0,599.9A100,100,0,1,0,675,800,100,100,0,0,0,774.9,900Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-thread: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M590.54 968.56 463.63 809.93H228a45.33 45.33 0 0 1-45.33-45.33V270.71A45.32 45.32 0 0 1 228 225.39h725.13a45.32 45.32 0 0 1 45.32 45.32V764.6a45.33 45.33 0 0 1-45.32 45.33H717.44Zm83.35-249.28H907.8V316H273.27v403.28h233.92l83.35 104.15ZM46.65 39.42h770.5v90.65H92v498.56H1.33V84.75a45.32 45.32 0 0 1 45.32-45.33Z'/%3E%3C/svg%3E");
  --icon-datagone-todo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Etodo%3C/title%3E%3Cpath d='M728.3,90.9H864.7a45.5,45.5,0,0,1,45.4,45.5V954.5a45.5,45.5,0,0,1-45.4,45.5H137.4a45.5,45.5,0,0,1-45.5-45.5V136.4a45.5,45.5,0,0,1,45.5-45.5H273.8V0h90.9V90.9H637.4V0h90.9Zm0,90.9v90.9H637.4V181.8H364.7v90.9H273.8V181.8h-91V909.1H819.2V181.8ZM273.8,363.6H728.3v90.9H273.8Zm0,181.9H728.3v90.9H273.8Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-twitter-x: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' xml:space='preserve'%3E%3Cpath d='M426.3 629.3 658.5 939H1000L616.7 427.9 935.6 61H806.4L556.8 348.1 341.5 61H0l366.4 488.5L27.8 939H157l269.3-309.7zm281 212.2-512.2-683h97.6l512.2 682.9h-97.6z'/%3E%3C/svg%3E");
  --icon-datagone-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ctitle%3Euser%3C/title%3E%3Cpath d='M119,1000c0-210.4,170.6-381,381-381s381,170.6,381,381H785.7c0-157.8-127.9-285.7-285.7-285.7S214.3,842.2,214.3,1000ZM500,571.4c-157.9,0-285.7-127.8-285.7-285.7S342.1,0,500,0,785.7,127.9,785.7,285.7,657.9,571.4,500,571.4Zm0-95.2A190.4,190.4,0,0,0,690.5,285.7c0-105.2-85.3-190.5-190.5-190.5S309.5,180.5,309.5,285.7A190.4,190.4,0,0,0,500,476.2Z' fill='%23010101'/%3E%3C/svg%3E");
  --icon-datagone-view: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M1.17 498.87C44.51 262.8 251.39 83.9 500 83.9s455.45 178.9 498.83 415c-43.34 236.07-250.22 415-498.83 415S44.55 734.94 1.17 498.87zM500 729.4c127.32 0 230.54-103.21 230.54-230.53S627.32 268.33 500 268.33 269.46 371.55 269.46 498.87 372.68 729.4 500 729.4zm0-92.21a138.32 138.32 0 11138.32-138.32A138.32 138.32 0 01500 637.19z' fill='%23010101'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Icon.
   ========================================================================== */
.icon {
  display: inline-block;
  --icon-size: var(--icon-size-m);
  width: var(--icon-size);
  height: var(--icon-size);

  &:before {
    content: "";
    display: inline-block;
    width: inherit;
    height: inherit;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: var(--icon-size);
    background: var(--color-fg);
    transition: var(--transition);
  }

  /* Layout.
     ========================================================================== */
  &.icon--inline {
    display: flex;
    float: left;
    margin-right: var(--space-l);
  }

  /* Sizes.
     ========================================================================== */
  &.icon-size--small {
    --icon-size: var(--icon-size-s);
  }
  &.icon-size--normal {
    --icon-size: var(--icon-size-m);
  }
  &.icon-size--medium {
    --icon-size: var(--icon-size-l);
  }
  &.icon-size--big {
    --icon-size: var(--icon-size-xl);
  }
}

.btn.icon,
p.icon {
  &:before {
    margin-right: .6em;
  }
}

.icon--inline {
  display: flex;
  float: left;
  margin-right: var(--space-l);
}

/* Sizes.
   ========================================================================== */
.icon-size--small {
  --icon-size: var(--icon-size-s);
}
.icon-size--normal {
  --icon-size: var(--icon-size-m);
}
.icon-size--medium {
  --icon-size: var(--icon-size-l);
}
.icon-size--big {
  --icon-size: var(--icon-size-xl);
}

/* List.
   ========================================================================== */
.icon--datagone.icon--angle-bottom:before {
  mask-image: var(--icon-datagone-angle-bottom);
}
.icon--datagone.icon--arrow-left:before {
  mask-image: var(--icon-datagone-arrow-left);
}
.icon--datagone.icon--arrow-right:before {
  mask-image: var(--icon-datagone-arrow-right);
}
.icon--datagone.icon--arrow-long-left:before {
  mask-image: var(--icon-datagone-arrow-long-left);
}
.icon--datagone.icon--arrow-long-right:before {
  mask-image: var(--icon-datagone-arrow-long-right);
}
.icon--datagone.icon--arrow-long-right-sidebar:before {
  mask-image: var(--icon-datagone-arrow-long-right-sidebar);
}
.icon--datagone.icon--bell:before {
  mask-image: var(--icon-datagone-bell);
}
.icon--datagone.icon--close:before {
  mask-image: var(--icon-datagone-close);
}
.icon--datagone.icon--code:before {
  mask-image: var(--icon-datagone-code);
}
.icon--datagone.icon--double-quotes-l:before {
  mask-image: var(--icon-datagone-double-quotes-l);
}
.icon--datagone.icon--download:before {
  mask-image: var(--icon-datagone-download);
}
.icon--datagone.icon--edit:before {
  mask-image: var(--icon-datagone-edit);
}
.icon--datagone.icon--facebook:before {
  mask-image: var(--icon-datagone-facebook);
}
.icon--datagone.icon--file-add:before {
  mask-image: var(--icon-datagone-file-add);
}
.icon--datagone.icon--file-chart:before {
  mask-image: var(--icon-datagone-file-chart);
}
.icon--datagone.icon--file-download:before {
  mask-image: var(--icon-datagone-file-download);
}
.icon--datagone.icon--file-transfer:before {
  mask-image: var(--icon-datagone-file-transfer);
}
.icon--datagone.icon--fullscreen:before {
  mask-image: var(--icon-datagone-fullscreen);
}
.icon--datagone.icon--image:before {
  mask-image: var(--icon-datagone-image);
}
.icon--datagone.icon--layout:before {
  mask-image: var(--icon-datagone-layout);
}
.icon--datagone.icon--linkedin:before {
  mask-image: var(--icon-datagone-linkedin);
}
.icon--datagone.icon--location:before {
  mask-image: var(--icon-datagone-location);
}
.icon--datagone.icon--minus:before {
  mask-image: var(--icon-datagone-minus);
}
.icon--datagone.icon--plus:before {
  mask-image: var(--icon-datagone-plus);
}
.icon--datagone.icon--play:before {
  mask-image: var(--icon-datagone-play);
}
.icon--datagone.icon--printer:before {
  mask-image: var(--icon-datagone-printer);
}
.icon--datagone.icon--row-add:before {
  mask-image: var(--icon-datagone-row-add);
}
.icon--datagone.icon--row-remove:before {
  mask-image: var(--icon-datagone-row-remove);
}
.icon--datagone.icon--search:before {
  mask-image: var(--icon-datagone-search);
}
.icon--datagone.icon--share:before {
  mask-image: var(--icon-datagone-share);
}
.icon--datagone.icon--thread:before {
  mask-image: var(--icon-datagone-thread);
}
.icon--datagone.icon--todo:before {
  mask-image: var(--icon-datagone-todo);
}
.icon--datagone.icon--twitter:before {
  mask-image: var(--icon-datagone-twitter-x);
}
.icon--datagone.icon--user:before {
  mask-image: var(--icon-datagone-user);
}
.icon--datagone.icon--view:before {
  mask-image: var(--icon-datagone-view);
}