/**
 * 이 파일은 아이모듈의 일부입니다. (https://www.imodules.io)
 *
 * 캘린더 엘리먼트 스타일을 정의한다.
 *
 * @file /app/resources/styles/Calendar.css
 * @author sungjin <esung246@naddle.net>
 * @license MIT License
 * @modified 2026. 10. 14.
 */
body {
    &[data-frame='site'],
    &[data-frame='context'],
    &[data-frame='popup'] {
        div[data-role='field'] > div[data-role='calendar'] {
            font-family: var(--im-font-family-body);
            font-size: var(--im-font-size-default);
            display: flex;
            flex-direction: column;
            background: var(--im-bg-primary);
            border: 1px solid var(--im-accent-primary);
            height: 320px;
            width: 320px;

            &[popover]:not(:popover-open) {
                display: none;
            }

            > div[data-role='header'] {
                display: flex;
                flex-direction: row;
                align-items: stretch;
                padding: calc(16px * 0.5);
                height: 48px;
                background: var(--im-accent-secondary);
                flex-shrink: 0;

                > button {
                    background: transparent;
                    border: 0;
                    cursor: pointer;
                    color: var(--im-white-primary);
                    font-size: var(--im-font-size-default);

                    &[data-action='month'] {
                        margin-right: auto;
                    }

                    &[data-action='prev'],
                    &[data-action='next'] {
                        width: var(--im-component-height-default);
                        font-family: moimz;
                        font-size: var(--im-font-size-large);
                    }

                    &[data-action='prev']::before {
                        content: '\e211';
                    }

                    &[data-action='next']::before {
                        content: '\e212';
                    }

                    &[data-action='month']::after {
                        display: inline-block;
                        padding-left: 8px;
                        content: '\e234';
                        font-family: moimz;
                        font-size: var(--im-font-size-large);
                    }
                }

                > div[data-role='picker'] {
                    position: absolute;
                    top: 48px;
                    left: 0;
                    width: 100%;
                    height: calc(100% - calc(16px * 2) - calc(16px * 0.5) * 2);
                    background: var(--im-bg-primary);
                    z-index: 10;
                    display: none;
                    grid-template-columns: 1fr 2fr;
                    grid-template-rows: 1fr calc(var(--im-component-height-default) + calc(16px * 0.5) * 2 + 1px);
                    grid-template-areas:
                        'year month'
                        'footer footer';
                    column-gap: 2px;
                    row-gap: 0px;
                    background: var(--im-accent-primary);

                    > ul[data-role='years'] {
                        grid-area: year;
                        list-style: none;
                        flex-grow: 1;
                        flex-shrink: 1;
                        min-height: 0;
                        overflow-y: scroll;
                        display: grid;
                        gap: 1px;
                        background: var(--im-bg-quaternary);
                        grid-template-columns: 1fr;
                        grid-auto-rows: calc((100% - 5px) / 6);
                    }

                    > ul[data-role='months'] {
                        grid-area: month;
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        grid-template-rows: repeat(6, 1fr);
                        gap: 1px;
                        background: var(--im-bg-quaternary);
                    }

                    > ul {
                        > li {
                            height: 36px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: var(--im-bg-primary);
                            cursor: pointer;

                            &.selected {
                                background: var(--im-accent-primary);
                                color: var(--im-white-primary);
                            }
                        }
                    }

                    > div {
                        grid-area: footer;
                        border-top: 1px solid var(--im-border-secondary);
                        background: var(--im-bg-primary);
                        padding: calc(16px * 0.5);
                        height: 49px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;

                        > button {
                            background: var(--im-accent-primary);
                            color: var(--im-white-primary);
                            height: var(--im-component-height-default);
                            font-size: var(--im-font-size-default);
                            border: 0;
                            padding: 0px calc(16px * 0.5);
                            cursor: pointer;
                        }
                    }
                }

                &.picker {
                    > div[data-role='picker'] {
                        display: grid;
                    }
                }
            }

            > div[data-role='content'] {
                flex-grow: 1;
                flex-shrink: 1;
                display: flex;
                flex-direction: column;

                > ul[data-role='days'] {
                    flex-shrink: 1;
                    background: var(--im-bg-quaternary);
                    display: flex;
                    flex-direction: row;
                    align-items: stretch;
                    list-style: none;
                    gap: 1px;
                    border-bottom: 1px solid var(--im-bg-quaternary);
                    margin: 0;
                    padding: 0;

                    > li {
                        flex-basis: 0;
                        flex-grow: 1;
                        height: var(--im-component-height-default);
                        line-height: var(--im-component-height-default);
                        text-align: center;
                        color: var(--im-text-primary);
                        background: var(--im-bg-tertiary);

                        &:first-child {
                            color: #dc3535;
                        }

                        &:last-child {
                            color: #0075f8;
                        }
                    }
                }

                > ul[data-role='dates'] {
                    flex-grow: 1;
                    flex-shrink: 1;
                    min-height: 0;
                    overflow: auto;
                    background: var(--im-bg-quaternary);
                    gap: 1px;
                    display: grid;
                    grid-template-columns: repeat(7, 1fr);
                    list-style: none;
                    margin: 0;
                    padding: 0;

                    > li {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: var(--im-bg-primary);
                        text-align: center;
                        cursor: pointer;
                        color: var(--im-text-primary);

                        &.sun {
                            color: #dc3535;
                        }

                        &.sat {
                            color: #0075f8;
                        }

                        &:hover {
                            background: var(--im-bg-tertiary);
                        }

                        &.today {
                            outline: 1px solid var(--im-accent-secondary);
                        }

                        &.unfocused {
                            color: var(--im-fill-primary);
                        }

                        &.selected {
                            background: var(--im-accent-primary);
                            color: var(--im-white-primary);
                        }
                    }
                }
            }

            > div[data-role='footer'] {
                border-top: 1px solid var(--im-border-secondary);
                padding: calc(16px * 0.5);
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;

                > button {
                    background: var(--im-accent-primary);
                    color: var(--im-white-primary);
                    height: var(--im-component-height-default);
                    font-size: var(--im-font-size-default);
                    border: 0;
                    padding: 0px calc(16px * 0.5);
                    cursor: pointer;
                }
            }
        }
    }
}