// Table of Content
//==================================================
//	Manage config
//  Action e-mails
//  Manage users
//  Plugins
//==================================================

// Manage config
//========================================

// Action e-mails
//========================================
#actions{
    .inline-block;
}

#ations-triggers-frm{

    #action-triggers{
        & > p{
            margin-top : 15px;
            text-align : center;
            padding    : 0 20%;
            position   : relative;
            font-size  : 1.2em;

            &:before, &:after{
                content       : '';
                position      : absolute;
                width         : 18%;
                top           : 50%;
                border-bottom : 1px solid #ccc;
            }

            &:before{
                left : 0;
            }

            &:after{
                right : 0;
            }
        }

        .actions-list{
            margin : 40px 0 0;

            li{
                text-align    : center;
                float         : left;
                margin-bottom : 3%;
                border        : 1px solid darken(@gray-light, 10%);
                cursor        : pointer;

                span{
                    display : block;
                    .transition;

                    &.action-preview{
                        height      : 110px;
                        line-height : 110px;
                        font-size   : 78px;
                        color       : darken(@gray-light, 20%);

                        &.ticon-remarketing{
                            font-size : 100px;
                        }
                    }
                    &.action-name{
                        padding        : @padding-base-vertical @padding-base-horizontal;
                        background     : darken(@gray-light, 30%);;
                        color          : @gray-lighter;
                        text-transform : uppercase;
                    }
                }

                &:hover{
                    border-color : @gray-light;

                    .action-preview{
                        color : @gray;
                    }
                    .action-name{
                        background : @gray;
                        color      : @gray-lighter;
                    }
                }
            }
        }
    }

    .tabs-contents{
        max-height : 395px;
        overflow   : auto;

        fieldset, .new-trigger-action{
            float      : left;
            margin-top : 2%;
            .grid-elements(2, 2, true);

            &:nth-child(2n+1){
                margin-left : 0;
            }

            &:nth-child(2), &:first-child{
                margin-top : 1%;
            }
        }

        fieldset{
            position  : relative;
            font-size : @font-size-base;

            &:nth-child(2n+1){
                margin-left : 0;
            }

            &:nth-child(2), &:first-child{
                margin-top : 1%;
            }

            .ticon-close{
                position : absolute;
                top      : 5px;
                right    : 5px;
            }
        }

        .new-trigger-action{
            cursor     : pointer;
            font-size  : 75px;
            padding    : 1.14em 0;
            background : transparent;
            border     : 3px dashed @gray-light;
            color      : @gray-light;
            .box-sizing;
            .transition;

            &:hover{
                border-color : darken(@gray-light, 20%);
                color        : darken(@gray-light, 20%);
            }
        }
    }

    #store-triegger-store_neworder,
    #store-triegger-store_trackingnumber{
        .new-trigger-action{
            padding : 1.4em 0;
        }
    }
}

// Manage users
//========================================
#add-user{
}

#expusrs{
    .inline-block();
    float        : right;
    margin-right : 5%;
}

#users-list_wrapper{
    margin-top : -30px;
}

#users-list{
    .ticon-sort{
        color : inherit;
    }
}

// Plugins
//==================================================
#plugin-uploader{
}
#plugin-uploader-filelist{
}
#plugin-uploader, #plugin-uploader-filelist{
    overflow    : hidden;
    max-height  : 40px;
    line-height : 40px;
}
.plugins-list{
    overflow : auto;
    height   : 392px;

    #pluginFilters ~ &{
        .box-sizing;
        height : 370px;

        .plugin-item{
            margin : 1%;
        }
    }

    .plugin-item{
        position      : relative;
        margin-top    : 1%;
        margin-bottom : 1%;
        padding       : 0;
        overflow      : hidden;
        .box-shadow(4px 4px 3px #bbb);

        &:hover{
            .readme-plugin, .del-plugin{
                .opacity(1);
            }

            .plugin-name{
            }
        }

        .readme-plugin, .del-plugin{
            z-index    : 7;
            text-align : center;
            .opacity(0);
            .transition;
        }

        .readme-plugin{
            color : #fff;
        }

        .del-plugin{
            color : #f44645;
        }

        .plugin-name{
            position   : relative;
            z-index    : 5;
            background : #2d82a3;
            margin     : 0;
            color      : #fff;
            padding    : @padding-small-vertical @padding-small-horizontal;
            .text-overflow;
            .box-shadow(0 1px 10px #206887);
        }
        .plugin-image{
            height   : 129px;
            overflow : hidden;
            position : relative;

            img{
                width : 100%;
            }
        }
        .plugin-control{
            .button-color(@button-error-color, desaturate(@button-error-bg, 25%), desaturate(@button-error-border, 25%));

            &.block{
                .button-color(@button-success-color, @button-success-bg, @button-success-border);
            }
        }
        .plugin-endis{
            .button-color(#fff, #2d81a2, #2d81a2);

            &.disable{
                .button-color(darken(@gray-light, 40%), darken(@gray-light, 10%), @gray-light);
            }
        }
    }
}

.readme-content{
    .user-select(text);
    height : 400px !important;
}