@import 'variables';

.footer {
    margin-top: $spacer;
    margin-bottom: $spacer;
    font-size: $font-size-small;
    text-align: center;

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

    a {
        font-family: $font-family-button;
        font-weight: $font-weight-bold;
        text-transform: uppercase;
        color: $brand-grey-light;
        display: block;
        margin-bottom: $spacer / 2;

        @media (min-width: $break-point--small) {
            margin-bottom: 0;
        }

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

        svg {
            display: inline-block;
            margin-right: $spacer / 10;
            margin-bottom: -1px;
            fill: $brand-grey-light;
        }

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

.active {
    color: $brand-pink !important; // stylelint-disable-line declaration-no-important
}

.externalRepoName {
    font-family: $font-family-monospace;
    font-weight: $font-weight-base;
    font-size: $font-size-mini;
    text-transform: none;
    margin-left: $spacer / 4;
}
