/* Copyright CloudLinux Zug GmbH 2010-2017 All Rights Reserved
 *
 * Licensed under CLOUD LINUX LICENSE AGREEMENT
 * http://cloudlinux.com/docs/LICENSE.TXT
 */

@import "../../../../styles/colors";
@import "../../../../styles/variables";
@import "../../../../styles/icons";


.typical-icon-styles-for(@icon-name) {
    &.btn-primary {
        &:before {
            .show-icon(@icon-name, #fff);
        }
    }
    &.btn-default {
        &:before {
            .show-icon(@icon-name, @grayColor);
        }
    }
    &.btn-flat {
        &:before {
            .show-icon(@icon-name, @mainColor);
        }
        &:hover:before {
            .show-icon(@icon-name, darken(@mainColor, @percent-of-darkness));
        }
    }
    &.btn-nav {
        &:before {
            .show-icon(@icon-name, @mainColor)
        }
    }
    &.btn-open {
        &:before {
            .show-icon(@icon-name, @mainColor)
        }
    }
    &.btn-clear {
        &:before {
            .show-icon(@icon-name, @buttonInTable);
        }
        &:hover:before {
            .show-icon(@icon-name, @hoverButtonInTable);
        }
    }
    &.btn-danger {
        &:before {
            .delete-icon(#fff);
        }
    }
}

.button-wrapper {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    &.disabled {
        cursor: not-allowed;
    }
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin: 0;
    border-radius: 3px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.13), 0 0 6px 0 rgba(0, 0, 0, 0.12);
    color: #fff;
    font-family: @notoFont;
    font-size: 13px;
    border: none;
    text-shadow: none;
    font-weight: 300;
    transition: box-shadow 0.2s, color 0.2s;
    width: auto;
    background: transparent;
    &.disabled {
        pointer-events: none;
    }
    &:focus {
        outline: none;
    }
    &.upper {
        &-true {
            text-transform: uppercase;
        }
        &-false {
            text-transform: none;
        }
    }
    &.btn {
        &-primary, &-default, &-danger {
          min-width: 110px;
        }
        &-primary, &-default {
            height: 40px;
            min-width: 110px;
            width: auto;
            &.size {
                &-large {
                    height: 40px;
                    padding: 0 40px;
                }
                &-normal {
                    height: 32px;
                }
                &-medium {
                    height: 29px;
                    padding: 0 14px;
                    min-width: auto;
                }
            }
            background-color: @mainColor;
            &:hover{
                box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.13), 0 0 6px 0 rgba(0, 0, 0, 0.12);
            }
        }
        &-default {
            background-color: #ffffff;
            color: @grayColor;
        }
        &-flat {
            color: @mainColor;
            background-color: #fff;
            box-shadow: none;
            &:hover {
                color: darken(@mainColor, @percent-of-darkness);
            }
        }
        &-danger {
            background-color: @dangerColor;
            color: #fff;
        }
        &-nav, &-open {
            color: @mainColor;
            background: transparent;
            box-shadow: none;
            border: none;
            min-width: inherit;
        }
        &-clear {
            background: transparent;
            box-shadow: none;
            border: none;
            min-width: inherit;
        }
    }

    &.icon {
        height: 32px;
        &:before {
            margin-right: 8px;
        }
        &.btn-clear:before {
            margin: 0;
        }

        &-reset, &-restart {
            .typical-icon-styles-for('reset');
        }
        &-add {
            .typical-icon-styles-for('add');
        }
        &-refresh {
            .typical-icon-styles-for('refresh');
        }

        &-move {
            .typical-icon-styles-for('move');
        }

        &-unlock {
            .typical-icon-styles-for('unlock');
        }

        &-edit {
            .typical-icon-styles-for('edit');
        }

        &-delete {
            .typical-icon-styles-for('delete');
        }
        &-list {
            .typical-icon-styles-for('list');
        }
        &-make-default {
            .typical-icon-styles-for('make-default');
        }
        &-stop {
            .typical-icon-styles-for('stop');
        }
        &-start {
            .typical-icon-styles-for('start');
        }
        &-nav {
            .typical-icon-styles-for('nav');
        }
        &-open {
            .typical-icon-styles-for('open');
        }
    }

    &:hover {
        .multi {
            .triangle-icon(darken(@mainColor, @percent-of-darkness));
        }
    }
    .multi {
        .triangle-icon(@mainColor);
    }
    &[disabled] {
        cursor: not-allowed;
        opacity: .65;
    }
}

ul {
    padding: 0;
    li, a {
        &:hover {
            background-color: @colorOfHoverElement;
        }
    }
    a {
        display: inline-flex;
        align-items: center;
    }
}