@use "../../global" as *;

.btn {
    padding-top: 0;
    padding-bottom: 0;
}

.c-button {
    &_pagenation {
        border: 0px;
        border-radius: 3px;
    }
    &_zoom {
        background-color: #013767 !important;

        &_icon {
            color: #f9f9f9;
        }
        // 20230802 アイコン上下中央対策
        .material-icons {
            vertical-align: middle;
        }
    }
    // 濃紺色アイコンボタン
    &_common {
        margin: 0.1em !important;
        height: 0.8cm !important;
        padding: 0.2em 1em !important;
        // min-width: 2cm !important;

        display: flex;
        justify-content: center;
        align-items: center;

        font-weight: 300;
        font-size: 16px;

        color: #f9f9f9 !important;
        background-color: #013767;
        border-radius: 15px;
        border: 0;

        .text_span {
            // font-size: 0.75rem;
            vertical-align: super;
            font-weight: 500;
        }

        &:hover {
            background-color: var(--Overlaybar) !important;
        }
        &:active,
        &:focus-visible {
            background-color: var(--BrightOverlaybar) !important;
        }
    }
    // 赤色系アイコンボタン
    &_danger {
        margin: 0.1em !important;
        height: 0.8cm !important;
        padding: 0.2em 1em !important;

        display: flex;
        justify-content: center;
        align-items: center;

        font-weight: 300;
        font-size: 16px;

        color: #f9f9f9 !important;
        background-color: var(--DangaerButton);
        border-radius: 15px;
        border: 0;
        .text_span {
            // font-size: 0.75rem;
            vertical-align: super;
            font-weight: 500;
        }

        &:hover {
            background-color: var(--DangaerButtonHover) !important;
        }
        &:active,
        &:focus-visible {
            background-color: var(--DangaerButton) !important;
        }
    }

    &_maticon {
        color: #f9f9f9;

    }
    // 追加＋ボタン
    &_add {
        margin: 0.1em !important;
        height: 0.8cm !important;
        padding: 0.2em 1em !important;

        display: flex;
        justify-content: center;
        align-items: center;

        font-weight: 300;
        font-size: 16px;

        color: #f9f9f9 !important;
        background-color: var(--TableHeaderBG);
        border-radius: 15px;
        border: 0;
        .text_span {
            // font-size: 0.75rem;
            font-weight: 500;
            vertical-align: super;
        }

        &:hover {
            background-color: var(--DarkTableHeaderBG) !important;
        }
        &:active,
        &:focus-visible {
            background-color: var(--BrightTableHeaderBG) !important;
        }
    }
    &_fileadd {
        width: initial !important;
        display: initial !important;
    }
}
// テーブル行内ボタンデザイン
mat-table .c-button {
    &_common {
        border-radius: 7px;
    }
    &_danger {
        border-radius: 7px;
    }
}
