/**
 *
 *
 *
 */

@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 $plain-ui__primary-light;
        background-color: white;
        color: $plain-ui__primary-light;

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

        margin-bottom: 0.5em;
        padding: 0.5em 1.3em;
        font-size: 1rem;

        // for mobile
        width: 100%;

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

        &--small {
            font-size: 0.8em;
        }

        &--no-style {
            margin: 0;
            padding: 0;
            border: none;
            background: transparent;
        }

        &:hover, &--hover {
            cursor: pointer;
            text-decoration: none;
            color: white;
            background-color: $plain-ui__primary-light;
        }

        &:focus, &:active {
            outline: 1px solid lighten($plain-ui__primary-light, 15%);
        }

        &:disabled {
            opacity: 0.5;

            &:hover {
                cursor: not-allowed;
                border: 1px solid $plain-ui__primary-light;
                background-color: white;
                color: $plain-ui__primary-light;
            }
        }
    }
}

@mixin plain-ui__component__button-colors()
{
    .button {
        &--danger {
            border-color: $plain-ui__danger-light;

            &:hover {
                background-color: $plain-ui__danger-light;
            }

            &:focus, &:active {
                outline: 2px solid lighten($plain-ui__danger-light, 15%);
            }
        }
    }
}