@use 'sass:color';

@use 'toast.scss';
@use 'modal-dialog.scss';
@use 'calendar.scss';

$dark-theme: false !default;

$color-1: #B29B89;
$color-2: #89B29B;
$color-3: #9B89B2;

$text-color: color.adjust($color-1, $lightness: -30%);
$text-highlight: color.adjust($color-1, $lightness: +30%);
$link-color: color.adjust($color-3, $lightness: -25%);
$link-hover-color: color.adjust($color-3, $lightness: +20%);

@if $dark-theme {
    $text-color: color.adjust($color-1, $lightness: -10%);
    $text-highlight: color.adjust($color-1, $lightness: +10%);
    $link-color: color.adjust($color-3, $lightness: -5%);
    $link-hover-color: color.adjust($color-3, $lightness: +10%);

    $color-1: color.adjust($color-1, $lightness: -47%);
    $color-2: color.adjust($color-2, $lightness: -47%);
    $color-3: color.adjust($color-2, $lightness: -47%);
}

* {
    margin: 5px;
    padding: 0px;
}

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

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

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

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

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

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

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

    img {
        border: 0px;
    }

    .header-container {
        display: flex;
        flex-direction: row;
        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 {
            align-self: flex-end;

            .create-recipe {
                border: 0.1em solid $color-3;
                padding: 2px 8px 2px 8px;
                border-radius: 0.5em;
            }
        }

        #select-website-language {
            padding: 5px;
        }
    }

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

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

            .recipe-item {
                white-space: preserve nowrap;
                padding: 4px;
                // 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: 4px;
                    border: 0.1em solid $color-3;

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

        .content {
            flex-grow: 1;

            margin-left: 0px;

            background-color: $color-2;
            border: 0.1em solid $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($color-3, $lightness: +30%);
                margin-top: 0px;
                margin-bottom: 0px;
            }

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

            .ingredient {
                border: 0.1em solid color.adjust($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;
                }
            }
        }

        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;
        //     }
        // }
    }
}

// Customize some form elements.
#toggle-theme {
    // font-size: 17px;
    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: $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: $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);
    }
}