@charset "utf-8";

// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
// Replaces old slash division deprecated in Dart Sass
@function customDivide($dividend, $divisor, $precision: 10) {
    $sign: if($dividend > 0 and $divisor > 0, 1, -1);
    $dividend: abs($dividend);
    $divisor: abs($divisor);
    $quotient: 0;
    $remainder: $dividend;
    @if $dividend == 0 {
        @return 0;
    }
    @if $divisor == 0 {
        @error "Cannot divide by 0";
    }
    @if $divisor == 1 {
        @return $dividend;
    }
    @while $remainder >= $divisor {
        $quotient: $quotient + 1;
        $remainder: $remainder - $divisor;
    }
    @if $remainder > 0 and $precision > 0 {
        $remainder: divide($remainder * 10, $divisor, $precision - 1) * 0.1;
    }
    @return ($quotient + $remainder) * $sign;
}

$block-list-separator: 0.25rem !default;
$block-list-highlight-width: 5px !default;

.content {
    ul.block-list {
        list-style: none;
        margin-left: 0;
    }
}

.block-list {
    list-style: none;

    li {
        padding: customDivide($gap, 2);
        background: $light;
        margin-bottom: $block-list-separator;
    }

    li.is-left,
    &.is-left > li {
        text-align: left;
    }

    li.is-centered,
    &.is-centered > li {
        text-align: center;
    }

    li.is-right,
    &.is-right > li {
        text-align: right;
    }

    li.is-small,
    &.is-small > li {
        font-size: $small-font-size;
        padding: customDivide($gap, 3);
    }

    li.is-normal,
    &.is-normal > li {
        font-size: $body-font-size;
    }

    li.is-large,
    &.is-large > li {
        font-size: $size-large;
    }

    li.has-radius,
    &.has-radius > li {
        border-radius: $radius;
    }

    li.is-highlighted,
    &.is-highlighted > li {
        border-left: $block-list-highlight-width $dark solid;
    }

    @mixin outlined($color) {
        background: transparent;
        color: $color;
        border: 1px solid $color;
    }

    li.is-outlined,
    &.is-outlined > li {
        @include outlined($border);
        color: $text;
    }

    li.has-icon {
        display: flex;

        .icon {
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: auto;
            margin-right: 1em;
        }

        span {
            flex-grow: 1;
        }

        &.is-right {
            .icon {
                margin-right: 0;
                margin-left: 1em;
            }
        }
    }

    @each $name, $pair in $colors {
        $color: nth($pair, 1);
        $color-invert: nth($pair, 2);

        li.is-#{$name},
        &.is-#{$name} > li {
            background: $color;
            color: $color-invert;
        }

        li.is-#{$name}.is-outlined {
            @include outlined($color);
        }

        li.is-#{$name}.is-highlighted {
            @include outlined($color);
            border-left: $block-list-highlight-width $color solid;
        }

        &.is-#{$name} {
            li.is-outlined,
            &.is-outlined > li {
                @include outlined($color);
            }

            li.is-highlighted,
            &.is-highlighted > li {
                @include outlined($color);
                border-left: $block-list-highlight-width $color solid;
            }
        }
    }
}