/*
 * Aesthetic Intel — Envato Admin Dashboard Icon Pack
 * --------------------------------------------------
 * Source pack supplied by the project owner:
 * "20 Admin Dashboard Icons"
 *
 * The SVGs are used as CSS masks. That keeps the purchased artwork intact
 * while letting icons inherit currentColor from existing Aesthetic Intel UI.
 */

/* ============================================================
   BASE ICON
   ============================================================ */

.ai-pack-icon {
    --ai-pack-icon-size: 20px;

    display: inline-block !important;
    width: var(--ai-pack-icon-size) !important;
    height: var(--ai-pack-icon-size) !important;
    min-width: var(--ai-pack-icon-size) !important;
    flex: 0 0 var(--ai-pack-icon-size) !important;

    background-color: currentColor !important;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    vertical-align: middle;
}

/*
 * Existing sidebar rules sometimes target .nav-icon as if it were an SVG.
 * These overrides keep mask icons predictable without changing layout.
 */
.sidebar .ai-pack-icon,
.sidebar .nav-link .ai-pack-icon,
.sidebar .nav-group-title .ai-pack-icon {
    fill: none !important;
    stroke: none !important;
}

/* ============================================================
   COMPLETE PACK — SEMANTIC CLASSES
   ============================================================ */

.ai-pack-icon-edit {
    -webkit-mask-image: url("../icons/admin-dashboard/1.svg");
    mask-image: url("../icons/admin-dashboard/1.svg");
}

.ai-pack-icon-check {
    -webkit-mask-image: url("../icons/admin-dashboard/2.svg");
    mask-image: url("../icons/admin-dashboard/2.svg");
}

.ai-pack-icon-user {
    -webkit-mask-image: url("../icons/admin-dashboard/3.svg");
    mask-image: url("../icons/admin-dashboard/3.svg");
}

.ai-pack-icon-clock {
    -webkit-mask-image: url("../icons/admin-dashboard/4.svg");
    mask-image: url("../icons/admin-dashboard/4.svg");
}

.ai-pack-icon-calendar {
    -webkit-mask-image: url("../icons/admin-dashboard/5.svg");
    mask-image: url("../icons/admin-dashboard/5.svg");
}

.ai-pack-icon-delete {
    -webkit-mask-image: url("../icons/admin-dashboard/6.svg");
    mask-image: url("../icons/admin-dashboard/6.svg");
}

.ai-pack-icon-folder {
    -webkit-mask-image: url("../icons/admin-dashboard/7.svg");
    mask-image: url("../icons/admin-dashboard/7.svg");
}

.ai-pack-icon-search {
    -webkit-mask-image: url("../icons/admin-dashboard/8.svg");
    mask-image: url("../icons/admin-dashboard/8.svg");
}

.ai-pack-icon-view {
    -webkit-mask-image: url("../icons/admin-dashboard/9.svg");
    mask-image: url("../icons/admin-dashboard/9.svg");
}

.ai-pack-icon-heart {
    -webkit-mask-image: url("../icons/admin-dashboard/10.svg");
    mask-image: url("../icons/admin-dashboard/10.svg");
}

.ai-pack-icon-star {
    -webkit-mask-image: url("../icons/admin-dashboard/11.svg");
    mask-image: url("../icons/admin-dashboard/11.svg");
}

.ai-pack-icon-refresh {
    -webkit-mask-image: url("../icons/admin-dashboard/12.svg");
    mask-image: url("../icons/admin-dashboard/12.svg");
}

.ai-pack-icon-gauge {
    -webkit-mask-image: url("../icons/admin-dashboard/13.svg");
    mask-image: url("../icons/admin-dashboard/13.svg");
}

.ai-pack-icon-analytics {
    -webkit-mask-image: url("../icons/admin-dashboard/14.svg");
    mask-image: url("../icons/admin-dashboard/14.svg");
}

.ai-pack-icon-verified-bag {
    -webkit-mask-image: url("../icons/admin-dashboard/15.svg");
    mask-image: url("../icons/admin-dashboard/15.svg");
}

.ai-pack-icon-inbox {
    -webkit-mask-image: url("../icons/admin-dashboard/16.svg");
    mask-image: url("../icons/admin-dashboard/16.svg");
}

.ai-pack-icon-media {
    -webkit-mask-image: url("../icons/admin-dashboard/17.svg");
    mask-image: url("../icons/admin-dashboard/17.svg");
}

.ai-pack-icon-location {
    -webkit-mask-image: url("../icons/admin-dashboard/18.svg");
    mask-image: url("../icons/admin-dashboard/18.svg");
}

.ai-pack-icon-settings {
    -webkit-mask-image: url("../icons/admin-dashboard/19.svg");
    mask-image: url("../icons/admin-dashboard/19.svg");
}

.ai-pack-icon-list {
    -webkit-mask-image: url("../icons/admin-dashboard/20.svg");
    mask-image: url("../icons/admin-dashboard/20.svg");
}

.ai-pack-icon-dashboard {
    -webkit-mask-image: url("../icons/admin-dashboard/21.svg");
    mask-image: url("../icons/admin-dashboard/21.svg");
}

.ai-pack-icon-home {
    -webkit-mask-image: url("../icons/admin-dashboard/22.svg");
    mask-image: url("../icons/admin-dashboard/22.svg");
}

.ai-pack-icon-notification {
    -webkit-mask-image: url("../icons/admin-dashboard/23.svg");
    mask-image: url("../icons/admin-dashboard/23.svg");
}

.ai-pack-icon-appearance {
    -webkit-mask-image: url("../icons/admin-dashboard/24.svg");
    mask-image: url("../icons/admin-dashboard/24.svg");
}

/* ============================================================
   SIDEBAR POLISH
   ============================================================ */

.sidebar .nav-link>.ai-pack-icon,
.sidebar .nav-group-title>.ai-pack-icon {
    --ai-pack-icon-size: 19px;
    opacity: .86;
    transition:
        opacity 160ms ease,
        color 160ms ease;
}

.sidebar .nav-link:hover>.ai-pack-icon,
.sidebar .nav-link.active>.ai-pack-icon,
.sidebar .nav-group-title:hover>.ai-pack-icon,
.sidebar .nav-group.open>.nav-group-title>.ai-pack-icon:first-child {
    opacity: 1;
}

.sidebar .nav-link:hover>.ai-pack-icon,
.sidebar .nav-group-title:hover>.ai-pack-icon {
    transform: none !important;
}

/*
 * Keep the small submenu chevron functional SVG separate from pack masks.
 */
.sidebar .ai-functional-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

/* ============================================================
   REUSABLE NON-SIDEBAR ICON UTILITIES
   ============================================================ */

/*
 * Anywhere else in the website you can now use:
 *
 * <span class="ai-ui-icon ai-pack-icon ai-pack-icon-edit"></span>
 * <span class="ai-ui-icon ai-pack-icon ai-pack-icon-delete"></span>
 * <span class="ai-ui-icon ai-pack-icon ai-pack-icon-check"></span>
 *
 * Size overrides:
 * <span class="ai-ui-icon ai-pack-icon ai-pack-icon-analytics ai-icon-lg"></span>
 */

.ai-ui-icon {
    --ai-pack-icon-size: 18px;
}

.ai-icon-xs {
    --ai-pack-icon-size: 14px;
}

.ai-icon-sm {
    --ai-pack-icon-size: 16px;
}

.ai-icon-md {
    --ai-pack-icon-size: 20px;
}

.ai-icon-lg {
    --ai-pack-icon-size: 24px;
}

.ai-icon-xl {
    --ai-pack-icon-size: 32px;
}