// Name:            Placeholder
// Description:     Defines styles for placeholder boxes
//
// Component:       `wk-placeholder`
//
// Modifiers:       `wk-placeholder-large`
//
// ========================================================================


// Variables
// ========================================================================

@placeholder-margin-vertical:                   15px;
@placeholder-padding:                           20px;
@placeholder-border:                            #ddd;
@placeholder-background:                        #fafafa;
@placeholder-color:                             #444;

@placeholder-large-padding-vertical:            80px;


/* ========================================================================
   Component: Placeholder
 ========================================================================== */

.wk-placeholder {
    margin-bottom: @placeholder-margin-vertical;
    padding: @placeholder-padding;
    border: 1px dashed @placeholder-border;
    background: @placeholder-background;
    color: @placeholder-color;
    .hook-placeholder;
}

/*
 * Add margin if adjacent element
 */

* + .wk-placeholder { margin-top: @placeholder-margin-vertical; }

/*
 * Remove margin from the last-child
 */

.wk-placeholder > :last-child { margin-bottom: 0; }


/* Modifier: `wk-placeholder-large`
 ========================================================================== */

.wk-placeholder-large {
    padding-top: @placeholder-large-padding-vertical;
    padding-bottom: @placeholder-large-padding-vertical;
    .hook-placeholder-large;
}


// Hooks
// ========================================================================

.hook-placeholder-misc;

.hook-placeholder() {}
.hook-placeholder-large() {}
.hook-placeholder-misc() {}