levelbar {
    block {
        background-color: #{'@accent_color_300'};
        border: 1px solid $border-color;
        border-radius: rem(6px);
        box-shadow:
            outset-highlight(),
            outset-shadow(1);
        transition: all duration("in-place") $easing;

        @if $color-scheme == "dark" {
            background-clip: padding-box;
        }

        &.filled {
            &.low {
                background-color: $STRAWBERRY_500;
            }

            &.middle {
                background-color: $BANANA_500;
            }

            &.high {
                background-color: $BLUEBERRY_300;
            }

            &.full {
                background-color: $LIME_300;
            }

            &:backdrop {
                background-color: bg-color(4);
            }
        }

        &.empty {
            background-color: bg-color(0);
        }
    }

    &.discrete {
        &.horizontal {
            block {
                min-width: rem(24px);

                &:not(:first-child) {
                    margin-left: rem(3px);
                }
            }
        }

        &.vertical block {
            margin: 2px 0;
            min-height: rem(24px);
        }
    }

    &.inverted {
        block.filled {
            &.low {
                background-color: $LIME_300;
            }

            &.middle {
                background-color: $BLUEBERRY_300;
            }

            &.high {
                background-color: $BANANA_500;
            }

            &.full {
                background-color: $STRAWBERRY_500;
            }
        }
    }

    &.horizontal block {
        @extend %outset-background;

        min-height: rem(6px);
        min-width: rem(3px);

    }

    &.vertical block {
        @extend %outset-background-vertical;

        min-height: rem(3px);
        min-width: rem(6px);
    }

    &.flat {
        block {
            border: none;
            box-shadow: none;

            &.empty {
                background: rgba($fg-color, 0.2);
            }

            &.filled {
                &.low:not(:backdrop) {
                    background: $error-color;

                    & + .empty:not(:backdrop) {
                        background: rgba($error-color, 0.2);
                    }
                }

                &.middle:not(:backdrop) {
                    background: $warning-color;

                    & + .empty:not(:backdrop) {
                        background: rgba($warning-color, 0.2);
                    }
                }

                &.high:not(:backdrop) {
                    background: rgba($fg-color, 0.6);
                }

                &.full:not(:backdrop) {
                    background: $success-color;

                    & + .empty:not(:backdrop) {
                        background: rgba($success-color, 0.2);
                    }
                }

                &:backdrop {
                    background: rgba($fg-color, 0.2);
                }
            }
        }

        &.inverted {
            block.filled {
                &.low:not(:backdrop) {
                    background: $success-color;

                    & + .empty:not(:backdrop) {
                        background: rgba($success-color, 0.2);
                    }
                }

                &.middle:not(:backdrop) {
                    background: rgba($fg-color, 0.6);
                }

                &.high:not(:backdrop) {
                    background: $warning-color;

                    & + .empty:not(:backdrop) {
                        background: rgba($warning-color, 0.2);
                    }
                }

                &.full:not(:backdrop) {
                    background: $error-color;

                    & + .empty:not(:backdrop) {
                        background: rgba($error-color, 0.2);
                    }
                }
            }
        }
    }
}
