.placeholder-icon {
    color: #bbb; // todo : use a var
    margin-right: floor(@grid-gutter-width / 2);

    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5); // todo use a var
    border-radius: 50%;

    + .placeholder-body {
        border-width: 0;
        border-color: @placeholder-border-color;
        border-style: solid;
        padding-left: floor(@grid-gutter-width / 2);
    }
}

.placeholder-body {
    flex: 1;
    text-align: center;
}

.placeholder-title {
    display: block;
    font-weight: bold;
}

// ATTENTION : never create a .placeholder class as bootstrap already define a mixin with that name.
.empty-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: @component-margin-bottom;

    color: @placeholder-color;
    background: @placeholder-bg;
    border-color: @placeholder-border-color;
    border-style: dashed;
}

// FIXME: this is ugly to do it like it
.page-content > .empty-placeholder {
    flex: 1;
    &:first-child {
        margin-top: @component-margin-bottom;
    }
}

.form-group {
    .empty-placeholder {
        margin-bottom: @form-group-margin-bottom;
    }
}

.drop-placeholder {
    color: @placeholder-color;
    background: @placeholder-bg;
    border-color: @placeholder-border-color;
    border-style: dashed;
}

.placeholder-hover {
    &.hover,
    &:hover {
        border-color: @placeholder-hover-border-color;
    }
}

.placeholder-sm {
    min-height: @input-height-small;
    line-height: @line-height-small;

    .placeholder-variant(
        @placeholder-sm-font-size,
        @placeholder-sm-padding,
        @placeholder-sm-border-radius,
        @placeholder-sm-border-size
    );
}

.placeholder-md {
    min-height: @input-height-base;
    line-height: @line-height-computed;

    .placeholder-variant(
        @placeholder-font-size,
        @placeholder-padding,
        @placeholder-border-radius,
        @placeholder-border-size
    );
}

.placeholder-lg {
    min-height: @input-height-large;
    line-height: @line-height-large;

    .placeholder-variant(
        @placeholder-lg-font-size,
        @placeholder-lg-padding,
        @placeholder-lg-border-radius,
        @placeholder-lg-border-size
    );
}
