/* CHSAA Custom Icons (CI) - Sport Icons */
/* Usage: <i class="ci ci-[sport-name]"></i> */

.ci {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Individual sport icons */
.ci-baseball {
    -webkit-mask-image: url('/Assets/icons/baseball.svg');
    mask-image: url('/Assets/icons/baseball.svg');
}

.ci-basketball {
    -webkit-mask-image: url('/Assets/icons/basketball.svg');
    mask-image: url('/Assets/icons/basketball.svg');
}

.ci-bowling {
    -webkit-mask-image: url('/Assets/icons/bowling.svg');
    mask-image: url('/Assets/icons/bowling.svg');
}

.ci-field-hockey {
    -webkit-mask-image: url('/Assets/icons/field-hockey.svg');
    mask-image: url('/Assets/icons/field-hockey.svg');
}

.ci-flag-football {
    -webkit-mask-image: url('/Assets/icons/flag-football.svg');
    mask-image: url('/Assets/icons/flag-football.svg');
}

.ci-football {
    -webkit-mask-image: url('/Assets/icons/football.svg');
    mask-image: url('/Assets/icons/football.svg');
}

.ci-golf {
    -webkit-mask-image: url('/Assets/icons/golf.svg');
    mask-image: url('/Assets/icons/golf.svg');
}

.ci-gymnastics {
    -webkit-mask-image: url('/Assets/icons/gymnastics.svg');
    mask-image: url('/Assets/icons/gymnastics.svg');
}

.ci-ice-hockey {
    -webkit-mask-image: url('/Assets/icons/ice-hockey.svg');
    mask-image: url('/Assets/icons/ice-hockey.svg');
}

.ci-lacrosse {
    -webkit-mask-image: url('/Assets/icons/lacrosse.svg');
    mask-image: url('/Assets/icons/lacrosse.svg');
}

.ci-soccer {
    -webkit-mask-image: url('/Assets/icons/soccer.svg');
    mask-image: url('/Assets/icons/soccer.svg');
}

.ci-softball {
    -webkit-mask-image: url('/Assets/icons/softball.svg');
    mask-image: url('/Assets/icons/softball.svg');
}

.ci-speech {
    -webkit-mask-image: url('/Assets/icons/speech.svg');
    mask-image: url('/Assets/icons/speech.svg');
}

.ci-spirit {
    -webkit-mask-image: url('/Assets/icons/spirit.svg');
    mask-image: url('/Assets/icons/spirit.svg');
}

.ci-swimming {
    -webkit-mask-image: url('/Assets/icons/swimming.svg');
    mask-image: url('/Assets/icons/swimming.svg');
}

.ci-tennis {
    -webkit-mask-image: url('/Assets/icons/tennis.svg');
    mask-image: url('/Assets/icons/tennis.svg');
}

.ci-track {
    -webkit-mask-image: url('/Assets/icons/track.svg');
    mask-image: url('/Assets/icons/track.svg');
}

.ci-volleyball {
    -webkit-mask-image: url('/Assets/icons/volleyball.svg');
    mask-image: url('/Assets/icons/volleyball.svg');
}

.ci-wrestling {
    -webkit-mask-image: url('/Assets/icons/wrestling.svg');
    mask-image: url('/Assets/icons/wrestling.svg');
}

/* Size variants (similar to Bootstrap Icons) */
.ci-xs {
    width: 0.75em;
    height: 0.75em;
}

.ci-sm {
    width: 0.875em;
    height: 0.875em;
}

.ci-lg {
    width: 1.5em;
    height: 1.5em;
}

.ci-xl {
    width: 2em;
    height: 2em;
}

.ci-2x {
    width: 2em;
    height: 2em;
}

.ci-3x {
    width: 3em;
    height: 3em;
}

.ci-4x {
    width: 4em;
    height: 4em;
}

.ci-5x {
    width: 5em;
    height: 5em;
}