/**
 *
 *
 *
 */

@mixin plain-ui__component__button()
{
    .button {
        appearance: none;

        position: relative;

        display: inline-flex;
        align-items: center;
        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: $plain-ui__border-radius;
        transition: background-color 0.1s;

        margin-bottom: 0.5em;
        padding: 0 1.3em;
        min-height: 2.8em;

        font-size: 1rem;

        width: 100%;

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

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

        &--outline {
            background-color: transparent;
        }

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

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

        &: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%);
            }
        }

        &--outline {
            &:hover {
                color: $plain-ui__primary-light;
                border-color: lighten($plain-ui__primary-light, 30%);
                background-color: transparent;
            }
        }

        &--danger.button--outline {
            &:hover {
                border-color: lighten($plain-ui__danger-light, 10%);
            }
        }
    }
}