@global-muted-color: #a0a0a0;
@global-emphasis-color: #444;
@global-danger-background: #e44e56;
@global-muted-background: #e5e5e5;

// YO core
// ========================================================================

.yo-input-locked {
    cursor: default;
}

.uk-input.uk-focus {
    outline: none;
    background-color: #fff;
    color: #777;
    border-color: #3696F3;
}

// Icons
// ========================================================================

[class*=ye-builder-icon] {
    display: block;
    width: 20px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.ye-builder-icon-add { .svg-fill('img/icon-add.svg', '#444', @global-muted-color); }
.ye-builder-icon-add:hover { .svg-fill('img/icon-add.svg', '#444', @global-emphasis-color); }
.ye-builder-icon-eye { .svg-fill('img/icon-eye.svg', '#444', @global-muted-color); }
.ye-builder-icon-eye:hover { .svg-fill('img/icon-eye.svg', '#444', @global-emphasis-color); }


// Status Icons
// ========================================================================

.ye-builder-icon-error,
.ye-builder-icon-access,
.ye-builder-icon-form,
.ye-builder-icon-form-error {
    width: 18px;
    height: 20px;
}

span.ye-builder-icon-error,
span.ye-builder-icon-access,
span.ye-builder-icon-form,
span.ye-builder-icon-form-error {
    cursor: default;
}

.ye-builder-icon-error { .svg-fill('img/icon-error.svg', '#444', @global-danger-background); }
.ye-builder-icon-access { .svg-fill('img/icon-access.svg', '#444', @global-muted-color); }
.ye-builder-icon-access-denied { .svg-fill('img/icon-access.svg', '#444', @global-danger-background); }
.ye-builder-icon-form { .svg-fill('img/icon-form.svg', '#444', @global-muted-color); }
.ye-builder-icon-form-error { .svg-fill('img/icon-form.svg', '#444', @global-danger-background); }


// Fields
// ========================================================================

.ye-button-plus {
    .svg-fill('img/button-plus.svg', '#444', @global-muted-color) !important;
    background-color: transparent !important;
    border-bottom: 1px solid @global-muted-background !important;
}

.ye-button-plus:hover {
    .svg-fill('img/button-plus.svg', '#444', @global-emphasis-color) !important;
}

.ye-input-iconnav-right { padding-right: 40px !important; }

.yo-sidebar-fields>:not(:first-child) .ye-repeatable-compact .yo-sidebar-fields {
    margin: 0 !important;
}

.ye-repeatable-compact-add {
    position: absolute;
    right: -5px;
    bottom: -9px;
    width: 18px!important;
    height: 15px!important;
    transform: translate(100%);
}

.ye-repeatable-compact-delete {
    position: absolute;
    top: 0;
    right: 0;
    padding-left: 6px;
    transform: translateX(100%);
}

// UIkit extension
// ========================================================================

.ye-description-list-small>dt:nth-child(n+2) {
    margin-top: 8px!important;
}

.uk-button.ye-button-composable {
    margin-top: -2px;
    padding: 0px 7px 0 6px;
    line-height: inherit;
    font-size: 10px;
    border: 1px solid #cacaca;
    border-radius: 10px;
    outline: inherit;
}

.uk-button.ye-button-composable.uk-button-primary {
    border-color: #3696F3;
}

.uk-button.ye-button-composable.uk-button-default.uk-active {
    color: #666;
    border-color: #999;
}


// ye-resource-item
// ========================================================================

.uk-nav-default > li.ye-resource-item:focus > a.uk-disabled,
.uk-nav-default > li.ye-resource-item:hover > a.uk-disabled {
    background: inherit !important;
}

// Mixins
// ========================================================================

.svg-fill(@src, @color-default, @color-new, @property: background-image) {

    @escape-color-default: escape(@color-default);
    @escape-color-new: escape("@{color-new}");

    @data-uri: data-uri('image/svg+xml;charset=UTF-8', "@{src}");
    @replace-src: replace("@{data-uri}", "@{escape-color-default}", "@{escape-color-new}", "g");

    @{property}: e(@replace-src);
}
