.storage-bar {
    .trough {
        box-shadow: 0 2px 3px -1px rgba(black, 0.15);
    }

    .fill-block {
        background-image:
            linear-gradient(
                to bottom,
                $SILVER_300,
                $SILVER_500
            );
        border: 1px solid rgba(black, 0.35);
        box-shadow: outset-highlight();
        transition: all 200ms ease-in-out;
        padding: rem(8px) rem(3px);

        &:not(:first-child) {
            border-left-width: 0;
        }

        &:first-child {
            border-top-left-radius: rem(3px);
            border-bottom-left-radius: rem(3px);
        }

        &:last-child {
            border-top-right-radius: rem(3px);
            border-bottom-right-radius: rem(3px);
        }

        &.legend {
            padding: rem(8px);
            border-radius: 50%;
        }

        &.empty-block,
        &.unused {
            background-image:
                linear-gradient(
                    to bottom,
                    mix($SILVER_100, $SILVER_300, 66%),
                    $SILVER_300
                );
            border-color: rgba(black, 0.25);
        }

        &.app {
            background-image:
                linear-gradient(
                    to bottom,
                    $GRAPE_500,
                    $GRAPE_700
                );
            border-color: rgba($GRAPE_900, 0.8);
        }

        &.audio {
            background-image:
                linear-gradient(
                    to bottom,
                    $ORANGE_300,
                    $ORANGE_500
                );
            border-color: rgba($ORANGE_700, 0.8);
        }

        &.files {
            background-image:
                linear-gradient(
                    to bottom,
                    $BLUEBERRY_300,
                    $BLUEBERRY_500
                );
            border-color: rgba($BLUEBERRY_700, 0.8);
        }

        &.photo {
            background-image:
                linear-gradient(
                    to bottom,
                    $BANANA_300,
                    $BANANA_500
                );
            border-color: rgba($BANANA_700, 0.8);
        }

        &.video {
            background-image:
                linear-gradient(
                    to bottom,
                    $STRAWBERRY_300,
                    $STRAWBERRY_500
                );
            border-color: rgba($STRAWBERRY_700, 0.8);
        }
    }
}
