styles.scss

// Font stack

$font-stack: 'Lora', serif;

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: $font-stack;
}

// ~~~~~~~~~~

// Theme

$emerald-800: #065f46;
$emerald-700: #047857;
$emerald-600: #059669;
$emerald-500: #10b981;
$emerald-400: #34d399;

$amber-800: #92400e;
$amber-600: #d97706;
$amber-400: #fbbf24;
$amber-200: #fde68a;

// ~~~~~~~~~~

.add-book-overlay {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: rgba($color: gray, $alpha: 0.5);

    display: flex;
    justify-content: center;
    align-items: center;
}

.add-book-form {
    width: clamp(280px, 90%, 540px);
    height: clamp(320px, 70%, 520px);
    background-color: azure;
    border-radius: 20px;
    border: solid 4px lightgray;
    padding: 8% 2%;
    margin: 4%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8%;
}

@mixin form-fields {
    width: 80%;
    
    & > * {
        font-size: min(26px, 2.6vmax);
        font-weight: 550;
    }
}

.form-input {
    @include form-fields();

    display: flex;
    flex-direction: column;
}

.form-checkbox {
    @include form-fields();

    display: flex;
    justify-content: space-between;

    & > input {
        width: clamp(16px, 15%, 44px);
    }
}

.form-actions {
    @include form-fields();

    height: 30%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20%;
}

.confirm-form-btn {
    background-color: $emerald-400;
    color: white;
    border-radius: 5px;
    box-shadow: 0px 4px 5px gray;
    border: none;
    width: clamp(120px, 55%, 200px);
    height: clamp(40px, 35%, 84px);

    &:hover {
        color: black;
    }

    &:active {
        background-color: $amber-600;
        color: white;
        box-shadow: none;
    }
}

.cancel-form-btn {
    background-color: lightgray;
    color: black;

    border-radius: 3px;
    box-shadow: 0px 4px 5px gray;
    border: none;
    width: clamp(90px, 35%, 150px);
    height: clamp(28px, 28%, 80px);

    &:hover {
        color: $emerald-600;
    }

    &:active {
        background-color: $amber-800;
        color: white;
        box-shadow: none;
    }
}

// ~~~~~~~~~~

div.add-btn {
    width: 100%;
    height: 100%;
    
    display: flex;
    align-items: center;
    justify-content: center;

    button {
        width: 200px;
        height: 75px;
        font-size: min(20px, 2vmax);
        font-weight: 520;
        border-radius: 30px;
        box-shadow: none;
        border: none;
        background-color: $emerald-400;
        color: white;

        &:hover {
            color: black;
        }

        &:active {
            background-color: $amber-600;
            color: white;
        }
    }
}

h1.top-bar {
    font-size: clamp(30px, 2.8vmax, 38px);
    font-weight: 850;
    text-align: center;
}

// ~~~~~~~~~~

.container {
    height: 100%;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 15fr 1fr;
}

@mixin on-grid($row, $row-span: 1, $col, $col-span: 1) {
    grid-column: $col / span $col-span;
    grid-row: $row / span $row-span;
}

.header {
    @include on-grid(1, 1, 1, 1);
    
    background-color: $emerald-800;
}

.main {
    @include on-grid(2, 1, 1, 1);

    background-color: $emerald-700;
    overflow: auto;
    
    .main-grid {
        margin: 8px;
        height: 90%;
        display: grid;
        justify-items: center;
        justify-content: center;
        align-items: center;
        grid-template-columns: repeat(auto-fill, minmax(250px, 400px));
        grid-template-rows: minmax(250px, 250px);
        grid-auto-rows: minmax(250px, 250px);
        gap: 16px;
    }
}

.footer {
    @include on-grid(3, 1, 1, 1);

    background-color: $emerald-500;

}

// ~~~~~~~~~~

// Cards

$side-color: $amber-400;

.card {
    width: clamp(200px, 80%, 350px);
    height: 250px;
    background-color: silver;
    border-radius: 20px;

    display: grid;
    grid-template-columns: 1fr 15fr;
    grid-template-rows: 2fr 5fr 3fr;

    .side-color {
        grid-column: 1 / span 1;
        grid-row: 1 / span 3;

        background-color: $side-color;
    }

    .title {
        grid-column: 2 / span 1;
        grid-row: 1 / span 1;

        padding: 3%;
        font-size: min(22px, 2.5vmax);
        font-weight: 600;
        font-style: italic;
    }

    .content {
        grid-column: 2 / span 1;
        grid-row: 2 / span 1;

        padding: 1%;
        font-size: min(20px, 2vmax);
        font-weight: 520;
    }

    .actions {
        grid-column: 2 / span 1;
        grid-row: 3 / span 1;
        padding: 6%;

        display: flex;
        flex-direction: row-reverse;
        gap: 4%;
    }
}

.card-action-delete {
    width: clamp(40px, 20%, 100px);
    height: auto;
    padding: 0;
    
    button {
        width: 100%;
        height: 100%;
        cursor: pointer;
        border: none;
        border-radius: 10px;
        padding: 0;

        &:hover, &:active {
            background-color: red;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }
}

.card-action-read {
    width: clamp(40px, 20%, 100px);
    height: auto;
    padding: 0;
    
    button {
        width: 100%;
        height: 100%;
        cursor: pointer;
        border: none;
        border-radius: 10px;
        padding: 0;

        &:hover, &:active {
            background-color: $amber-600;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }
}