:root {
    --work-small-color: var(--aui-text-tertiary);
    --work-icon-color: var(--aui-white-primary);

    --work-dayoff-first-column: #228be6;
    --work-dayoff-all-column: #d0ebff;

    --work-meet-first-column: #fd7e14;
    --work-meet-all-column: #ffe8cc;

    --work-task-first-column: var(--aui-brand-primary);
    --work-task-all-column: var(--aui-brand-quaternary);
    --work-work-first-column: #be4bdb;
    --work-work-all-column: #f3d9fa;

    --work-muted-color: var(--aui-text-tertiary);

    --work-comment-color: var(--aui-accent-primary);
    --work-comment-backward: var(--aui-white-primary);

    --work-ment-icon: var(--aui-component-height-default);
    --work-ment-gap: var(--aui-component-gap);
    --work-ment-padding: var(--aui-component-padding);
    --work-ment-line: var(--aui-border-primary);
    --work-ment-background: var(--aui-fill-quaternary-alpha);
    --work-ment-background-mine: var(--aui-fill-tertiary-alpha);
    --work-ment-text-secondary: var(--aui-text-tertiary);
    --work-ment-accent: var(--aui-accent-primary);
    --work-ment-accent-backward: var(--aui-white-primary);
    --work-ment-danger: var(--aui-danger-primary);
}

body {
    &[data-color-scheme='dark'],
    &[data-color-scheme='auto'][data-prefers-color-scheme='dark'] {
        --work-small-color: var(--aui-white-primary);

        --work-dayoff-first-column: #1971c2;
        --work-dayoff-all-column: #228be6;

        --work-meet-first-column: #e8590c;
        --work-meet-all-column: #fd7e14;

        --work-work-first-column: #9c36b5;
        --work-work-all-column: #be4bdb;
    }
}

