.osd {
    background-color: rgba($fg-color, 0.9);
    border: none;
    color: bg-color(1);
    padding: rem(6px);
    border-radius: rem(6px);
    box-shadow: shadow(1);
    margin: rem(6px);

    button {
        &.flat.image-button,
        &.circular.image-button {
            background: transparent;
            box-shadow: none;
            color: rgba(bg-color(1), 0.9);

            &:active {
                background: rgba($fg-color, 0.7);
                box-shadow: none;
                color: rgba(bg-color(1), 0.7);
            }
        }

        &.circular.image-button {
            background: $fg-color;
        }

        &.text-button {
            background-color: rgba(bg-color(1), 0.9);
            color: $fg-color;
            border-width: 0;
            box-shadow: none;

            &:active {
                background-color: rgba(bg-color(1), 0.7);
                box-shadow: none;
                color: rgba($fg-color, 0.7);
            }
        }
    }

    scale {
        &.horizontal {
            margin: 0 rem(12px);
        }

        &.vertical {
            margin: rem(12px) 0;
        }

        highlight,
        trough {
            border: none;
            box-shadow: none;
        }

        &.horizontal,
        &.vertical {
            highlight.bottom,
            highlight.top {
                background: bg-color(1);
                margin: 0;
            }
        }


        trough {
            background: rgba(bg-color(1), 0.3)
        }
    }
}
