/*
Status Modal

Markup:
<div>
    <section>
        <h3>Status dot</h3>
        <div>
            <span class="task-status-dot task-status-dot--new"></span> New
        </div>
        <div>
            <span class="task-status-dot task-status-dot--in-progress"></span> In Progress
        </div>
        <div>
            <span class="task-status-dot task-status-dot--completed"></span> Completed
        </div>
        <div>
            <span class="task-status-dot task-status-dot--deferred"></span> Deferred
        </div>
        <div>
            <span class="task-status-dot task-status-dot--closed"></span> Closed
        </div>
    </section>
    <section>
        <h3>Status circle</h3>
        <div class="row status-modal__status-selection-container">
            <div class="status-modal__status-selector">
                <div class="icon--circle-container status-modal__icon">
                    <div class="task-status-circle task-status-circle--new" style="left: 12px; top:12px"></div>
                </div>
                <div class="status-modal__text">New</div>
            </div>
        </div>
        <div class="row status-modal__status-selection-container">
            <div class="status-modal__status-selector status-modal__status-selector--selected">
                <div class="icon--circle-container status-modal__icon">
                    <div class="task-status-circle task-status-circle--in-progress" style="left: 12px; top:12px"></div>
                </div>
                <div class="status-modal__text">In Progress</div>
            </div>
        </div>
        <div class="row status-modal__status-selection-container">
            <div class="status-modal__status-selector">
                <div class="icon--circle-container status-modal__icon">
                    <div class="task-status-circle task-status-circle--completed" style="left: 12px; top:12px"></div>
                </div>
                <div class="status-modal__text">Completed</div>
            </div>
        </div>
        <div class="row status-modal__status-selection-container">
            <div class="status-modal__status-selector">
                <div class="icon--circle-container status-modal__icon">
                    <div class="task-status-circle task-status-circle--deferred" style="left: 12px; top:12px"></div>
                </div>
                <div class="status-modal__text">Deferred</div>
            </div>
        </div>
        <div class="row status-modal__status-selection-container">
            <div class="status-modal__status-selector">
                <div class="icon--circle-container status-modal__icon">
                    <div class="task-status-circle task-status-circle--closed" style="left: 12px; top:12px"></div>
                </div>
                <div class="status-modal__text">Closed</div>
            </div>
        </div>
    </section>
</div>

Name: taskStatus

Styleguide 2.32
*/
@task-status-new: #FBB03B;
@task-status-in-progress: @theme-blue3;
@task-status-completed: @theme-green1;
@task-status-deferred: #A56BDA;
@task-status-closed: @theme-grey5;
@status-block-width: 105px;
@status-block-height: 121px;

.task-status-circle {
    height: 15px;
    width: 15px;
    border-radius: 100%;
    position: relative;
    left: 11.5px;
    top: 11.5px;
}

.task-status-dot {
    height: 10px;
    width: 10px;
    border-radius: 100%;
    display: inline-block;
    margin-right: 5px;
}

.task-status-dot--new,
.task-status-circle--new {
 background-color: @task-status-new;
}

.task-status-dot--in-progress,
.task-status-circle--in-progress {
 background-color: @task-status-in-progress;
}

.task-status-dot--completed,
.task-status-circle--completed {
 background-color: @task-status-completed;
}

.task-status-dot--deferred,
.task-status-circle--deferred {
 background-color: @task-status-deferred;
}

.task-status-dot--closed,
.task-status-circle--closed {
 background-color: @task-status-closed;
}

// Styles used for the status selection modal
.status-modal__status-selection-container {
    margin-left: -3px;
}

.status-modal__status-selector {
    border: 1px solid transparent;
    width: @status-block-width;
    height: @status-block-height;
    float: left;
    padding-top: 25px;
    margin-left: 3px;
    margin-right: 3px;

    &:hover {
        border: 1px solid @theme-grey10;
        border-radius: @border-radius-default;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.05);
    }
}

.status-modal__status-selector--selected {
    border: 1px solid @theme-green1;
    border-radius: @border-radius-default;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.05);
}

.status-modal__status-selector.status-modal__status-selector--selected:hover {
    border: 1px solid @theme-green1;
}

.status-modal__icon {
    margin: auto;
}

.status-modal__text {
    text-align: center;
    margin-top: 5px;
}