/**
 *
 *
 *
 */

@mixin plain-ui__component__button()
{
    .button {
        appearance: none;
        position: relative;
        display: inline-block;
        text-decoration: none;

        font-family: $plain-ui__font-family;

        border: 1px solid darken($plain-ui__primary-light, 30%);
        background-color: lighten($plain-ui__primary-light, 10%);
        color: white;

        padding: 0.7em 1.5em;
        margin-bottom: 0.5em;
        
        font-size: 1.1rem;

        border-radius: 2px;
        transition: background-color 0.5s;

        width: 100%;

        @include plain-ui__media-sm() {
            width: auto;
        }

        &:hover {
            cursor: pointer;
            text-decoration: none;

            background-color: lighten($plain-ui__primary-light, 20%);
        }

        &:focus, &:active {

        }

        &--secondary {
            border: 1px solid lighten($plain-ui__primary-light, 15%);
            background-color: lighten($plain-ui__primary-light, 35%);
        }
    }
}