@use 'sass:list';

@use 'mixins';
@use 'reset';
@use 'header';
@use 'sidebar';
@use 'vars';

html {
    background: black;
}
body {
    font-size: 1.22em;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    color: white;
    background: radial-gradient(ellipse at 00% 100%, rgba(48, 25, 25, 0.3) 0%, rgba(52, 8, 8, 0.4) 35%, rgba(0, 0, 0, 0.4) 100%);


    @include mixins.heading;
}

h1, h2, h3, h4, h5, h6 {
    @include mixins.heading;
}

.wrapper {
    width: 90vw;
    height: 90vh;
    display: grid;
    grid-template-rows: 100px 1fr;
    grid-template-columns: 2fr 6fr;
    grid-gap: 20px;
}

header, aside, main {
    background: rgba(12, 12, 12, 1);
    position: relative;
    $shadow: ();
    @for $i from 1 through 6 {
        $shadow: list.append($shadow, drop-shadow(-#{$i}px #{$i}px 0 hsl(0deg, 0%, 10%)));
    }
    filter: list.join($shadow, drop-shadow(-0px 6px 20px hsl(0deg, 0%, 3%)));
}

aside {
    z-index: 10;
}

main {
    z-index: 8;
    grid-row: 2/3;
    grid-column: 2/3;
}

input {
    padding: 3px;
}

.item-search-card {
    display: flex;
    flex-direction: row;
}

input.header-input {
    text-decoration: underline 1px rgba(255, 255, 255, 0.33);
    border: none;
    color: white;

    &-1, &-2 {
        font-weight: 800;
    }
    &-3, &-4 {
        font-weight: 500;
    }
    &-5, &-6 {
        font-weight: 200;
    }

    &-1 {
        font-size: 2em;
    }
    &-2 {
        font-size: 1.5em;
    }
    &-3 {
        font-size: 1.25em;
    }
    &-4 {
        font-size: 1em;
    }
    &-5 {
        font-size: 0.9em;
    }
    &-6 {
        font-size: 0.75em;
    }

    @include mixins.heading;
}

img {
    overflow: hidden;
}