/* ===== БАЗОВЫЕ СТИЛИ ИКОНОК ===== */
.icon {
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* ===== СИСТЕМА РАЗМЕРОВ ===== */
.icon-xs {
    width: 16px;
    height: 16px;
}

.icon-sm {
    width: 20px;
    height: 20px;
}

.icon-md {
    width: 5rem;
    height: 5rem;
}

.icon-lg {
    width: 13rem;
    height: 13rem;
}

/* Пользовательский размер */
.icon-custom {
    width: var(--icon-size, 24px);
    height: var(--icon-size, 24px);
}

/* Использование маски для иконок в формате SVG/шрифтов */
.icon-mask {
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: currentColor; 
}


.icon-primary {
    color: var(--icon-primary, #3b82f6);
}

.icon-secondary {
    color: var(--icon-secondary, #6b7280);
}

.icon-success {
    color: var(--icon-success, #10b981);
}

.icon-danger {
    color: var(--icon-danger, #ef4444);
}

.icon-warning {
    color: var(--icon-warning, #f59e0b);
}

.icon-info {
    color: var(--icon-info, #06b6d4);
}

.icon-light {
    color: var(--icon-light, #f8f9fa);
}

.icon-dark {
    color: var(--icon-dark, #212529);
}

/* Пользовательский цвет */
.icon-custom-color {
    color: var(--icon-color, inherit);
}



.gear-icon{
  background-image: url(./img/icon/gear-icon.png);
}
.puzzle-icon{
  background-image: url(./img/icon/puzzle-icon.png);
}

.support-icon{
  background-image: url(./img/icon/support-icon.png);
}

.box-icon{
  background-image: url(./img/icon/box.png);
}

.construction-icon{
  background-image: url(./img/icon/construction.png);
}

.tools-icon{
  background-image: url(./img/icon/tools.png);
}

.training-icon{
  background-image: url(./img/icon/training.png);
}

.worker-icon{
  background-image: url(./img/icon/worker.png);
}




/* ===== АНИМАЦИИ ===== */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.icon-pulse {
    animation: icon-pulse 1.5s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}


.icon-rounded {
    border-radius: 50%;
    padding: 4px;
    background-color: rgba(0, 0, 0, 0.1);
}

.icon-shadow {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.icon-hover:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}


.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


@media (max-width: 768px) {
    .icon-lg {
        width: 10rem;
        height: 10rem;
    }
    
    .icon-xl {
        width: 40px;
        height: 40px;
    }
}


:root {
    --icon-primary: #3b82f6;
    --icon-secondary: #6b7280;
    --icon-success: #10b981;
    --icon-danger: #ef4444;
    --icon-warning: #f59e0b;
    --icon-info: #06b6d4;
    --icon-light: #f8f9fa;
    --icon-dark: #212529;
}