/*
Input with confirm and cancel buttons

An input with three different states: Empty, Edit, and Read only.

Markup:
<p for="ConfirmCancel" class="form__label">Label</p>
<div class="input-confirm-cancel--empty">--</div>
<label for="ConfirmCancel" class="form__label">Label</label>
<div class="input-confirm-cancel--editing">
    <div class="input-confirm-cancel__input-group">
        <input class="form-element__input input-confirm-cancel__input"
            id="ConfirmCancel"
            name="ConfirmCancel"/>
    </div>
    <div class="input-confirm-cancel__btn-group">
        <button class="btn btn--primary input-confirm-cancel__btn">
            <span class="input-confirm-cancel__confirm-icon svgicon--checkmark-white" aria-hidden="true"></span>
            <span class="screen-reader-only">confirm</span>
        </button>
        <button class="btn input-confirm-cancel__btn">
            <span class="input-confirm-cancel__cancel-icon svgicon--delete" aria-hidden="true"></span>
            <span class="screen-reader-only">cancel</span>
        </button>
    </div>
</div>
<p class="form__label">Label</p>
<div class="input-confirm-cancel--edited">
    read only input
    <button type="button" class="svgicon--btn icon-pencil input-confirm-cancel__icon">
        <span class="screen-reader-only">Edit Label</span>
    </button>
</div>

Name: textInputConfirmCancel

Styleguide 3.2.2
*/

.input-confirm-cancel--editing {
    display: flex;
}

.input-confirm-cancel--empty,
.input-confirm-cancel--edited {
    line-height: 40px; //input height
}

.input-confirm-cancel__input-group {
    display: inline-block;
}

.input-confirm-cancel__input {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.input-confirm-cancel__btn-group {
    min-width: 73px;
    box-sizing: border-box;
    padding: 0 10px;
    line-height: 36px;
    border: 1px solid @theme-grey10;
    border-radius: 4px;
    border-left-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: white;
 }

.input-confirm-cancel__btn {
    height: 24px;
    width: 24px;
    min-width: 0;
    padding: 5px;
    line-height: 1;
}

.input-confirm-cancel__confirm-icon,
.input-confirm-cancel__cancel-icon {
    display: inline-block;
    height: 13px;
    background-size: 100%;
    vertical-align: top;
}

.input-confirm-cancel__icon {
    display: inline-block;
    height: 18px;
    width: 18px;
    margin-left: 5px;
    vertical-align: middle;
}

.input-confirm-cancel__confirm-icon {
    width: 13px;
}

.input-confirm-cancel__cancel-icon {
    width: 10px;
}