// color indicator circles .@{ms-prefix}-ci { // base styles border-radius: 100%; box-shadow: inset 0 0 1px #fff; // to remove spill over line-height: 0.95em; // shifts the border up a touch width: 1em; height: 1em; // set the border color &::before { color: @ms-border-black; } // borders based on number of colors in identity &-1::before { content: "\e98a"; } &-2::before { content: "\e98b"; } &-3::before { content: "\e98c"; } &-4::before { content: "\e98d"; } &-5::before { content: "\e98e"; } // 1 color backgrounds &-w { background: @ms-white; } &-u { background: @ms-blue; } &-b { background: @ms-black; } &-r { background: @ms-red; } &-g { background: @ms-green; } // 2 color backgrounds &-wu, &-uw, &-azorius { background: conic-gradient( @ms-white 45deg, @ms-blue 45deg 225deg, @ms-white 225deg ); } &-wb, &-bw, &-orzhov { background: conic-gradient( @ms-white 45deg, @ms-black 45deg 225deg, @ms-white 225deg ); } &-ub, &-bu, &-dimir { background: conic-gradient( @ms-blue 45deg, @ms-black 45deg 225deg, @ms-blue 225deg ); } &-ur, &-ru, &-izzet { background: conic-gradient( @ms-blue 45deg, @ms-red 45deg 225deg, @ms-blue 225deg ); } &-bg, &-gb, &-golgari, &-rock { background: conic-gradient( @ms-black 45deg, @ms-green 45deg 225deg, @ms-black 225deg ); } &-br, &-rb, &-rakdos { background: conic-gradient( @ms-black 45deg, @ms-red 45deg 225deg, @ms-black 225deg ); } &-rw, &-wr, &-boros { background: conic-gradient( @ms-red 45deg, @ms-white 45deg 225deg, @ms-red 225deg ); } &-rg, &-gr, &-gruul { background: conic-gradient( @ms-red 45deg, @ms-green 45deg 225deg, @ms-red 225deg ); } &-gu, &-ug, &-simic { background: conic-gradient( @ms-green 45deg, @ms-blue 45deg 225deg, @ms-green 225deg ); } &-gw, &-wg, &-selesnya { background: conic-gradient( @ms-green 45deg, @ms-white 45deg 225deg, @ms-green 225deg ); } // 3-color backgrounds &-wug, &-wgu, &-ugw, &-uwg, &-gwu, &-guw, &-bant { background: conic-gradient( @ms-blue 60deg, @ms-green 60deg 180deg, @ms-white 180deg 300deg, @ms-blue 300deg ); } &-ubw, &-uwb, &-buw, &-bwu, &-wub, &-wbu, &-esper { background: conic-gradient( @ms-black 60deg, @ms-white 60deg 180deg, @ms-blue 180deg 300deg, @ms-black 300deg ); } &-bru, &-bur, &-rbu, &-rub, &-ubr, &-urb, &-grixis { background: conic-gradient( @ms-red 60deg, @ms-blue 60deg 180deg, @ms-black 180deg 300deg, @ms-red 300deg ); } &-rgb, &-rbg, &-grb, &-gbr, &-brg, &-bgr, &-jund { background: conic-gradient( @ms-green 60deg, @ms-black 60deg 180deg, @ms-red 180deg 300deg, @ms-green 300deg ); } &-gwr, &-grw, &-wgr, &-wrg, &-rgw, &-rwg, &-naya { background: conic-gradient( @ms-white 60deg, @ms-red 60deg 180deg, @ms-green 180deg 300deg, @ms-white 300deg ); } &-wbg, &-wgb, &-bwg, &-bgw, &-gwb, &-gbw, &-abzan, &-junk, &-necra { background: conic-gradient( @ms-black 60deg, @ms-green 60deg 180deg, @ms-white 180deg 300deg, @ms-black 300deg ); } &-urw, &-uwr, &-ruw, &-rwu, &-wur, &-wru, &-jeskai, &-raka { background: conic-gradient( @ms-red 60deg, @ms-white 60deg 180deg, @ms-blue 180deg 300deg, @ms-red 300deg ); } &-bgu, &-bug, &-gbu, &-gub, &-ubg, &-ugb, &-sultai, &-bug, &-ana { background: conic-gradient( @ms-green 60deg, @ms-blue 60deg 180deg, @ms-black 180deg 300deg, @ms-green 300deg ); } &-rwb, &-rbw, &-wrb, &-wbr, &-brw, &-bwr, &-mardu, &-dega { background: conic-gradient( @ms-white 60deg, @ms-black 60deg 180deg, @ms-red 180deg 300deg, @ms-white 300deg ); } &-gur, &-gru, &-ugr, &-urg, &-rgu, &-rug, &-temur, &-ceta { background: conic-gradient( @ms-blue 60deg, @ms-red 60deg 180deg, @ms-green 180deg 300deg, @ms-blue 300deg ); } // 4 color backgrounds // note: not using aliaes like sass because less is so feature limited &-ubrg, &-glint, &-ubgr, &-ugbr, &-ugrb, &-urbg, &-urgb, &-bgru, &-bgur, &-brgu, &-brug, &-bugr, &-burg, &-gbru, &-gbur, &-grbu, &-grub, &-gubr, &-gurb, &-rbgu, &-rbug, &-rgbu, &-rgub, &-rubg, &-rugb { background: conic-gradient( @ms-blue 45deg, @ms-black 45deg 135deg, @ms-red 135deg 225deg, @ms-green 225deg 315deg, @ms-blue 315deg ); } &-brgw, &-dune, &-bgrw, &-bgwr, &-brwg, &-bwgr, &-bwrg, &-gbrw, &-gbwr, &-grbw, &-grwb, &-gwbr, &-gwrb, &-rbgw, &-rbwg, &-rgbw, &-rgwb, &-rwbg, &-rwgb, &-wbgr, &-wbrg, &-wgbr, &-wgrb, &-wrbg, &-wrgb { background: conic-gradient( @ms-black 45deg, @ms-red 45deg 135deg, @ms-green 135deg 225deg, @ms-white 225deg 315deg, @ms-black 315deg ); } &-rgwu, &-ink, &-gruw, &-grwu, &-gurw, &-guwr, &-gwru, &-gwur, &-rguw, &-rugw, &-ruwg, &-rwgu, &-rwug, &-ugrw, &-ugwr, &-urgw, &-urwg, &-uwgr, &-uwrg, &-wgru, &-wgur, &-wrgu, &-wrug, &-wugr, &-wurg { background: conic-gradient( @ms-red 45deg, @ms-green 45deg 135deg, @ms-white 135deg 225deg, @ms-blue 225deg 315deg, @ms-red 315deg ); } &-gwub, &-witch, &-bguw, &-bgwu, &-bugw, &-buwg, &-bwgu, &-bwug, &-gbuw, &-gbwu, &-gubw, &-guwb, &-gwbu, &-ubgw, &-ubwg, &-ugbw, &-ugwb, &-uwbg, &-uwgb, &-wbgu, &-wbug, &-wgbu, &-wgub, &-wubg, &-wugb { background: conic-gradient( @ms-green 45deg, @ms-white 45deg 135deg, @ms-blue 135deg 225deg, @ms-black 225deg 315deg, @ms-green 315deg ); } &-wubr, &-yore, &-bruw, &-brwu, &-burw, &-buwr, &-bwru, &-bwur, &-rbuw, &-rbwu, &-rubw, &-ruwb, &-rwbu, &-rwub, &-ubrw, &-ubwr, &-urbw, &-urwb, &-uwbr, &-uwrb, &-wbru, &-wbur, &-wrbu, &-wrub, &-wurb { background: conic-gradient( @ms-white 45deg, @ms-blue 45deg 135deg, @ms-black 135deg 225deg, @ms-red 225deg 315deg, @ms-white 315deg ); } // 5 color background &-wubrg, &-5, &-bgruw, &-bgrwu, &-bgurw, &-bguwr, &-bgwru, &-bgwur, &-brguw, &-brgwu, &-brugw, &-bruwg, &-brwgu, &-brwug, &-bugrw, &-bugwr, &-burgw, &-burwg, &-buwgr, &-buwrg, &-bwgru, &-bwgur, &-bwrgu, &-bwrug, &-bwugr, &-bwurg, &-gbruw, &-gbrwu, &-gburw, &-gbuwr, &-gbwru, &-gbwur, &-grbuw, &-grbwu, &-grubw, &-gruwb, &-grwbu, &-grwub, &-gubrw, &-gubwr, &-gurbw, &-gurwb, &-guwbr, &-guwrb, &-gwbru, &-gwbur, &-gwrbu, &-gwrub, &-gwubr, &-gwurb, &-rbguw, &-rbgwu, &-rbugw, &-rbuwg, &-rbwgu, &-rbwug, &-rgbuw, &-rgbwu, &-rgubw, &-rguwb, &-rgwbu, &-rgwub, &-rubgw, &-rubwg, &-rugbw, &-rugwb, &-ruwbg, &-ruwgb, &-rwbgu, &-rwbug, &-rwgbu, &-rwgub, &-rwubg, &-rwugb, &-ubgrw, &-ubgwr, &-ubrgw, &-ubrwg, &-ubwgr, &-ubwrg, &-ugbrw, &-ugbwr, &-ugrbw, &-ugrwb, &-ugwbr, &-ugwrb, &-urbgw, &-urbwg, &-urgbw, &-urgwb, &-urwbg, &-urwgb, &-uwbgr, &-uwbrg, &-uwgbr, &-uwgrb, &-uwrbg, &-uwrgb, &-wbgru, &-wbgur, &-wbrgu, &-wbrug, &-wbugr, &-wburg, &-wgbru, &-wgbur, &-wgrbu, &-wgrub, &-wgubr, &-wgurb, &-wrbgu, &-wrbug, &-wrgbu, &-wrgub, &-wrubg, &-wrugb, &-wubgr, &-wugbr, &-wugrb, &-wurbg, &-wurgb { background: conic-gradient( @ms-white 36deg, @ms-blue 36deg 108deg, @ms-black 108deg 180deg, @ms-red 180deg 252deg, @ms-green 252deg 324deg, @ms-white 324deg ); } }