@use "@beeline/design-tokens/scss/tokens/globals/colors";
@use "@beeline/design-tokens/scss/tokens/themes";

@mixin font_style($fontSize, $fontWeight, $lineHeight, $letterSpacing) {
    font-size: $fontSize;
    font-weight: $fontWeight;
    line-height: $lineHeight;
    letter-spacing: $letterSpacing;
}

@mixin generate-numbered-list-styles($start, $end) {
    @for $counter from $start through $end {
        $counter-name: list + ' ' + ($counter - 1);
        ol[start*="#{$counter}"] {
            list-style-type: none;
            counter-reset: $counter-name;
        }
    }
}

.vp-doc {
    font-size: 17px;

    // Titles
    h1 {
        @include font_style(44px, 500, 46px, 0.3px);
        margin-bottom: 24px;
    }

    h2 {
        @include font_style(34px, 400, 36px, 0.3px);
        margin-bottom: 12px;
    }

    h3 {
        @include font_style(26px, 500, 32px, 0.2px);
        margin-bottom: 12px;
    }

    h4 {
        @include font_style(20px, 700, 28px, 0.2px);
        margin-bottom: 12px;
    }

    h5 {
        @include font_style(17px, 500, 22px, 0.2px);
        margin-bottom: 12px;
    }

    // Text
    ol {
        list-style-type: none;
        counter-reset: list;
        margin: 0 0 0 50px;
        padding: 0 0 5px 0;
        font-size: 16px;
  
        & > * + * {
            margin-top: 50px;
        }
    }

    @include generate-numbered-list-styles(2, 50);

    ol li {
        position: relative;
        padding: 5px 0 0 0;
        line-height: 1.4;
    }

    li + li {
        margin-top: 34px;
    }

    ul li {
        padding-bottom: 0;
        padding-top: 0;
        margin-top: 8px;
    }
    
    ol li::before {
        content: counter(list);
        counter-increment: list;
        display: inline-flex;
        position: absolute;
        top: 0;
        left: -48px;
        width: 35px;
        height: 35px;
        background-color: colors.$color-background-brand;
        color: themes.$color-text-active;
        text-align: center;
        line-height: 25px;
        font-size: 16px;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
    }

    ul li:nth-last-of-type(n):after {
        content: none;
    }

    ol ul li::before {
        counter-increment: list;
        content: none;
        margin: 0;
        padding: 0;
    }

    ol li:last-child, ul li:last-child {
        margin-bottom: 40px;
    }

    ol li p {
        margin-top: 0;
    }

    p {
        line-height: 22px;
    }

    // Links
    a {
        color: #1a73e8;

        &:hover, &:focus-visible, &:focus, &:active {
            color: #1a73e8;
        }

        &:visited {
            color: #7e00ed;
        }
    }
}