@import '../../styles/variables';

.footer {
    color: $brand-grey-light;
    width: 100%;
    text-align: center;
    margin-top: $spacer;
    padding-top: $spacer;
    padding-bottom: $spacer;
    align-self: flex-end;

    > div {
        align-self: flex-end;

        @media screen and (min-width: $break-point--small) {
            text-align: left;
            display: flex;
            justify-content: space-between;
        }
    }

    &,
    small {
        font-size: $font-size-mini;
    }

    a {
        color: inherit;

        &:hover,
        &:focus {
            color: $brand-grey;
        }
    }

    svg {
        display: inline-block;
        width: $font-size-large;
        height: $font-size-large;
    }
}

.links {
    margin-top: $spacer / 2;

    @media screen and (min-width: $break-point--small) {
        text-align: right;
        margin-top: 0;
    }

    a {
        margin: 0 $spacer / 2;
        display: inline-block;

        &:last-child {
            margin-right: 0;
        }
    }
}

.stats {
    text-align: center;
    margin-bottom: $spacer * $line-height;
    font-size: $font-size-small;

    p {
        margin-bottom: $spacer / 4;
    }

    p:last-child {
        margin-bottom: 0;
    }
}

.aicommons {
    svg {
        width: 100px;
        height: auto;
        vertical-align: middle;
        margin-top: -.05rem;
        margin-left: $spacer / 6;
        fill: currentColor;
    }

    a {
        &:hover,
        &:focus {
            svg {
                fill: $brand-pink;
            }
        }
    }
}
