/*
Empty state panel

This component can be used to show placeholder content for an empty state

Markup:
<div class="empty-state-panel empty-state-panel--min-height-450">
    <div class="empty-state-panel__inner-content">
        <div class="empty-state-panel__icon svgicon--wrench-grey" aria-hidden="true"></div>
        <div class="empty-state-panel__title">No work order yet</div>
        <div class="empty-state-panel__text">Create a work for this task to assign a vendor, track parts or labor, and more!</div>
        <div class="form__vertical-spacer form__vertical-spacer--large"></div>
        <button class="btn btn--primary">Add work order</button>
    </div>
</div>

Name: panelEmpty

Styleguide 2.30
*/
.empty-state-panel {
    display: flex;
    width: auto;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.empty-state-panel--min-height-450 {
    min-height: 450px;
    height: 450px;
}

.empty-state-panel__inner-content {
    text-align: center;
}

.empty-state-panel__icon {
    display: block;
    height: 65px;
    width: 65px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: 100%;
}

.empty-state-panel__title {
    padding: 10px 0;
    font-size: @font-size--20;
    font-weight: @font-weight-medium;
    color: @theme-grey9;
}

.empty-state-panel__text {
    width: 430px;
    font-size: @font-size--16;
    line-height: 22px;
    color: @theme-grey5;
}