$slack-green: #1a937d;
$slack-blue: #30b7d0;
$slack-gold: #e8a723;

#rock-slackbot-intro-message {
    background: $slack-green;
    min-height: 50px;
    padding: 15px 15px 15px 102px;
    color: #fff;
    margin: 12px 0 10px 0;
    position: relative;
    z-index: 0;

    a {
        color: inherit;
    }

    .slack-logo {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        background: url('../images/slack-logo.png') 12px 13px no-repeat #fff;
        background-size: 60px auto;
        width: 84px;
        height: 100%;
        z-index: -1;
    }

    .slack-message {
        margin: 0;
    }
}

#rock-slackbot-network-message {
    background: #e01765;
    padding: 10px;
    color: #fff;
    margin: 0;

    a {
        color: inherit;
    }

    .slack-message {
        margin: 0;

        .dashicons {
            margin: 0 3px 0 0;
        }
    }
}

.rock-slackbot-outgoing-webhooks-message {
    padding: 15px 12px;
}

.rts-dashicons .dashicons {
	line-height: 0.9;
    margin: 0 2px 0 0;
}

.rts-icons-link {
    text-decoration: none;

    .rts-link-text {
        text-decoration: underline;
    }
}

.wp-core-ui {

    .rts-button {
        background: $slack-blue;
        color: #fff !important;
        width: auto;
        height: auto;
        font-size: 14px;
        line-height: 18px;
        font-weight: bold;
        padding: 10px;
        margin: 0 0 15px 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        text-align: center;
        text-shadow: none;
        cursor: pointer;

        .dashicons {
            vertical-align: middle;
        }

        &.rts-button-block {
            display: block;
        }

        &.rts-button-green {
            background: $slack-green;

            &:hover {
                background: #13806c;
            }
        }

        &.rts-button-gold {
            background: $slack-gold;
            color: #fff;

            &:hover {
                background: #de9b12;
            }
        }

        &.rts-button-red {
            background: #cc2027;

            &:hover {
                background: #b9070f;
            }
        }

        &:hover {
            background: #2daac1;
            color: #fff;
        }
    }

    .rts-side-button {
        width: 100%;
    }
}

#rts-add-button-wrapper {
    padding: 15px;

    .rts-button {
        width: 100%;
        margin: 0;
    }
}

#rock-slackbot-about-mb p {
	line-height: 22px;
}

#rock-slackbot-promote-mb {

    p {
        margin: 10px 0;
    }

    a {
        text-decoration: none;
    }

    .promote-text {
        text-decoration: underline;
    }

    .dashicons {
        text-decoration: none;
    }

    .donate img {
        margin: 0 4px 2px 0;
        vertical-align: middle;
    }
}

// Inside area of meta boxes
#rock-slackbot-edit-outgoing-webhook-mb,
#rock-slackbot-outgoing-webhooks-mb {

    .inside {
        margin: 0;
        padding: 0;
    }
}

#rock-slackbot-no-webhooks {
    background: #f9f9f9;
    min-height: 247px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 75px 20px 0 20px;
    text-align: center;
    font-size: 30px;
    line-height: 35px;
    color: #666;

    .dashicons {
        font-size: 50px;
        line-height: 35px;
        margin: 0 35px 0 0;
        color: inherit;
    }
    
    a {
        display: inline-block;
        text-decoration: none;
        color: inherit;
        padding: 20px;
        margin: 0 auto;

        &:hover {
            background: $slack-blue;
            color: #fff;
        }
    }
}

#rock-slackbot-no-webhook-edit {
    background: #f9f9f9;
    padding: 20px;
    text-align: center;

    > *:first-child {
        margin-top: 0;
    }

    p {
        color: #444;
        font-size: 16px;
        line-height: 22px;
        margin: 0;
    }

    ul {
        display: block;
        width: auto;
        margin: 15px auto 5px auto;

        .dashicons {
            text-decoration: none;
        }

        li {
            display: inline-block;
            margin: 0 8px;
        }
    }
}

// Edit form
#rock-slackbot-edit-outgoing-webhook-form {
    margin: 0;
    border: 0;
}

