/* 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/mixins";

@disabled-color: #bebebe;

.selector_dropdown {
    display: inline-block;
    button{
        text-align: left;
        padding-left: 0;
        padding-right: 0;
        color: @mainColor;
        &:disabled {
            color: @disabled-color;
        }
    }

    .status_icon {
        color: @mainColor;
        display: block;
        float: left;
        font-size: 18px;
        height: 14px;
        margin: 3px 20px 0px 20px;
        width: 14px;
        &:disabled {
            color: @disabled-color;
        }
    }
    .status_option {
        color: #68696d;
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        height: 44px;
        line-height: 44px;
    }
    .option_item {
        display: flex;
        padding-right: 15px;
        cursor: pointer;
        line-height: 44px;
        font-family: @notoFont;
        &:hover {
            background-color: #eaf4fe;
        }
        &.disabled {
            cursor: not-allowed;
            &:hover {
                background-color: inherit;
            }
        }
    }
    .save_status {
        display: block;
        float: left;
        font-size: 14px;
        padding-left: 23%;
        text-align: center;
        width: 40%;
    }
    .cancel_status {
        display: block;
        float: left;
        font-size: 14px;
        padding-left: 23%;
        text-align: center;
        width: 40%;
    }
    ul {
        z-index: 2000;
    }
    [dropdown] {
        position: relative;
    }
}

:host {
    display: inline-block;
    vertical-align: top;
    &.input-group-addon {
        background-color: #fafafa;
        padding: 0 13px 0 13px !important;
        height: 30px !important;
        .selector_dropdown {
            height: 30px;
        }
        button {
            margin-right: 0;
            padding-top: 3px;
        }
    }
}

:host.flex-centered {
    display: flex!important;
    & > .selector_dropdown {
        display: flex!important;
        & > span {
            display: flex!important;
        }
    }
}