.wrapper {
    z-index: 200;
    box-sizing: border-box;
    display: flex;
    grid-area: player;
    height: 100%;
    padding: 0 var(--theme-spacing-md) var(--theme-spacing-md);
    background: var(--theme-colors-background);
}

.bar {
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--theme-radius-lg);
    transition: background 0.5s;

    @mixin light {
        background: darken(var(--theme-colors-background), 5%);
    }

    @mixin dark {
        background: darken(var(--theme-colors-background), 10%);
    }
}

.open-drawer .bar:hover {
    background: darken(var(--theme-colors-background), 20%);
}