/**
 * Buttons
 * --
 * Buttons are styled links/form submisions. They come in various colours and
 * sizes. This stylesheet contains mixins used to easily build consistant
 * buttons across the admin UI, as well as some standard button formatting
 * classes.
 */


/**
 * Btn
 * --
 * A single button.
 */
.mh-btn {
    @include btn();

    &--bordered {
        @include btn-type(bordered, $color: nth($color-themes, 1));
    }

    &--small {
        @include btn-size(small);
    }

    &--grey {
        @include btn-type(standard, $color: $color-font-light);
    }

    &--error {
        @include btn-type(bordered, $color: $color-alert-error);
    }

    &.mh-copied {
        box-shadow: none;
        position: relative;

        &:after {
            background: $color-bkg-nav;
            border-radius: 3px;
            color: #fff;
            content: 'Copied!';
            display: block;
            font-style: italic;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}


/**
 * Btns
 * --
 * A standard container for laying out multiple btn elements.
 */
.mh-btns {
    align-items: center;
    display: flex;
    justify-content: center;

    &--collapse {
        @include media-span($from: 0, $to: $mobile-width) {
            display: block;

            > .mh-btn {
                margin-top: 20px;

                &:first-child {
                    margin-top: 0;
                }
            }
        }
    }

    > .mh-btn {
        margin-left: 20px;
        width: auto;
        align-items: center;
        flex: auto;
        display: flex;
        justify-content: center;

        &:first-child {
            margin-left: 0;
        }
    }
}