/* -------------------------------------------
    Counter
---------------------------------------------- */
@import '../../../assets/sass/config';
@import '../../../assets/sass/direction';

.counter {
    position: relative;
    text-align: center;

    i,
    svg {
        display: block;
    }

    .counters & svg {
        margin-left: auto;
        margin-right: auto;
    }

    .row & {
        margin-bottom: calc(2 * var(--alpus-gap));
    }
}

.counter-number {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--alpus-primary-color);
    margin-bottom: 1.5rem;
}

.count-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.count-desc {
    line-height: 1.9;
    margin-bottom: 0;
}

.counter-side {
    display: flex;
    align-items: flex-start;

    .counter-number {
        margin-bottom: 0;
    }

    &.position-left .counter-number {
        margin-#{$right}: 20px;
    }

    &.position-right .counter-number {
        margin-#{$left}: 20px;
        order: 13;
    }
}

.counter>*:last-child,
.counter .counter-content>*:last-child {
    margin-bottom: 0;
}

.counters-separated {
    .counter:after {
        --alpus-gap: inherit;
        content: '';
        position: absolute;
        width: 1px;
        height: 84px;
        #{$right}: calc(-1 * var(--alpus-gap));
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, .1);
    }

    .grid-col:last-child .counter:after {
        content: none;
    }
}