@use 'sass:color';

$dark-theme: false !default;

@use 'constants' as consts with ($dark-theme: $dark-theme);
@use 'calendar';
@use 'toast';
@use 'modal-dialog';
@use 'mixins';

a {
    color: consts.$link-color;
    text-decoration: none;

    &:hover {
        color: consts.$link-hover-color;
    }
}

body {
    display: flex;
    flex-direction: column;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: consts.$text-color;
    background-color: consts.$color-1;
    margin: 0px;

    .user-message {
        font-weight: bold;
    }

    .drag-handle {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: bottom;
        background-color: blue;
    }

    .footer-container {
        margin: consts.$margin;
        align-self: center;
        font-size: 0.7em;
    }

    /// HEADER ///
    .header-container {
        margin: calc(2 * consts.$margin);

        display: flex;
        align-items: flex-end;
        justify-content: space-between;

        .title {
            font-size: 180%;
            font-style: italic;

            .logo {
                width: 50px;
                height: 50px;

                vertical-align: bottom;
                margin: 0px 10px 0px 0px;
            }
        }

        .header-menu {
            .user-menu {
                margin: consts.$margin;
            }

            #select-website-language {
                margin: consts.$margin;
                padding: consts.$margin;
            }
        }
    }

    .main-container {
        display: flex;
        flex-direction: row;

        #recipes-list {
            margin: calc(2 * consts.$margin);

            ul {
                padding-left: 20px;
            }

            hr {
                margin-top: 10px;
                margin-bottom: 10px;
                height: 1px;
                color: consts.$color-3;
                background: consts.$color-3;
                font-size: 0;
                border: 0;
            }

            .recipe-item {
                white-space: preserve nowrap;
                padding: 2px;
                // Transparent border: to keep same size than '.recipe-item-current'.
                border: 0.1em solid rgba(0, 0, 0, 0);

                &.current {
                    white-space: preserve nowrap;
                    padding: 2px;
                    border: 0.1em solid consts.$color-3;

                    border-radius: 0.5em;
                    color: consts.$text-highlight;
                    background-color: consts.$color-2;
                }
            }
        }

        .content {
            margin: calc(2 * consts.$margin);

            flex-grow: 1;

            background-color: consts.$color-2;
            border: 0.1em solid consts.$color-3;
            border-radius: 1em;
            padding: 0.8em;

            h1 {
                text-align: center;
            }
        }

        #hidden-templates {
            display: none;
        }

        #recipe-edit {
            display: grid;

            .drag-handle {
                cursor: move;
            }

            .group {
                border: 0.1em solid color.adjust(consts.$color-3, $lightness: +30%);
                margin-top: 0px;
                margin-bottom: 0px;
            }

            .step {
                border: 0.1em solid color.adjust(consts.$color-3, $lightness: +30%);
                margin-top: 0px;
                margin-bottom: 0px;
            }

            .ingredient {
                border: 0.1em solid color.adjust(consts.$color-3, $lightness: +30%);
                margin-top: 0px;
                margin-bottom: 0px;
            }

            .dropzone {
                height: 10px;
                margin-top: 0px;
                margin-bottom: 0px;

                background-color: white;

                &.active {
                    background-color: blue;
                }

                &.hover {
                    background-color: red;
                }
            }
        }

        #recipe-view {
            .recipe-description {
                @include mixins.markdown;
            }
        }

        #logs {
            .current {
                font-weight: bold;
            }

            .line {
                padding: 3px;

                &.odd {
                    background-color: consts.$color-1;
                }
            }

            .date-time {
                font-weight: bold;
            }

            .level {
                padding: 2px;
                border-radius: 4px;

                &.ERROR {
                    color: white;
                    background-color: red;
                }

                &.WARN {
                    color: black;
                    background-color: orange;
                }

                &.INFO {
                    color: white;
                    background-color: blue;
                }

                &.DEBUG {
                    color: white;
                    background-color: green;
                }

                &.TRACE {
                    color: black;
                    background-color: yellow;
                }
            }

            .thread-name,
            .thread-id {
                font-style: italic;
                font-size: 80%;
            }
        }

        // #dev-panel {
        // }

        form {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 3px;

            input,
            button {
                // background-color: rgb(52, 40, 85);
                border-width: 1px;
                // border-color: white;
                // color: white;
            }
        }

        #sign-up form {
            display: grid;
            grid-template-columns: auto 1fr auto;

            input[type="submit"] {
                grid-column: 2
            }
        }

        #sign-in form {
            input[type="submit"] {
                grid-column: 2
            }
        }

        #ask-reset-password form {
            grid-template-columns: auto 1fr auto;

            input[type="submit"] {
                grid-column: 2
            }
        }

        #user-edit form {
            grid-template-columns: auto 1fr auto;

            input[type="submit"] {
                grid-column: 2
            }
        }

        // #sign-in {

        // }

        // #user-edit {
        //     .label-name {
        //         grid-column: 1;
        //         grid-row: 1;
        //     }

        //     .input-name {
        //         grid-column: 2;
        //         grid-row: 1;
        //     }

        //     .label-password-1 {
        //         grid-column: 1;
        //         grid-row: 2;
        //     }

        //     .input-password-1 {
        //         grid-column: 2;
        //         grid-row: 2;
        //     }

        //     .label-password-2 {
        //         grid-column: 1;
        //         grid-row: 3;
        //     }

        //     .input-password-2 {
        //         grid-column: 2;
        //         grid-row: 3;
        //     }

        //     .button-save {
        //         grid-column: 2;
        //         grid-row: 4;
        //         width: fit-content;
        //         justify-self: flex-end;
        //     }
        //}
    }
}

