// 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
    &-ubrg,
    &-glint {
        background: conic-gradient(
            $ms-blue 45deg,
            $ms-black 45deg 135deg,
            $ms-red 135deg 225deg,
            $ms-green 225deg 315deg,
            $ms-blue 315deg
        );
    }
    &-brgw,
    &-dune {
        background: conic-gradient(
            $ms-black 45deg,
            $ms-red 45deg 135deg,
            $ms-green 135deg 225deg,
            $ms-white 225deg 315deg,
            $ms-black 315deg
        );
    }
    &-rgwu,
    &-ink {
        background: conic-gradient(
            $ms-red 45deg,
            $ms-green 45deg 135deg,
            $ms-white 135deg 225deg,
            $ms-blue 225deg 315deg,
            $ms-red 315deg
        );
    }
    &-gwub,
    &-witch {
        background: conic-gradient(
            $ms-green 45deg,
            $ms-white 45deg 135deg,
            $ms-blue 135deg 225deg,
            $ms-black 225deg 315deg,
            $ms-green 315deg
        );
    }
    &-wubr,
    &-yore {
        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 {
        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
        );
    }
}