// inspired by http://dribbble.com/shots/857472-Toolbar

// theme settings
$medium-editor-bgcolor: #dee7f0;
$medium-editor-bgcolor-alt: #5c90c7;
$medium-editor-border-color: #cdd6e0;
$medium-editor-button-size: 50px;
$medium-editor-button-hover-text-color: #fff;
$medium-editor-button-active-text-color: #000;
$medium-editor-link-color: #40648a;
$medium-editor-border-radius: 2px;

// theme rules
.medium-toolbar-arrow-under:after,
.medium-toolbar-arrow-over:before {
    display: none;
}

.medium-editor-toolbar {
    border: 1px solid $medium-editor-border-color;
    background-color: $medium-editor-bgcolor;
    background-color: rgba($medium-editor-bgcolor, .95);
    background: linear-gradient(to top, $medium-editor-bgcolor, rgba(#fff, 1));
    border-radius: $medium-editor-border-radius;
    box-shadow: 0 2px 6px rgba(#000, .45);

    li {
        button {
            min-width: $medium-editor-button-size;
            height: $medium-editor-button-size;
            border: none;
            border-right: 1px solid $medium-editor-border-color;
            background-color: transparent;
            color: $medium-editor-link-color;
            transition: background-color .2s ease-in, color .2s ease-in;
            &:hover {
                background-color: $medium-editor-bgcolor-alt;
                background-color: rgba($medium-editor-bgcolor-alt, .45);
                color: $medium-editor-button-hover-text-color;
            }
        }

        .medium-editor-button-first {
            border-top-left-radius: $medium-editor-border-radius;
            border-bottom-left-radius: $medium-editor-border-radius;
        }

        .medium-editor-button-last {
            border-top-right-radius: $medium-editor-border-radius;
            border-bottom-right-radius: $medium-editor-border-radius;
        }

        .medium-editor-button-active {
            background-color: $medium-editor-bgcolor-alt;
            background-color: rgba($medium-editor-bgcolor-alt, .45);
            color: $medium-editor-button-active-text-color;
            background: linear-gradient(to bottom, $medium-editor-bgcolor, rgba(#000, .1));
        }
    }
}

.medium-editor-toolbar-form {
    background: $medium-editor-bgcolor;
    color: #999;
    border-radius: $medium-editor-border-radius;

    .medium-editor-toolbar-input {
        height: $medium-editor-button-size;
        background: $medium-editor-bgcolor;
        color: $medium-editor-link-color;
        box-sizing: border-box;
    }

    a {
        color: $medium-editor-link-color;
    }
}

.medium-editor-toolbar-anchor-preview {
    background: $medium-editor-bgcolor;
    color: $medium-editor-link-color;
    border-radius: $medium-editor-border-radius;
}

.medium-editor-placeholder:after {
    color: $medium-editor-border-color;
}