/**
 * 이 파일은 아이모듈의 일부입니다. (https://www.imodules.io)
 *
 * 아이모듈 field 스타일시트를 정의한다.
 * 
 * @file /app/resources/styles/Fields.css
 * @author sungjin <esung246@naddle.net>
 * @license MIT License
 * @modified 2026. 2. 20.
 */
body {
    &[data-frame='site'],
    &[data-frame='context'] {
        a[data-role='button'],
        button[data-role='button'] {
            --im-button-background-default: var(--im-color-background-400);
            --im-button-background-hover: var(--im-color-background-300);
            --im-button-background-disabled: var(--im-color-background-300);
            --im-button-border-default: var(--im-color-background-200);
            --im-button-border-separator: var(--im-color-background-200);
            --im-button-color-default: var(--im-color-foreground-500);

            &.confirm,
            &.pressed {
                --im-button-background-default: var(--im-color-accent-500);
                --im-button-background-hover: var(--im-color-accent-600);
                --im-button-background-disabled: var(--im-color-accent-500);
                --im-button-border-default: transparent;
                --im-button-border-separator: var(--im-color-accent-600);
                --im-button-color-default: var(--im-color-accent-backward-500);
            }

            &.danger {
                --im-button-background-default: var(--im-color-danger-500);
                --im-button-background-hover: var(--im-color-danger-600);
                --im-button-background-disabled: var(--im-color-danger-500);
                --im-button-border-default: transparent;
                --im-button-border-separator: var(--im-color-danger-600);
                --im-button-color-default: var(--im-color-accent-backward-500);
            }

            &.action {
                --im-button-background-default: var(--im-color-action-500);
                --im-button-background-hover: var(--im-color-action-600);
                --im-button-background-disabled: var(--im-color-action-500);
                --im-button-border-default: transparent;
                --im-button-border-separator: var(--im-color-action-600);
                --im-button-color-default: var(--im-color-accent-backward-500);
            }

            &.begining {
                --im-button-background-default: var(--im-color-begining-500);
                --im-button-background-hover: var(--im-color-begining-600);
                --im-button-background-disabled: var(--im-color-begining-500);
                --im-button-border-default: transparent;
                --im-button-border-separator: var(--im-color-begining-600);
                --im-button-color-default: var(--im-color-accent-backward-500);
            }

            height: var(--im-component-height-default);
            font-family: var(--im-component-font-family);
            font-size: var(--im-component-font-size-default);
            line-height: var(--im-component-line-height);
            color: var(--im-button-color-default);
            border: var(--im-component-border-weight) solid var(--im-button-border-default);
            border-radius: var(--im-component-border-radius);
            padding: calc((var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2);
            position: relative;
            cursor: pointer;
            background: var(--im-button-background-default);
            overflow: hidden;
            z-index: 0;

            &:has(> i):has(> span) {
                display: inline-flex;
                flex-direction: row;
                gap: var(--im-component-gap-default);

                > i {
                    width: var(--im-component-line-height);
                    height: var(--im-component-line-height);
                }
            }

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

            &[disabled] {
                cursor: not-allowed;
                opacity: 0.6;
                background: var(--im-button-background-disabled) !important;

                &.loading {
                    position: relative;

                    &::before {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        background: var(--im-button-background-disabled) !important;
                        z-index: 1;
                        content: ' ';
                        top: 0;
                        left: 0;
                    }

                    &::after {
                        position: absolute;
                        height: 100%;
                        aspect-ratio: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        top: 0;
                        left: 50%;
                        translate: -50% 0;
                        font-family: moimz;
                        content: '\efff';
                        z-index: 5;
                        color: inherit;
                        animation: mi-loading 2s infinite linear;
                    }
                }
            }
        }

        div[data-role='buttons'] {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            justify-content: center;
            gap: var(--im-component-gap-default);

            &.left {
                justify-content: flex-start;
            }

            &.center {
                justify-content: center;
            }

            &.right {
                justify-content: right;
            }

            > span[data-role='space'] {
                flex-grow: 1;
            }
        }

        div[data-role='field'] {
            > div[data-role='help'] {
                display: block;
                padding-block: var(--im-component-gap-small);
                color: var(--im-color-foreground-300);
                font-family: var(--im-component-font-family);
                font-size: var(--im-component-font-size-small);
                box-sizing: border-box;
            }

            > input,
            > textarea {
                width: 100%;
                height: var(--im-component-height-default);
                font-family: var(--im-component-font-family);
                font-size: var(--im-component-font-size-default);
                line-height: var(--im-component-line-height);
                color: var(--im-color-foreground-500);
                background: var(--im-color-background-500);
                border: var(--im-component-border-weight) solid var(--im-color-background-300);
                border-radius: var(--im-component-border-radius);
                padding: calc((var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2);
                resize: none;
                position: relative;
                overflow: hidden;
                vertical-align: top;

                &:focus {
                    border-color: var(--im-color-accent-500);
                }

                &::after {
                    position: absolute;
                    z-index: 1;
                    border: 1px solid transparent;
                    width: calc(100% - var(--im-component-border-weight) * 2);
                    height: calc(100% - var(--im-component-border-weight) * 2);
                    top: var(--im-component-border-weight);
                    left: var(--im-component-border-weight);
                    border-radius: var(--im-component-border-radius-inner);
                    content: ' ';
                }

                &::placeholder {
                    color: var(--im-color-foreground-300);
                }
            }

            > textarea {
                height: auto;
            }

            &.error {
                > div[data-role='help'] {
                    color: var(--im-color-danger-500);
                }

                > input,
                > textarea,
                > button {
                    border-color: var(--im-color-danger-500);
                }
            }

            &[data-field='date'] {
                display: flex;
                flex-direction: row;
                position: relative;
                max-width: calc(var(--im-component-height-default) * 5);

                > input {
                    flex-grow: 1;
                    flex-basis: 0;
                    border-right: 0;

                    &[type='date'] {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                        display: none;
                    }
                }

                > label {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: calc(100% - var(--im-component-height-default));
                    height: var(--im-component-height-default);
                    line-height: var(--im-component-line-height);
                    color: var(--im-color-foreground-500);
                    background: var(--im-color-background-500);
                    vertical-align: top;
                    border: var(--im-component-border-weight) solid transparent;
                    border-radius: var(--im-component-border-radius);
                    padding: calc(
                        (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2
                    );
                    background-clip: content-box;
                    font-size: var(--im-component-font-size-default);
                    font-family: var(--im-component-font-family);
                }

                &:has(> input:focus) {
                    > label {
                        display: none;
                    }
                }

                > button {
                    width: calc(var(--im-component-height-default));
                    height: calc(var(--im-component-height-default));
                    line-height: var(--input-line-height);
                    padding-block: calc(
                        (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2
                    );
                    background: var(--im-color-accent-500);
                    color: var(--im-color-accent-backward-500);
                    border: var(--im-component-border-weight) solid var(--im-color-accent-500);

                    > i {
                        font-family: moimz;
                        font-style: normal;
                        font-size: calc(var(--im-component-height-default) / 2);

                        &::before {
                            content: '\e791';
                        }
                    }
                }
            }

            &[data-field='check'],
            &[data-field='radio'] {
                > label {
                    display: block;
                    cursor: pointer;
                    font-family: var(--im-component-font-family);
                    font-size: var(--im-component-font-size-default);
                    line-height: var(--im-component-line-height);
                    padding-block: calc((var(--im-component-height-default) - 1lh) / 2);
                    padding-right: 0;
                    width: fit-content;
                    color: var(--input-color-default);

                    > input {
                        position: relative;
                        width: var(--im-component-line-height);
                        height: var(--im-component-line-height);
                        cursor: pointer;
                        vertical-align: top;
                        margin-right: var(--im-component-gap-default);
                        appearance: none;

                        &::before {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            content: ' ';
                            box-sizing: border-box;
                            border: var(--im-component-border-weight) solid var(--im-color-background-300);
                            background: var(--im-color-background-500);
                            z-index: 1;
                        }

                        &::after {
                            position: absolute;
                            top: var(--im-component-border-weight);
                            left: var(--im-component-border-weight);
                            width: calc(100% - var(--im-component-border-weight) * 2);
                            height: calc(100% - var(--im-component-border-weight) * 2);
                            content: ' ';
                            box-sizing: border-box;
                            border: 1px solid transparent;
                            border-radius: var(--im-component-border-radius-inner);
                            z-index: 2;
                        }

                        &:focus {
                            &::before {
                                border-color: var(--im-color-accent-500);
                            }

                            &:checked {
                                &::after {
                                    border-color: var(--im-color-accent-backward-400);
                                }
                            }
                        }

                        &[type='checkbox'] {
                            &:checked::before {
                                border-color: var(--im-color-accent-500);
                                background: var(--im-color-accent-500);
                                color: var(--im-color-accent-backward-500);
                                border-radius: var(--im-component-border-radius);
                                font-family: moimz;
                                content: '\e404';
                                font-size: calc(1lh * 0.8);
                                text-align: center;
                                line-height: calc(
                                    var(--im-component-line-height) - var(--im-component-border-weight) * 2
                                );
                            }
                        }

                        &[type='radio'] {
                            &::before,
                            &::after {
                                border-radius: 50%;
                            }

                            &:checked {
                                &::before {
                                    border: calc(var(--im-component-line-height) / 2 - 4px) solid
                                        var(--im-color-accent-500);
                                    background: var(--im-color-accent-backward-500);
                                }
                            }
                        }
                    }
                }

                > div[data-role='help'] {
                    padding-left: var(--input-font-weight);
                }

                &.error {
                    > label {
                        color: var(--im-color-danger-500);

                        > input {
                            &::before {
                                border-color: var(--im-color-danger-500);
                            }
                        }
                    }
                }
            }

            &[data-field='select'] {
                position: relative;

                > select {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    z-index: 1;
                    display: none;
                }

                > button {
                    width: 100%;
                    height: var(--im-component-height-default);
                    font-family: var(--im-component-font-family);
                    font-size: var(--im-component-font-size-default);
                    line-height: var(--im-component-line-height);
                    color: var(--im-color-foreground-500);
                    background: var(--im-color-background-500);
                    border: var(--im-component-border-weight) solid var(--im-color-background-300);
                    border-radius: var(--im-component-border-radius);
                    position: relative;
                    font-size: 0;
                    padding: 0;
                    display: flex;
                    flex-direction: row;
                    text-align: left;
                    align-items: stretch;

                    > span {
                        flex-grow: 1;
                        box-sizing: border-box;
                        vertical-align: top;
                        height: calc(var(--im-component-height-default) - var(--im-component-border-weight) * 2);
                        font-family: var(--im-component-font-family);
                        font-size: var(--im-component-font-size-default);
                        line-height: var(--im-component-line-height);
                        color: var(--im-color-foreground-500);
                        padding: calc(
                            (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2
                        );
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    > i {
                        flex-shrink: 0;
                        font-size: var(--im-component-font-size-default);
                        width: calc(var(--im-component-height-default) - var(--im-component-border-weight) * 2);
                        height: calc(var(--im-component-height-default) - var(--im-component-border-weight) * 2);
                        line-height: var(--im-component-line-height);
                        padding: calc(
                            (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2
                        );
                        text-align: center;
                        font-family: moimz;
                        font-style: normal;

                        &::before {
                            content: '\e234';
                        }
                    }

                    &:focus {
                        border-color: var(--im-color-accent-500);
                    }
                }

                > ul {
                    display: 'block';
                    list-style: none;
                    width: 100%;
                    max-height: inherit;
                    box-sizing: border-box;
                    border: var(--im-component-border-weight) solid var(--im-color-accent-500);
                    background: var(--im-color-background-500);
                    border-radius: var(--im-component-border-radius);
                    color: var(--im-color-foreground-500);

                    > li {
                        width: 100%;
                        box-sizing: border-box;
                        vertical-align: top;
                        font-size: var(--im-component-font-size-default);
                        font-family: var(--im-component-font-family);
                        line-height: var(--im-component-line-height);
                        height: calc(var(--im-component-height-default) - var(--im-component-border-weight) * 2);
                        padding: calc(
                            (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2
                        );
                        cursor: pointer;

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

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

                &.expand {
                    > button {
                        border-color: var(--im-color-accent-500);

                        > i {
                            &::before {
                                content: '\e233';
                            }
                        }
                    }

                    &.top {
                        > button {
                            border-bottom-left-radius: 0px;
                            border-bottom-right-radius: 0px;
                        }

                        > ul {
                            border-top: 0px;
                            border-top-left-radius: 0px;
                            border-top-right-radius: 0px;
                        }
                    }

                    &.bottom {
                        > button {
                            border-top-left-radius: 0px;
                            border-top-right-radius: 0px;
                        }

                        > ul {
                            border-bottom: 0px;
                            border-bottom-left-radius: 0px;
                            border-bottom-right-radius: 0px;
                        }
                    }
                }

                &.error {
                    > button {
                        border-color: var(--im-color-danger-500);
                    }
                }
            }

            &[data-field='file'] {
                display: flex;
                flex-direction: row;
                position: relative;
                align-items: stretch;

                > label {
                    flex-grow: 1;
                    flex-shrink: 1;
                    height: var(--im-component-height-default);
                    font-family: var(--im-component-font-family);
                    font-size: var(--im-component-font-size-default);
                    line-height: var(--im-component-line-height);
                    color: var(--im-color-foreground-500);
                    background: var(--im-color-background-500);
                    border: var(--im-component-border-weight) solid var(--im-color-background-300);
                    border-radius: var(--im-component-border-radius);
                    padding: calc(
                        (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2
                    );
                    border-right: 0;
                    overflow: hidden;

                    &:focus {
                        border-color: var(--im-color-accent-500);
                    }
                }

                > button {
                    flex-basis: auto;
                    flex-shrink: 0;
                    flex-grow: 0;
                    min-width: 0;
                }

                > input {
                    position: absolute;
                    opacity: 0;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    cursor: pointer;
                }
            }

            &[data-field='display'] {
                > div {
                    display: block;
                    width: 100%;
                    height: var(--im-component-height-default);
                    font-family: var(--im-component-font-family);
                    font-size: var(--im-component-font-size-default);
                    line-height: var(--im-component-line-height);
                    padding-block: calc((var(--im-component-height-default) - 1lh) / 2);
                    color: var(--im-color-foreground-500);
                }
            }

            &[data-field='input'] + &[data-field='input'] {
                margin-top: 5px;
            }
        }
    }
}