table {

    // Base for all tables
    &.rock-slackbot {
        background: #fff;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        text-align: left;

        td {
            width: auto;
            padding: 0;
        }

        input[type="text"] {
            width: 100%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    }

    // Manage webhooks table
    &.rock-slackbot-outgoing-webhooks {

        th {
            width: auto;
            background: #222;
            color: #fff;
            font-weight: bold;
            padding: 5px 10px 5px 0;
        }

        td {
            padding: 12px 10px 12px 0;

            &.name {
                font-weight: bold;
                font-size: 1.1em;
                line-height: 1.4em;
            }
        }

        .index {
            width: 40px;
            padding-left: 0;
            padding-right: 0;
            text-align: center;
        }

        .status {
            width: 35px;
            padding-left: 0;
            padding-right: 0;
        }

        .status-circle {
            display: block;
            background: #cc2027;
            width: 15px;
            height: 15px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;

            &.active {
                background: #3eb890;
            }
        }

        tr:nth-child(even) > td {
            background: #eaf7fa;
        }
    }

    // Add/edit webhook table
    &.rock-slackbot-edit-outgoing-webhook {

        td {
            padding: 10px 15px;
            border-top: 1px solid #eee;
            vertical-align: top;

            &.rts-label {
                background: #f9f9f9;
                width: 150px;
                font-weight: bold;
                padding-left: 12px;
                border-right: 1px solid #eee;
                
                .rts-label-desc {
                    display: block;
                    font-style: italic;
                    font-weight: normal;
                    margin: 2px 0 0 0;
                }
            }

            &.rts-field {

                &.lighter {
                    opacity: 0.7;
                }

                &.rts-events,
                &.rts-event-section {
                    padding: 0;
                }

                &.rts-events {
                    border-top:0;
                }

                .rts-field-required-message,
                .rts-field-invalid-message {
                    display: none;
                    clear: both;
                    color: #900;
                    font-weight: bold;
                    margin: 5px 0 0 0;
                    font-style: italic;
                }

                // When there's an error
                &.rts-field-error {
                    .rts-input {
                        border-color: #900;
                    }
                }

                // When the field is blank...
                &.rts-field-is-blank {

                    // Show the required message
                    .rts-field-required-message {
                        display: block;
                    }
                }

                // When the field is invalid...
                &.rts-field-is-invalid {

                    // Show the invalid message
                    .rts-field-invalid-message {
                        display: block;
                    }
                }

                .rts-network-post-types {
                    margin: 10px -15px 0 -15px;
                    padding: 10px 15px;
                    border-top: 1px solid #eee;

                    input {
                        margin: 5px 0 0 0;
                    }
                }
            }

            .wordpress-icon-emoji {
                width: 64px;
                height: auto;
            }

            $rts-input-has-button-width: 150px;
            $rts-input-has-button-height: 28px;
            .rts-input-button-combo {
                position: relative;

                .rts-input {
                    height: $rts-input-has-button-height;
                    line-height: $rts-input-has-button-height;
                    padding: 0 5px;
                    margin: 0;
                }

                // Hidden by default
                .rts-input-button {
                    display: none;
                    width: $rts-input-has-button-width;
                    background: #444;
                    position: absolute;
                    right: 0;
                    top: 0;
                    height: $rts-input-has-button-height;
                    line-height: $rts-input-has-button-height;
                    padding: 0 10px;
                    box-shadow: none;
                    border: 0;
                    border-radius: 0;
                    color: #fff;
                    text-align: center;

                    &:hover {
                        background: #23282d;
                    }
                }

                &.show-button {

                    .rts-input {
                        padding-right: $rts-input-has-button-width + 5px;
                    }

                    .rts-input-button {
                        display: block;
                    }
                }
            }

            .rts-field-desc {
                display: block;
                clear: both;
                margin: 5px 0 0 0;
                font-style: italic;
            }

            .rts-choice {
                display: block;
                margin: 0 0 4px 0;

                & + .rts-field-desc {
                    padding-top: 5px;
                }
            }

	        .rts-choices .rts-choice {
		        float: left;
			    width: 50%;
	        }

            .rts-event-section {
                vertical-align: middle;
            }

            .rts-event-choice {
                border-top: 1px solid #eee;

                &:first-child {
                    border-top: 0;
                }

                .rts-event-choice-active {
                    padding: 10px 15px;

                    label {
                        display: block;
                    }
                }

                table.rts-event-choice-details {
                    display: none;

                    td {
                        vertical-align: middle;
                    }
                }

                &.rts-choice-is-active {

                    table.rts-event-choice-details {
                        display: table;
                    }
                }
            }
        }

        tr#edit-rts-notification-events {

            #rts-select-all-events {
                margin: 10px 0 0 0;
                font-size: 13px;
                line-height: 17px;

                .show-if-all-selected {
                    display: none;
                }

                &.all-selected {

                    .hide-if-all-selected {
                        display: none;
                    }

                    .show-if-all-selected {
                        display: block;
                    }
                }
            }
        }

        tr.buttons {

            td {
                padding: 10px;

                .button {
                    width: 100%;
                    height: 35px;
                    line-height: 35px;
                    box-shadow: none;
                    border: 0;
                    border-radius: 0;
                    font-weight: bold;
                    padding: 0;
                    margin: 0;
                }

                &.rts-cancel {
                    padding-right: 5px;

                    .button {
                        font-size: 12px;
                    }
                }

                &.rts-submit {
                    padding-left: 5px;

                    .button {
                        width: 100%;
                        padding-left: 0;
                        padding-right: 0;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

#rts-popup-test-webhook-url {
    background: url("../images/slack-logo.png") 5px 10px no-repeat #fff;
    background-size: 100px auto;
    min-height: 130px;
    padding: 0 10px 0 130px;

    p {
        margin-bottom: 0.6em;
    }

    .rts-response {
        display: block;
        color: #fff;
        padding: 5px;
        margin: 11px 0 0 0;
        text-align: center;
        font-weight: bold;
    }

    .rts-response-success {
        background: $slack-green;
    }

    .rts-response-fail {
        background: #cc2027;
    }

    .rts-popup-buttons {

        .button {
            margin-left: 3px;

            &.loading {

                span {
                    display: none;
                }
            }

            &.button-primary {

                &.loading {
                    background-image: url( '../images/loading.gif' );
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: auto 80%;
                }

                &:hover {
                    background-color: darken($slack-green, 6%);
                }
            }

            &:first-child {
                margin-left: 0;
            }
        }
    }
}