/* =========================================================================
   Component: Button
   ========================================================================= */

/* --- Base Block --- */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--white);
    background-color: var(--button-color);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    text-decoration: none;
}

/* Hover & Active States */
.c-btn:hover {
    background-color: var(--button-color-hover);
    box-shadow: var(--shadow-sm);
}

.c-btn:active {
    background-color: var(--button-color-active);
}

/* Disabled State */
.c-btn:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    cursor: not-allowed;
    box-shadow: none;
}


/* --- サイズバリエーション --- */
.c-btn--full {
    width: 100%;
}

.c-btn--sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-xs);
}

.c-btn--md {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-sm);
}

.c-btn--lg {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--fs-main);
}

/* --- Modifiers (色バリエーション) --- */

/* Edit / Info */
.c-btn--edit {
    background-color: var(--edit-color);
}
.c-btn--edit:hover {
    background-color: var(--edit-color-hover);
}
.c-btn--edit:active {
    background-color: var(--edit-color-active);
}

/* Move / Action */
.c-btn--move {
    background-color: var(--gray-500);
}
.c-btn--move:hover {
    background-color: var(--gray-600);
}
.c-btn--move:active {
    background-color: var(--gray-600);
}

/* Delete / Danger */
.c-btn--delete {
    background-color: var(--delete-color);
}
.c-btn--delete:hover {
    background-color: var(--delete-color-hover);
}
.c-btn--delete:active {
    background-color: var(--delete-color-active);
}

/* Cancel Button Style */
.c-btn--cancel {
    background-color: var(--secondary-color);
    text-align: center;
}

.c-btn--cancel:hover {
    background-color: var(--secondary-color-hover);
}


.c-btn--link {
    color: var(--gray-600);
    box-shadow: none;
    text-decoration: underline;
    font-size: var(--fs-sm);
}

/* 編集アイコンボタン */
.c-btn-icon-edit {
    filter: invert(29%) sepia(94%) saturate(2463%) hue-rotate(212deg) brightness(91%) contrast(101%);
}

/* 削除アイコンボタン */
.c-btn-icon-delete {
    filter: invert(33%) sepia(98%) saturate(1632%) hue-rotate(340deg) brightness(89%) contrast(95%);
}