//
//  Buttons Component Styles
//  ______________________________________________

//
//  Colors
//  ----------------------------------------------

@amelsearch-button__color__primary: @amelsearch-color__primary;

//
//  Common
//  ----------------------------------------------

& when (@media-common = true) {
    .amelsearch-button {
        & {
            align-items: center;
            cursor: pointer;
            display: flex;
            justify-content: center;
        }

        &:hover,
        &:focus {
            outline: none;
        }

        &:not(.primary) {
            box-shadow: none;
        }

        &.-disabled {
            opacity: .7;
            pointer-events: none;
        }

        &.-icon {
            & {
                display: flex;
                align-items: center;
                justify-content: center;
                border: 0;
                height: 20px;
                padding: 0;
                width: 20px;
                background: none;
            }

            &:after {
                content: '';
                height: 10px;
                width: 10px;
            }
        }

        &.-close:after {
            background: @amelsearch-icon__background__close no-repeat center;
        }

        &.-loupe:after {
            background: @amelsearch-icon__background__loupe no-repeat center;
        }

        &.-primary {
            & {
                background-color: @amelsearch-button__color__primary;
                border-color: @amelsearch-button__color__primary;
                border-radius: 80px;
                color: #fff;
                font-size: 1.4rem;
                font-weight: 700;
                height: 32px;
                min-width: 78px;
                padding: 7px @amelsearch__indent;
            }

            &:hover {
                background-color: darken(@amelsearch-button__color__primary, 5%);
                border-color: darken(@amelsearch-button__color__primary, 5%);
            }

            &:active {
                background-color: darken(@amelsearch-button__color__primary, 10%);
                border-color: darken(@amelsearch-button__color__primary, 10%);
            }

            &.-disabled {
                opacity: .8;
            }
        }
    }
}