/* MainContainerの中の要素のどこかにdata-page-mode属性がある場合に適用されるページモードカラー */

:root {
    /* mode-colorが指定されなかった場合のデフォルトカラー */
    --mode-color: var(--PrimaryColor);

    /* 超過勤務モード指定色 */
    --mode-color-overtime: var(--AllocationWork_Full_TextColor);
    /* 代休モード指定色 */
    --mode-color-comp-time: var(--CompTime_TextColor);
}

.MainContainer {
    /* ページモードに応じたカラーを適用 */
    &:has([data-page-mode="Overtime"]) {
        --mode-color: var(--mode-color-overtime);
        background: var(--Overtime_Gradient);
    }

    &:has([data-page-mode="CompTime"]) {
        --mode-color: var(--mode-color-comp-time);
        background: var(--CompTime_Gradient);
    }
}