/* Local Phosphor Icons Mapping using Mask for Color Control */
@font-face {
    font-family: 'Phosphor';
    src: local('Phosphor');
}

[class^="ph-"], [class*=" ph-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    
    /* Color control via mask */
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    
    /* Reset legacy background-image if any */
    background-image: none;
}

/* Size modifiers */
.ph-lg { width: 1.33em; height: 1.33em; }
.ph-2x { width: 2em; height: 2em; }
.ph-3x { width: 3em; height: 3em; }
.ph-4x { width: 4em; height: 4em; }

/* Icon Mappings - defining the source URL */
.ph-fan { --icon-url: url('../static/phosphor-icons/PNGs/regular/fan.png'); }
.ph-drop { --icon-url: url('../static/phosphor-icons/PNGs/regular/drop.png'); }
.ph-thermometer { --icon-url: url('../static/phosphor-icons/PNGs/regular/thermometer.png'); }
.ph-thermometer-cold { --icon-url: url('../static/phosphor-icons/PNGs/regular/thermometer.png'); }
.ph-hard-drives { --icon-url: url('../static/phosphor-icons/PNGs/regular/hard-drive.png'); }
.ph-hard-drive { --icon-url: url('../static/phosphor-icons/PNGs/regular/hard-drive.png'); }
.ph-desktop-tower { --icon-url: url('../static/phosphor-icons/PNGs/regular/desktop-tower.png'); }
.ph-circuitry { --icon-url: url('../static/phosphor-icons/PNGs/regular/circuitry.png'); }
.ph-head-circuit { --icon-url: url('../static/phosphor-icons/PNGs/regular/circuitry.png'); }
.ph-package { --icon-url: url('../static/phosphor-icons/PNGs/regular/package.png'); }
.ph-check { --icon-url: url('../static/phosphor-icons/PNGs/regular/check.png'); }
.ph-check-circle { --icon-url: url('../static/phosphor-icons/PNGs/regular/check-circle.png'); }
.ph-list { --icon-url: url('../static/phosphor-icons/PNGs/regular/list.png'); }
.ph-x { --icon-url: url('../static/phosphor-icons/PNGs/regular/x.png'); }
.ph-arrow-right { --icon-url: url('../static/phosphor-icons/PNGs/regular/arrow-right.png'); }
.ph-arrow-up { --icon-url: url('../static/phosphor-icons/PNGs/regular/arrow-up.png'); }
.ph-arrow-left { --icon-url: url('../static/phosphor-icons/PNGs/regular/arrow-left.png'); }
.ph-caret-down { --icon-url: url('../static/phosphor-icons/PNGs/regular/caret-down.png'); }
.ph-magnifying-glass { --icon-url: url('../static/phosphor-icons/PNGs/regular/magnifying-glass.png'); }
.ph-envelope { --icon-url: url('../static/phosphor-icons/PNGs/regular/envelope.png'); }
.ph-phone { --icon-url: url('../static/phosphor-icons/PNGs/regular/phone.png'); }
.ph-map-pin { --icon-url: url('../static/phosphor-icons/PNGs/regular/map-pin.png'); }
.ph-facebook-logo { --icon-url: url('../static/phosphor-icons/PNGs/regular/facebook-logo.png'); }
.ph-twitter-logo { --icon-url: url('../static/phosphor-icons/PNGs/regular/twitter-logo.png'); }
.ph-instagram-logo { --icon-url: url('../static/phosphor-icons/PNGs/regular/instagram-logo.png'); }
.ph-linkedin-logo { --icon-url: url('../static/phosphor-icons/PNGs/regular/linkedin-logo.png'); }
.ph-youtube-logo { --icon-url: url('../static/phosphor-icons/PNGs/regular/youtube-logo.png'); }
.ph-diamonds-four { --icon-url: url('../static/phosphor-icons/PNGs/regular/diamonds-four.png'); }
.ph-globe { --icon-url: url('../static/phosphor-icons/PNGs/regular/globe.png'); }
.ph-globe-hemisphere-east { --icon-url: url('../static/phosphor-icons/PNGs/regular/globe-hemisphere-east.png'); }
.ph-newspaper { --icon-url: url('../static/phosphor-icons/PNGs/regular/newspaper.png'); }
.ph-chat-circle-text { --icon-url: url('../static/phosphor-icons/PNGs/regular/chat-circle-text.png'); }
.ph-caret-right { --icon-url: url('../static/phosphor-icons/PNGs/regular/caret-right.png'); }
.ph-database { --icon-url: url('../static/phosphor-icons/PNGs/regular/database.png'); }
.ph-car { --icon-url: url('../static/phosphor-icons/PNGs/regular/car.png'); }
.ph-wechat-logo { --icon-url: url('../static/phosphor-icons/PNGs/regular/wechat-logo.png'); }
.ph-tiktok-logo { --icon-url: url('../static/phosphor-icons/PNGs/regular/tiktok-logo.png'); }
.ph-paper-plane-right { --icon-url: url('../static/phosphor-icons/PNGs/regular/paper-plane-right.png'); }
.ph-headset { --icon-url: url('../static/phosphor-icons/PNGs/regular/headset.png'); }
.ph-wrench { --icon-url: url('../static/phosphor-icons/PNGs/regular/wrench.png'); }
.ph-file-text { --icon-url: url('../static/phosphor-icons/PNGs/regular/file-text.png'); }
.ph-chat-circle-dots { --icon-url: url('../static/phosphor-icons/PNGs/regular/chat-circle-dots.png'); }
.ph-caret-double-down { --icon-url: url('../static/phosphor-icons/PNGs/regular/caret-double-down.png'); }
.ph-onigiri { --icon-url: url('../static/phosphor-icons/PNGs/regular/info.png'); }
.ph-target { --icon-url: url('../static/phosphor-icons/PNGs/regular/target.png'); }
.ph-eye { --icon-url: url('../static/phosphor-icons/PNGs/regular/eye.png'); }
.ph-handshake { --icon-url: url('../static/phosphor-icons/PNGs/regular/handshake.png'); }
.ph-printer { --icon-url: url('../static/phosphor-icons/PNGs/regular/printer.png'); }
.ph-user { --icon-url: url('../static/phosphor-icons/PNGs/regular/user.png'); }
.ph-warning-circle { --icon-url: url('../static/phosphor-icons/PNGs/regular/warning-circle.png'); }