/**
 * 이 파일은 아이모듈의 일부입니다. (https://www.imodules.io)
 *
 * 캘린더 엘리먼트 스타일을 정의한다.
 *
 * @file /app/resources/styles/Calendar.css
 * @author sungjin <esung246@naddle.net>
 * @license MIT License
 * @modified 2026. 2. 11.
 */
body {
    &[data-frame='site'] {
        > div[data-role='absolutes'] {
            > div[data-role='absolute'] {
                &:has(> div[data-role='calendar']) {
                    background: var(--im-color-background-500);
                    display: block;
                    min-height: 100px;
                    min-width: 200px;
                    position: fixed;
                }

                > div[data-role='calendar'] {
                    font-family: var(--im-font-family-body);
                    font-size: var(--im-font-size-default);
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    background: var(--im-color-background-500);
                    border: 1px solid var(--im-color-accent-500);
                    height: 320px;
                    width: 320px;

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

                        > button {
                            background: transparent;
                            border: 0;
                            cursor: pointer;
                            color: var(--im-color-background);
                            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-color-background-500);
                            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-color-accent-500);

                            > 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-color-background-300);
                                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-color-background-300);
                            }

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

                                    &.selected {
                                        background: var(--im-color-accent-500);
                                        color: var(--im-color-accent-backward-500);
                                    }
                                }
                            }

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

                                > button {
                                    background: var(--im-color-accent-500);
                                    color: var(--im-color-accent-backward-500);
                                    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-color-background-300);
                            display: flex;
                            flex-direction: row;
                            align-items: stretch;
                            list-style: none;
                            gap: 1px;
                            border-bottom: 1px solid var(--im-color-background-300);
                            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-color-foreground-500);
                                background: var(--im-color-background-400);

                                &: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-color-background-300);
                            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-color-background-500);
                                text-align: center;
                                cursor: pointer;
                                color: var(--im-color-foreground-400);

                                &.sun {
                                    color: #dc3535;
                                }

                                &.sat {
                                    color: #0075f8;
                                }

                                &:hover {
                                    background: var(--im-color-background-400);
                                }

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

                                &.unfocused {
                                    color: var(--im-color-background-100);
                                }

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

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

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