/**
 * 共通「追加」ボタン（丸い＋アイコン＋テキスト）
 *
 * 色はユニットカラー。外側の枠線は付けない。
 *
 * <button type="button" class="btn-add-item">
 *   <span class="btn-add-item-plus" aria-hidden="true">＋</span>
 *   出納帳を追加
 * </button>
 */

.btn-add-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 16px;
    min-height: 40px;
    border: none;
    border-radius: 10px;
    background: color-mix(in srgb, var(--unit-color, #80bfcb) 12%, #fff);
    color: var(--unit-color, #80bfcb);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

a.btn-add-item,
button.btn-add-item {
    color: var(--unit-color, #80bfcb);
    text-decoration: none;
}

.btn-add-item:hover,
.btn-add-item:focus-visible {
    background: color-mix(in srgb, var(--unit-color, #80bfcb) 20%, #fff);
    color: var(--unit-color, #80bfcb);
    text-decoration: none;
}

.btn-add-item:focus-visible {
    outline: 2px solid var(--unit-color, #80bfcb);
    outline-offset: 2px;
}

.btn-add-item-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--unit-color, #80bfcb);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.btn-add-item--block {
    display: flex;
    width: 100%;
}