aui-component[data-name='Works'] {
    aui-component[data-type='panel'][data-variant='view'] {
        div[data-role='row'] {
            &.DAYOFF {
                > div[data-model='table'][data-role='freeze'] > div[data-model='table'][data-role='column'],
                > div[data-model='table'][data-role='column'] {
                    background-color: var(--work-dayoff-all-column);

                    > div[data-model='table'][data-view='view'] {
                        background-color: inherit;
                    }
                }

                > div[data-model='table'][data-role='freeze'] > div[data-model='table'][data-role='column'].dayoff,
                > div[data-model='table'][data-role='column'].dayoff {
                    background-color: var(--work-dayoff-first-column);
                }
            }

            &.MEET {
                > div[data-model='table'][data-role='freeze'] > div[data-model='table'][data-role='column'],
                > div[data-model='table'][data-role='column'] {
                    background-color: var(--work-meet-all-column);

                    > div[data-model='table'][data-view='view'] {
                        background-color: inherit;
                    }
                }

                > div[data-model='table'][data-role='freeze'] > div[data-model='table'][data-role='column'].meet,
                > div[data-model='table'][data-role='column'].meet {
                    background-color: var(--work-meet-first-column);
                }
            }

            &.WORK {
                > div[data-model='table'][data-role='freeze'] > div[data-model='table'][data-role='column'],
                > div[data-model='table'][data-role='column'] {
                    background-color: var(--work-work-all-column);

                    > div[data-model='table'][data-view='view'] {
                        background-color: inherit;
                    }
                }

                > div[data-model='table'][data-role='freeze'] > div[data-model='table'][data-role='column'].work,
                > div[data-model='table'][data-role='column'].work {
                    background-color: var(--work-work-first-column);
                }
            }

            div[data-view='view'] {
                small {
                    color: var(--work-small-color);
                }

                i.check {
                    display: inline-block;
                    width: calc(var(--aui-line-height-default) + 2px);
                    height: calc(var(--aui-line-height-default) + 2px);
                    margin: -1px;
                    line-height: var(--aui-line-height-default);
                    box-sizing: border-box;
                    text-align: center;
                    vertical-align: top;
                    font-style: normal;
                    border: 1px solid var(--aui-border-primary);
                    border-radius: 50%;
                    background: var(--aui-white-primary);
                    color: var(--aui-white-primary);

                    &.mi-check {
                        border-color: var(--aui-beginning-primary);
                        background: var(--aui-beginning-primary);
                    }

                    &.mi-close {
                        border-color: var(--aui-danger-primary);
                        background: var(--aui-danger-primary);
                    }
                }

                &.dayoff,
                &.meet {
                    i[data-role='icon'] {
                        margin-inline: -2px;
                    }
                }
            }

            div[data-role='column'].dayoff,
            div[data-role='column'].meet,
            div[data-role='column'].task {
                font-size: var(--aui-font-size-default);

                i {
                    color: var(--work-icon-color);
                }
            }

            div[data-role='column'].dayoff {
                background-color: var(--aui-accent-primary);
            }

            div[data-role='column'].meet {
                background-color: var(--work-meet-first-column);
            }

            div[data-role='column'].task {
                background-color: var(--work-task-first-column);
            }
        }
    }

    div[data-model='table'][data-role='column'].work-title-complete {
        div[data-model='table'][data-view='view'] {
            text-decoration: line-through;
        }
    }

    div[data-model='table'][data-role='column'].work-title-muted {
        div[data-model='table'][data-view='view'] {
            color: var(--work-muted-color);
        }
    }

    span.work-title-with-ment {
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        gap: var(--aui-component-gap);

        > span.work-title-text {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        > span.ment {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            margin-left: auto;

            &::before {
                font-family: moimz;
                content: '\ed72';
                font-size: calc(var(--aui-component-inset) + var(--aui-component-gap) * 2);
                color: var(--work-comment-color);
            }

            > i {
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: var(--aui-line-height-small);
                min-height: var(--aui-line-height-small);
                width: var(--aui-line-height-small);
                height: var(--aui-line-height-small);
                margin-left: -8px;
                border-radius: var(--aui-component-gap);
                background: var(--work-comment-color);
                color: var(--work-comment-backward);
                font-style: normal;
                font-size: var(--aui-font-size-small);
                line-height: var(--aui-line-height-small);
            }
        }
    }

    aui-component[data-type='panel'].todo,
    aui-component[data-type='panel'].task,
    aui-component[data-type='panel'].meet {
        aui-component[data-type='toolbar'] {
            aui-component[data-type='field'] {
                > div[data-role='container'] > label:has(i) {
                    width: var(--aui-component-height-default);

                    i {
                        display: block;
                        width: calc(var(--aui-component-height-default) - 4px);
                        height: calc(var(--aui-component-height-default) - 4px);
                        margin-block: 2px;
                        line-height: calc(var(--aui-component-height-default) - 6px);
                        text-align: center;
                        font-size: var(--aui-font-size-large);
                        color: var(--aui-color-text-300);
                        background: var(--aui-bg-quaternary);
                        border-radius: 5px;
                        border: 1px solid var(--aui-color-background-200);
                    }
                }
            }
        }

        aui-component[data-type='field'][data-variant='display'] {
            > div[data-role='container'] > div[data-role='content'] > div {
                small {
                    display: inline-block;
                    color: var(--aui-color-text-300);
                    vertical-align: baseline;
                }

                i[data-role='photo'] {
                    display: inline-block;
                    width: var(--aui-component-height-default);
                    height: var(--aui-component-height-default);
                    margin-right: var(--aui-component-gap);
                    vertical-align: middle;
                    background-size: cover;
                    background-position: 50% 50%;
                    border-radius: 50%;
                    border: 1px solid var(--aui-color-background-200);
                    flex-shrink: 0;
                }
            }
        }
    }

    div[data-role='work'] {
        div[data-role='ment'] {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: var(--work-ment-gap);
            padding: var(--work-ment-padding);
            border-bottom: 1px solid var(--work-ment-line);

            > i[data-role='icon'] {
                position: relative;
                flex-shrink: 0;
                width: var(--work-ment-icon);
                height: var(--work-ment-icon);
                line-height: var(--work-ment-icon);
                text-align: center;
                font-style: normal;
                color: #fff;
                background: var(--aui-bg-quaternary);
                background-size: cover;
                background-position: 50% 50%;
                border-radius: 50%;
                border: 1px solid var(--work-ment-line);

                &.MENT.mine {
                    border: 2px solid var(--work-ment-accent);

                    &::after {
                        position: absolute;
                        right: -5px;
                        bottom: -5px;
                        width: 18px;
                        height: 18px;
                        line-height: 18px;
                        text-align: center;
                        font-size: 11px;
                        content: '나';
                        border-radius: 50%;
                        background: var(--work-ment-accent);
                        color: var(--work-ment-accent-backward);
                    }
                }
            }

            > div[data-role='content'] {
                display: flex;
                flex: 1;
                flex-direction: column;
                min-width: 0;

                > div[data-role='header'] {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: var(--work-ment-gap);
                    margin-bottom: 4px;

                    > span[data-role='name'] {
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-weight: 700;

                        > small {
                            font-weight: 400;
                            color: var(--work-ment-text-secondary);
                        }
                    }

                    > time {
                        flex-shrink: 0;
                        color: var(--work-ment-text-secondary);
                        font-size: var(--aui-font-size-small);
                    }

                    > button[data-role='button'] {
                        flex-shrink: 0;
                        width: 24px;
                        height: 24px;
                        padding: 0;
                        border: 0;
                        border-radius: 4px;
                        background: var(--work-ment-danger);
                        color: #fff;
                        cursor: pointer;
                        font-family: moimz;
                        font-size: 0;

                        &::before {
                            content: '\e414';
                            font-size: 14px;
                            line-height: 24px;
                        }
                    }
                }

                > div[data-role='message'] {
                    padding: var(--work-ment-padding);
                    border-radius: 6px;
                    line-height: 1.8;
                    word-break: break-word;
                    background: var(--work-ment-background);

                    &.mine {
                        background: var(--work-ment-background-mine);
                    }

                    > div[data-role='wysiwyg-content'] {
                        padding: 0;
                    }
                }
            }
        }
    }
}