// theme settings
$medium-editor-bgcolor: #000;
$medium-editor-button-size: 40px;
$medium-editor-button-active-text-color: #a2d7c7;
$medium-editor-hover-color: $medium-editor-bgcolor;
$medium-editor-link-color: #ccc;
$medium-editor-border-radius: 50px;
$medium-editor-placeholder-color: #f8f5f3;

// theme rules
.medium-toolbar-arrow-under:after {
    border-color: $medium-editor-bgcolor transparent transparent transparent;
    top: $medium-editor-button-size;
}

.medium-toolbar-arrow-over:before {
    border-color: transparent transparent $medium-editor-bgcolor transparent;
}

.medium-editor-toolbar {
    background-color: $medium-editor-bgcolor;
    border: none;
    border-radius: $medium-editor-border-radius;

    li {
        button {
            background-color: transparent;
            border: none;
            box-sizing: border-box;
            color: $medium-editor-link-color;
            height: $medium-editor-button-size;
            min-width: $medium-editor-button-size;
            padding: 5px 12px;
            transition: background-color .2s ease-in, color .2s ease-in;
            &:hover {
                background-color: $medium-editor-hover-color;
                color: $medium-editor-button-active-text-color;
            }
        }

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

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

        .medium-editor-button-active {
            background-color: $medium-editor-hover-color;
            color: $medium-editor-button-active-text-color;
        }
    }
}

.medium-editor-toolbar-form {
    background: $medium-editor-bgcolor;
    border-radius: $medium-editor-border-radius;
    color: $medium-editor-link-color;
    overflow: hidden;

    .medium-editor-toolbar-input {
        background: $medium-editor-bgcolor;
        box-sizing: border-box;
        color: $medium-editor-link-color;
        height: $medium-editor-button-size;
        padding-left: 16px;
        width: 220px;

        &::-webkit-input-placeholder {
           color: $medium-editor-placeholder-color;
           color: rgba($medium-editor-placeholder-color, .8);
        }
        &:-moz-placeholder { /* Firefox 18- */
           color: $medium-editor-placeholder-color;
           color: rgba($medium-editor-placeholder-color, .8);
        }
        &::-moz-placeholder {  /* Firefox 19+ */
           color: $medium-editor-placeholder-color;
           color: rgba($medium-editor-placeholder-color, .8);
        }
        &:-ms-input-placeholder {
           color: $medium-editor-placeholder-color;
           color: rgba($medium-editor-placeholder-color, .8);
        }
    }

    a {
        color: $medium-editor-link-color;
        transform: translateY(2px);
    }

    .medium-editor-toolbar-close {
      margin-right: 16px;
    }
}

.medium-editor-toolbar-anchor-preview {
    background: $medium-editor-bgcolor;
    border-radius: $medium-editor-border-radius;
    padding: 5px 12px;
}

.medium-editor-anchor-preview {
  a {
    color: $medium-editor-link-color;
    text-decoration: none;
  }
}

.medium-editor-toolbar-actions {
  li, button {
    border-radius: $medium-editor-border-radius;
  }
}