/* Copyright (C) 2016 NooBaa */

/* Remove firefox default styling */
:-moz-ui-invalid,
:-moz-ui-invalid:-moz-focusring {
    box-shadow: none;
}

.placeholder(@color) {
    &::-webkit-input-placeholder {
        font-weight: @font-light;
        color: @color;
    }

    &:-moz-placeholder { /* Firefox 18- */
        font-weight: @font-light;
        color: @color;
    }

    ::-moz-placeholder {  /* Firefox 19+ */
        font-weight: @font-light;
        color: @color;
    }

    :-ms-input-placeholder {
        font-weight: @font-light;
        color: @color;
    }

    &::placholder {
        font-weight: @font-light;
        color: @color;
    }

    &.placeholder {
        font-weight: @font-light;
        color: @color;
    }
}

.ripple(@color) {
    position: relative;
    overflow: hidden;

    &::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        background-image: radial-gradient(circle, @color 10%, transparent 10.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(10,10);
        opacity: 0;
        transition: transform .5s, opacity 1s;
    }

    &:active::after {
        transform: scale(0,0);
        opacity: .2;
        transition: 0s;
    }

}

.input {
    @width: 274px;
    .placeholder(rgb(var(--color11)));

    display: inline-block;
    width: @width;
    height: 42px;
    line-height: 40px;
    border: 1px solid rgb(var(--color11));
    background: none;
    font-family: @font-family1;
    font-size: @font-size3;
    font-weight: @font-regular;
    padding: 0 @gutter;
    color: rgb(var(--color17));

    &:disabled, &.disabled {
        border-color: rgb(var(--color09));
        color: var(--color09);
        opacity: .3;
    }

    &:focus, &.focus {
        outline: none;

        &:not(.disabled) {
            border-color: rgb(var(--color20));
        }
    }

    &.invalid,
    &:focus.invalid,
    &.focus.invalid {
        border-color: rgb(var(--color31));
    }

    &.warned,
    &:focus.warned,
    &.focus.warned {
        border-color: rgb(var(--color26));
    }
}

input[type=password] {
    &::-ms-reveal, &::-ms-clear {
        display: none;
    }
}

input {
    &[type="text"], &[type="password"] {
        .input();
    }

    &[type="number"] {
        .input();
        text-align: center;
        width: 110px;
    }

    &[type="search"] {
        .input();
        padding-left: @gutter + 24px;
        background: url('@{assets}/search.png') @gutter/2 no-repeat;
    }
}

textarea {
    .input();
    padding: @gutter;
    line-height: 1.4;
}

.focused(@offset: -1px) {
    outline: 1px dashed rgb(var(--color11));
    outline-offset: @offset;
}

.icon-btn {
    display: inline-block;
    border: none;
    background: none;
    padding: @gutter/8;
    cursor: @cursor-pointer;
    font-family: @font-family1;
    border-radius: 50%;

    /*
    Transition removed because of webkit bug, see the following stackoverflow:
    http://stackoverflow.com/questions/12502234/how-to-prevent-webkit-text-rendering-change-during-css-transition
    transition: all 250ms ease-out;
    */
    &:focus:not(:active):not(.no-focus-ring) {
        background: rgba(var(--color20), .15);
        box-shadow: 0px 0px 4px 7px rgba(var(--color20), .15);
    }

    > svg-icon {
        fill: rgb(var(--color17));
    }

    &:hover:not(:disabled) {
        transform: scale(1.3, 1.3);

        > svg-icon {
            fill: rgb(var(--color20));
        }
    }

    &:disabled {
        cursor: not-allowed;

        > svg-icon {
            fill: rgb(var(--color09));
        }
    }
}

.btn-flat {
    display: inline-block;
    border: none;
    background: none;
    cursor: @cursor-pointer;

    &:disabled {
        cursor: @cursor-not-allowed;
    }
}

.btn {
    .ripple(rgb(var(--color20)));
    @height: 40px;

    font-family: @font-family1;
    display: inline-block;
    min-width: 90px;
    min-height: @height + 2PX;
    padding: 0 @gutter;
    line-height: @height;
    font-size: @font-size3;
    font-weight: @font-regular;
    color: rgb(var(--color20));
    text-align: center;
    text-transform: capitalize;
    border: 1px solid rgb(var(--color20));
    cursor: @cursor-pointer;
    background-color: rgba(var(--color20), .1);
    border-radius: 0;
    transition: all 350ms ease-out;

    &:disabled, &.disabled{
        opacity: .4;
        cursor: @cursor-not-allowed;
        transition: unset;
        z-index: 0;
        color: rgb(var(--color20));
    }

    &:hover:not(:disabled):not(.disabled) {
        color: rgb(var(--color02));
        background-color: rgba(var(--color20), 1);
    }

    &:active:not(:disabled):not(.disabled) {
        color: rgb(var(--color02));
        border-color: transparent;
        background-color: rgb(var(--color29));
    }

    &:focus {
        background-color: rgba(var(--color20), .25);
    }

    &.alt-colors {
        .ripple(rgb(var(--color32)));

        color: rgb(var(--color17));
        border-color: rgb(var(--color17));
        background-color: rgba(var(--color17), .1);

        &:not(:disabled):not(.disabled) {
            &:focus {
                background-color: rgba(var(--color17), .25);
            }

            &:hover {
                color: rgb(var(--color32));
                background-color: rgb(var(--color17));
            }
        }

    }
}

.link {
    font-family: @font-family1;
    font-size: @font-size2;
    font-weight: @font-light;
    color: rgb(var(--color21));
    border: none;
    background: none;
    text-decoration: none;
    display: inline;
    padding: 0;

    &:disabled, &.disabled {
        cursor: default;
        pointer-events: none;
        color: rgb(var(--color09));
    }

    &:focus:not(:active):not(.no-focus-ring) {
        background: rgba(var(--color21), .15);
        box-shadow: 0px 0px 4px 2px rgba(var(--color21), .15);
    }

    a&[href], button& {
        cursor: @cursor-pointer;

        &:not(:disabled):not(.disabled):hover {
            text-decoration: underline;
        }
    }

    button& {
        height: 1.1em;
    }

    &.alt-colors {
        color: rgb(var(--color17));
        font-weight: @font-regular;

        &:focus:not(:active):not(.no-focus-ring) {
            background: rgba(var(--color17), .15);
            box-shadow: 0px 0px 4px 2px rgba(var(--color17), .15);
        }
    }
}

.val-msg {
    .error();
    display: block;
    font-size: @font-size1;
    line-height: 1;
}
