blog/_src/_assets/styl/_kremalicious/actions.styl

.actions
    @extend .divider-top, .divider-bottom, .small
    margin-top: ($spacer * 2)
    padding: $spacer 0

    .grid
        margin-bottom: 0

        @media $screen-sm
            .grid__col:last-child
                display: flex
                justify-content: flex-end

.action
    padding-left: 32px
    display: inline-block

    .icon
        margin-right: 8px
        margin-left: -32px
        margin-bottom: -3px

.action__title
    font-size: $font-size-base
    line-height: $line-height
    margin-top: 0
    color: $text-color
    margin-bottom: 0
    display: inline-block

.action__text
    display: block
    margin-bottom: 0

.donate
    .btc
        @extend .mini
        display: inline-block
        width: 80px
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis

.vex-bitcoin
    @extend .textcenter

    .vex-content
        max-width: 45em

    h4
        margin-top: 0
        margin-bottom: ($spacer / 2)

    .qr
        margin-bottom: $spacer
        width: 120px

    pre
        @extend .small
        margin: 0
        position: relative
        padding-right: 2.4rem

        code
            padding: ($spacer / 2)
            padding-right: 0
            font-size: .65rem

    .btn
        position: absolute
        right: 0
        top: 0
        bottom: 0
        border: 0
        box-shadow: none
        border-top-left-radius: 0
        border-bottom-left-radius: 0
        background: alpha($brand-grey, 30%)

        svg
            width: 1rem
            height: 1rem
            fill: $brand-grey
            transition: .15s ease-out

        &:hover
            background: alpha($brand-grey, 30%)
            svg
                fill: $brand-grey-dimmed

        &.success
            background: darken($alert-success, 50%)

            svg
                fill: $brand-dark