@import "../core/theme.scss";

/* FOOTER */
.footer {
    background-color: map-get($grays, '800');
    padding: 6rem 0;
    text-align: center;
    margin-top: 5rem;
    width: 100%;

    &.footer--fixed {
        bottom: 0;
        position: fixed;
    }

    a {
        color: map-get($grays, '200');
        font-weight: bolder;
    }

    a:hover {
        color: map-get($grays, '400');
    }


    p {
        color: map-get($grays, '600');
    }

    ul {
        margin: 0.5rem 0; /* Remove the left margin seen in global style */
    }

    .footer__title {
        text-align: center;
        letter-spacing: 6px;
        position: relative;
        padding-bottom: 10px;
    }

    .footer__list-title {
        color: map-get($map: $grays, $key: '400');
        font-size: 75%;
        text-transform: uppercase;
        font-weight: bolder;

        &::after {
            content: '';
            display: block;
            width: 10%;
            margin: auto;
            border-bottom: 2px solid;
            border-color: #343b49;
        }
    }

    ul a .footer__list-item,
    .footer__list-item {
        margin: 0.1rem;
        color: map-get($grays, '600');
        transition: all var(--animation-duration);
        font-size: 75%;
        text-transform: uppercase;
    }
}