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

@font-face {
    font-family: Fira Code;
    font-weight: 200;
    src: url(FiraCode-Light.woff2) format("woff2");
}

@font-face {
    font-family: Fira Code;
    font-weight: 400;
    src: url(FiraCode-Regular.woff2) format("woff2");
}

@font-face {
    font-family: Fira Code;
    font-weight: 600;
    src: url(FiraCode-SemiBold.woff2) format("woff2");
}

@font-face {
    font-family: Fira Code;
    font-weight: 700;
    src: url(FiraCode-Bold.woff2) format("woff2");
}

$primary: #182430;
$background: darken($primary, 5%);
$background-container: lighten($primary, 10%);

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

html {
    font-size: 80%
}

a {
    color: lighten($primary, 40%);
    text-decoration: none;

    &:hover {
        color: lighten($primary, 60%);
    }
}

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

    font-family: Fira Code, Helvetica Neue, Helvetica, Arial, sans-serif;
    text-shadow: 2px 2px 2px rgb(0, 0, 0);
    // line-height: 18px;
    color: lighten($primary, 60%);
    background-color: $background;
    margin: 0px;

    .recipe-item {
        padding: 4px;
    }

    .recipe-item-current {
        padding: 3px;
        border: 1px solid lighten($primary, 30%);
    }

    .header-container {
        align-self: center;
    }

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

    .drag-handle {
        width: 20px;
        height: 20px;
        background-color: gray;
    }

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

        // #recipes-list {
        //     text-align: left;
        // }

        .content {
            flex-grow: 1;

            background-color: $background-container;
            border: 0.1em solid lighten($primary, 50%);
            padding: 0.5em;

            h1 {
                text-align: center;
            }

            .group {
                border: 0.1em solid lighten($primary, 30%);
            }

            .step {
                border: 0.1em solid lighten($primary, 30%);
            }

            .ingredient {
                border: 0.1em solid lighten($primary, 30%);
            }

            #hidden-templates {
                display: none;
            }
        }

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

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

        // #sign-in {

        // }
    }

    img {
        border: 0px;
    }
}