button {

    .linked &,
    .linked &.image-button,
    .linked &.image-button.toggle {
        @extend %raised; 

        // I don't know why this needs to be reiterated, but it doesn't work
        // properly without it
        &:active,
        &:checked {
            @include control-active;
            color: $fg-color;
            transform: none;
        }
    }

    &.osd {
        @include control;
        @include border-interactive-roundrect;

        // This stacks with the other shadows,
        // so reduce it's alpha by the sum of other shadows
        $shadow-border-color: scale-color($border-color, $alpha: -50%);
        @if $color-scheme == "dark" {
            $shadow-border-color: transparent
        }

        background-image: none;
        border: none;
        box-shadow:
            highlight(),
            // Intentionally not in ems since it's used as a stroke
            0 0 0 1px $shadow-border-color,
            shadow(2);
        color: $fg-color;
        margin: 0;
        padding: $button-spacing;

        transition:
            background duration("expand") easing(),
            transform duration("expand") easing("ease-out-back");

        &:active {
            transition:
            background duration("collapse") easing(),
            transform duration("collapse") easing();
        }

        &:disabled {
            @include control-disabled;

            box-shadow:
            highlight(),
            // Intentionally not in ems since it's used as a stroke
            0 0 0 1px $shadow-border-color,
            shadow(1);
        }

        .linked & {
            transition: none;
            transform: none;
        }

        .linked &.vertical &:first-child {
            box-shadow:
            highlight("top"),
            // Intentionally not in ems since it's used as a stroke
            0 0 0 1px $shadow-border-color,
            shadow(2);
        }
    }

}
