@use '../variables/colors' as colors;

@mixin cui-clear-list() {
    padding: 0;
    margin: 0;
    list-style: none;
}

// The list should have no padding or border
// The $offset should correspond to the border-radius of the elements
@mixin cui-line-between-items($offset, $style: solid, $width: 1px) {
    position: relative;

    & > * {
        z-index: 1;
    }

    &:has(> :nth-child(2))::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: $offset;
        border-left: $width $style colors.$cui-base-200;
    }
}

@mixin cui-line-after-item($offset, $list-gap) {
    position: relative;

    &:not(:last-child)::before {
        content: '';
        position: absolute;
        top: 0;
        left: $offset;
        bottom: -$list-gap;
        z-index: -1;
        width: 1px;
        background: colors.$cui-base-200;
    }
}