/* ==========================================
   SORTING VISUALIZER
========================================== */

.sorting-visualizer {

    height: 500px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 2px;

    overflow: hidden;

    width: 100%;

    padding: 0.5rem;
}

/* ==========================================
   BARS
========================================== */

.bar {

    background: var(--primary);

    min-width: 2px;

    border-radius: 4px 4px 0 0;

    will-change:
        height,
        transform;

    transition:
        height 0.15s linear,
        background-color 0.15s ease,
        transform 0.15s ease;
}

.bar.compare {

    background: #f59e0b;

    transform: scaleY(1.02);
}

.bar.swap {

    background: #dc2626;
}

.bar.sorted {

    background: #16a34a;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1023px) {

    .sorting-visualizer {

        height: 420px;
    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .sorting-visualizer {

        height: 280px;

        gap: 1px;
    }

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .sorting-visualizer {

        height: 240px;
    }

}