@use '../../scss/config.scss' as *;

.item {
    @include position(relative);
    @include spacing(m0);

    &:not(.with-icon)::before {
        @include position(absolute, t-5px);
        @include size(25px);
        @include border-radius(max);
        @include background(var(--color));
        @include typography(md);
        @include layout(inline-flex, center);
        @include border(2px, primary-70);

        content: counter(item, var(--counter));
        counter-increment: item;
        color: var(--text-color);
        margin-left: -40px;
    }

    .icon {
        @include position(absolute);
        @include background(primary-70);
        @include border(6px, primary-70);
        @include layout(flex);
        
        color: var(--text-color);
        margin-left: -40px;
        margin-top: -4px;
        
        svg {
            @include size(18px);
        }
    }

    .title {
        @include typography(bold, lg);
        @include spacing(mb-sm);

        display: block;
    }
}