/* =========================================
   100 ICON CSS SPRITE
   Sprite Sheet: 10 × 10
   ========================================= */

.icon {
    --icon-size: 48px;

    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);

    background-image: url("icon-sprite.png");
    background-repeat: no-repeat;

    /* 원본 이미지가 10 × 10이므로 1000% × 1000% */
    background-size: calc(var(--icon-size) * 10)
                     calc(var(--icon-size) * 10);

    vertical-align: middle;
}


/* =========================================
   1행
   ========================================= */

.home {
    background-position: 0% 0%;
}

.search {
    background-position: 11.111% 0%;
}

.user {
    background-position: 22.222% 0%;
}

.settings {
    background-position: 33.333% 0%;
}

.bell {
    background-position: 44.444% 0%;
}

.mail {
    background-position: 55.556% 0%;
}

.heart {
    background-position: 66.667% 0%;
}

.star {
    background-position: 77.778% 0%;
}

.menu {
    background-position: 88.889% 0%;
}

.close {
    background-position: 100% 0%;
}


/* =========================================
   2행
   ========================================= */

.arrow-left {
    background-position: 0% 11.111%;
}

.arrow-right {
    background-position: 11.111% 11.111%;
}

.arrow-up {
    background-position: 22.222% 11.111%;
}

.arrow-down {
    background-position: 33.333% 11.111%;
}

.refresh {
    background-position: 44.444% 11.111%;
}

.link {
    background-position: 55.556% 11.111%;
}

.calendar {
    background-position: 66.667% 11.111%;
}

.clock {
    background-position: 77.778% 11.111%;
}

.location {
    background-position: 88.889% 11.111%;
}

.map {
    background-position: 100% 11.111%;
}


/* =========================================
   3행
   ========================================= */

.camera {
    background-position: 0% 22.222%;
}

.image {
    background-position: 11.111% 22.222%;
}

.video {
    background-position: 22.222% 22.222%;
}

.play {
    background-position: 33.333% 22.222%;
}

.pause {
    background-position: 44.444% 22.222%;
}

.stop {
    background-position: 55.556% 22.222%;
}

.fast-forward {
    background-position: 66.667% 22.222%;
}

.rewind {
    background-position: 77.778% 22.222%;
}

.volume-up {
    background-position: 88.889% 22.222%;
}

.volume-off {
    background-position: 100% 22.222%;
}


/* =========================================
   4행
   ========================================= */

.plus {
    background-position: 0% 33.333%;
}

.minus {
    background-position: 11.111% 33.333%;
}

.check {
    background-position: 22.222% 33.333%;
}

.x {
    background-position: 33.333% 33.333%;
}

.info {
    background-position: 44.444% 33.333%;
}

.warning {
    background-position: 55.556% 33.333%;
}

.question {
    background-position: 66.667% 33.333%;
}

.trash {
    background-position: 77.778% 33.333%;
}

.edit {
    background-position: 88.889% 33.333%;
}

.document {
    background-position: 100% 33.333%;
}


/* =========================================
   5행
   ========================================= */

.folder {
    background-position: 0% 44.444%;
}

.upload {
    background-position: 11.111% 44.444%;
}

.download {
    background-position: 22.222% 44.444%;
}

.send {
    background-position: 33.333% 44.444%;
}

.share {
    background-position: 44.444% 44.444%;
}

.bookmark {
    background-position: 55.556% 44.444%;
}

.tag {
    background-position: 66.667% 44.444%;
}

.filter {
    background-position: 77.778% 44.444%;
}

.sliders {
    background-position: 88.889% 44.444%;
}

.grid {
    background-position: 100% 44.444%;
}


/* =========================================
   6행
   ========================================= */

.cart {
    background-position: 0% 55.556%;
}

.credit-card {
    background-position: 11.111% 55.556%;
}

.wallet {
    background-position: 22.222% 55.556%;
}

.dollar {
    background-position: 33.333% 55.556%;
}

.chart {
    background-position: 44.444% 55.556%;
}

.pie-chart {
    background-position: 55.556% 55.556%;
}

.user-single {
    background-position: 66.667% 55.556%;
}

.users {
    background-position: 77.778% 55.556%;
}

.user-profile {
    background-position: 88.889% 55.556%;
}

.shield {
    background-position: 100% 55.556%;
}


/* =========================================
   7행
   ========================================= */

.eye {
    background-position: 0% 66.667%;
}

.eye-off {
    background-position: 11.111% 66.667%;
}

.copy {
    background-position: 22.222% 66.667%;
}

.expand {
    background-position: 33.333% 66.667%;
}

.clipboard {
    background-position: 44.444% 66.667%;
}

.list {
    background-position: 55.556% 66.667%;
}

.text {
    background-position: 66.667% 66.667%;
}

.bold {
    background-position: 77.778% 66.667%;
}

.italic {
    background-position: 88.889% 66.667%;
}

.underline {
    background-position: 100% 66.667%;
}


/* =========================================
   8행
   ========================================= */

.align-left {
    background-position: 0% 77.778%;
}

.align-center {
    background-position: 11.111% 77.778%;
}

.align-right {
    background-position: 22.222% 77.778%;
}

.align-justify {
    background-position: 33.333% 77.778%;
}

.sort {
    background-position: 44.444% 77.778%;
}

.sort-up {
    background-position: 55.556% 77.778%;
}

.sort-down {
    background-position: 66.667% 77.778%;
}

.code {
    background-position: 77.778% 77.778%;
}

.link-location {
    background-position: 88.889% 77.778%;
}

.target {
    background-position: 100% 77.778%;
}


/* =========================================
   9행
   ========================================= */

.moon {
    background-position: 0% 88.889%;
}

.sun {
    background-position: 11.111% 88.889%;
}

.accessibility {
    background-position: 22.222% 88.889%;
}

.cloud {
    background-position: 33.333% 88.889%;
}

.snowflake {
    background-position: 44.444% 88.889%;
}

.umbrella {
    background-position: 55.556% 88.889%;
}

.flame {
    background-position: 66.667% 88.889%;
}

.leaf {
    background-position: 77.778% 88.889%;
}

.gift {
    background-position: 88.889% 88.889%;
}

.trophy {
    background-position: 100% 88.889%;
}


/* =========================================
   10행
   ========================================= */

.phone {
    background-position: 0% 100%;
}

.message {
    background-position: 11.111% 100%;
}

.chat {
    background-position: 22.222% 100%;
}

.external-link {
    background-position: 33.333% 100%;
}

.download-alt {
    background-position: 44.444% 100%;
}

.upload-alt {
    background-position: 55.556% 100%;
}

.bitcoin {
    background-position: 66.667% 100%;
}

.euro {
    background-position: 77.778% 100%;
}

.yen {
    background-position: 88.889% 100%;
}

.pound {
    background-position: 100% 100%;
}