button {

    &.image-button {
        @extend .circular;

        padding: rem(4px);
        min-height: 16px;
        min-width: 16px;
        transition:
            background duration("expand") easing(),
            transform duration("expand") easing("ease-out-back");

        &:active {
            background: rgba($fg-color, 0.15);
            transform: scale(0.8);
            transition:
                background duration("collapse") easing(),
                transform duration("collapse") easing();
        }

        &.toggle {
            @include border-interactive-roundrect;

            &:checked {
                @extend selection;
            }
        }
    }

    &.text-button {
        @extend %raised;

        padding: rem(2px) rem(4px);
    }


    // Almost certainly a button with text and image
    > box.horizontal {
        border-spacing: $button-spacing / 2;
    }
}