.tag {
    border: 0.1em solid consts.$color-3;
    border-radius: 0.5em;
    background-color: consts.$color-1;
    margin: consts.$margin;
    padding: consts.$margin;
}

textarea,
input {
    margin: consts.$margin;
    padding: calc(consts.$margin / 2) calc(2 * consts.$margin);

    background-color: consts.$color-1;
    border: solid 1px consts.$color-3;
    color: consts.$text-color;

    &:focus {
        outline: none;
        background-color: consts.$color-2;
        box-shadow: 0 0 5px color.adjust(consts.$color-3, $lightness: -20%);
    }
}

select {
    margin: consts.$margin;
    padding: calc(consts.$margin / 2) calc(2 * consts.$margin);

    background-color: consts.$color-1;
    border: solid 1px consts.$color-3;
    color: consts.$text-color;

    option {
        color: inherit;
        background-color: consts.$color-1;
    }
}

input[type="button"],
input[type="submit"],
.button {
    margin: consts.$margin;
    padding: calc(consts.$margin / 2) calc(2 * consts.$margin);

    border: 0.1em solid consts.$color-3;
    border-radius: 0.5em;
    background-color: consts.$color-2;
    box-shadow:
        -5px -5px 4px 3px color.adjust(consts.$color-2, $lightness: -4%) inset,
        5px 5px 4px 3px color.adjust(consts.$color-2, $lightness: 4%) inset;
    cursor: pointer;

    color: consts.$link-color;

    &:hover {
        color: consts.$link-hover-color;
    }
}

/// Tooltip ///
.tooltip {
    position: relative;

    .tooltiptext {
        color: consts.$text-color;

        visibility: hidden;
        width: 120px;
        background-color: consts.$color-1;
        text-align: center;
        padding: consts.$margin 0;

        border: 0.1em solid consts.$color-3;
        border-radius: 0.5em;

        position: absolute;
        z-index: 1;

        cursor: default;

        top: -(consts.$margin);
        left: 100%;
        margin-left: consts.$margin;
    }

    &:hover .tooltiptext {
        visibility: visible;
    }

    .tooltiptext::after {
        content: " ";
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -(consts.$margin);
        border-width: consts.$margin;
        border-style: solid;
        border-color: transparent consts.$color-3 transparent transparent;
    }
}

/// Toggle theme (dark, light).
#toggle-theme {
    margin: consts.$margin;

    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 3.5em;
    height: 2em;

    // Hide default HTML checkbox
    input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: consts.$color-2;
        transition: .4s;
        border-radius: 30px;
        margin: 0px;
    }

    .slider::before {
        position: absolute;
        content: "";
        height: 1.4em;
        width: 1.4em;
        border-radius: 20px;
        left: 0.3em;
        bottom: 0.3em;
        background-color: consts.$color-1;
        box-shadow: inset 2px -2px 0 1.8px #ffffff;
        transition: .4s;
    }

    input:checked+.slider:before {
        background-color: yellow;
        box-shadow: none;
        transform: translateX(1.5em);
    }
}