/**
 * activation.scss
 * Styles applied to elements displayed on activation
 */

/**
 * Imports
 */
@import "bourbon";

/**
 * Styling begins
 */
div.multitool-message {
    overflow: hidden;
    position: relative;
    border-left-color: #1ca50e !important;
    p {
        max-width: 700px;
    }
}

p.multitool-actions,
.multitool-message {
    a.button-primary {
        background: #1ca50e;
        border-color: #138008;
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 #138008;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 #138008;
        color: #fff;
        text-shadow: 0px -1px 1px #138008, 1px 0px 1px #138008, 0px 1px 1px #138008, -1px 0px 1px #138008;

        &:hover, &:focus, &:active {
            background: #138008;
            border-color: #138008;
            -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 #138008;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 #138008;
        }
    }

    a.multitool-message-close {
        position: absolute;
        top: 0;
        right: 0;
        padding: 10px 15px 10px 21px;
        font-size: 13px;
        line-height: 1.23076923;
        text-decoration: none;
        &:before {
            position: absolute;
            top: 8px;
            left: 0;
            -webkit-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
        }
    }

    a.button-primary,
    a.button-secondary {
        text-decoration: none !important;
    }
}

p.multitool-actions,
.multitool-about-text {
    margin-bottom: 1em !important;
}