@import url(../../style.css);

:root {
    --color-aside-border: #DBDBDB;
}
.section {
    margin: var(--space-sm);
}
h1 {
    color: var(--color-primary);
}

h2 {
    font-size: var(--fs-lg);
    width: 50%;
    text-align: center;
}

/* header */

header {
    width: 100%;
    margin-bottom: auto;
    display: flex;
    border-bottom: 1px solid var(--color-gray-light);
    grid-area: header;
}

.header-actions {
    margin-left: auto;
    margin-right: 16rem;
}

header > * {
    padding: 1rem;
}

.header-link {
    color: var(--color-black);
    padding-right: 1rem;
}

.header-actions > button {
    box-shadow: none;
    padding: 1rem;
}

.sub-header {
    font-weight: var(--fw-bold);
}

/* logo */
.logo-container {
    margin-left: 16rem;
}

.logo {
    width: 5rem;
}

.logo-text {
    color: var(--color-white);
    background-color: var(--color-primary-darker);
    padding: 0.5rem;
    margin: 0.2rem;
    border-radius: 2px;
}

/* Body */

body {
    display: flex;
}

.wrapper {
    display: grid;
    width: 100%;
    grid-gap: 20px;
    grid-template-columns: 13rem 1fr;
    grid-template-areas:
    "header header"
    "main main"
    "main main"
    "main main"
    "footer footer";
}

.component-wrapper {
    display: grid;
    width: 100%;
    grid-gap: 20px;
    grid-template-columns: 13rem 1fr;
    grid-template-areas:
    "header header"
    "aside main"
    "aside main"
    "aside main"
    "aside footer";
}

aside {
    padding: 0 5rem;
    grid-area: aside;
    border-right: 2px solid var(--color-aside-border);
    width: max-content;
}

aside a {
    color: var(--color-gray-darker);
}

main {
    width: 100%;
    grid-area: main;
}

.main-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.main-container > * {
    margin: var(--space-lg);
}

.main-container > h1 {
    font-size: 4rem;
    color: var(--color-black);
}

.divider {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid var(--color-aside-border);
}

a {
    color: inherit;
}

.btn {
    padding: var(--space-sm) var(--space-xlg);
}

li {
    margin: 2rem 0;
}

.primary-button-container > *,
.secondary-button-container > *,
.link-button-container > *,
.floating-button-container > *,
.icon-button-container > *,
.alert-container > *,
.footer-container > *,
.badge-container > *,
.modal-container > *,
.avatar-container > *,
.snackbar-container > *,
.image-container > *,
.input-container > *,
.text-container > *,
.navigation-container >*,
.text-wrapper > *,
.list-container > * {
    margin: var(--space-sm);
}

.flex-row-wrap-center {
    padding: var(--space-md);
    margin: var(--space-sm)
}

/* footer */
footer {
    margin-top: auto;
    width: 100%;
    grid-area: footer;
}

.footer-container i {
    padding: var(--space-sm);
    color: var(--color-gray-darker);
}

.footer-text {
    padding: 0;
    margin: 0;
}

.highlight-text {
    color: var(--color-primary-xtra-darker);
}

.text-wrapper {
    width: 50rem;
}

.list-wrapper {
    padding: var(--space-sm);
    width: 50rem;
}