@mixin applyInputStyles($backgroundColor) {

    background-color: $backgroundColor;
    border: none;

    border: 1px solid adjust-color($color: $backgroundColor, $saturation: 100%);
    border-radius: 2px;
}

body {

    margin: 0;
    padding: 0;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    min-width: 300px;
}

header {
    
    margin: 0;
    padding: 0;

    h1 {
        
        background-color: #0099ff;

        margin: 0;
        padding-top: 3vh;
        padding-bottom: 3vh;

        color: #fff;
        text-align: center;

        user-select: none;
        
    }
}

#root {

    display: flex;
    flex-direction: column;

    align-items: center;

    #library {
        
        min-height: 50vh;

        width: 100%;
        max-width: calc(250px * 4);
        padding: 5vh 5vw;
        
        display: flex;
        justify-content: space-around;

        flex-wrap: wrap;

        .book {

            background-color: #E3FDFD;
            
            font-family: 'Times New Roman', Times, serif;

            width: 236px;
            padding: 123px 0vw;

            display: flex;
            flex-direction: column;
            
            align-items: center;

            margin-bottom: 5vh;

            @mixin hxStyles() {

                margin: 0;
                text-align: center;
            }

            h3 {
                
                @include hxStyles()
            }

            h5 {

                @include hxStyles();

                margin-bottom: 2vh;
            }

            h4 {
                
                @include hxStyles();

                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                
                margin-bottom: 1vh;
            }

            button {

                height: 3vh;
                width: 80%;

                max-width: 126px;

                margin-top: 0.5vh;
                user-select: none;

                &.delete {

                    @include applyInputStyles(#F38181)
                }

                &.not-readed {

                    @include applyInputStyles(#FCE38A)
                }

                &.readed {

                    @include applyInputStyles(#95E1D3)
                }
            }
        }
    }

    .add-new-book {

        display: flex;
        flex-direction: column;

        align-items: center;

        h2 {

            width: 70%;

            padding-bottom: 1vh;
            text-align: center;

            border-bottom: 1px solid #393E46;

            user-select: none;
        }


        form {

            display: flex;
            flex-direction: column;

            input {

                width: 40vw;
                height: 4vh;

                margin-bottom: 1vh;

                box-sizing: content-box;
                outline: none;
                
                padding: 0;
                
                color: #fff;

                &::placeholder {

                    color: rgb(201, 201, 201);
                    user-select: none;
                }
            }

            input[type="text"] {

                @include applyInputStyles(#222831) 
            }

            input[type="number"] {

                @include applyInputStyles(#393E46)
            }

            input[type="submit"] {

                @include applyInputStyles(#00ADB5)
            }
        }
    }
}

footer {

    padding: 5vh 0vw 2vh 2vw;
}