portfolio/src/components/molecules/ProjectLinks.scss

@import 'variables';

.project__links {
    ul {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
    }

    li {
        display: block;
        flex: 0 0 48%;
        margin-bottom: 2%;
    }

    .icon {
        margin-right: $spacer / 3;
        transition: .2s ease-out;
        margin-bottom: -.1rem;
    }

    a {
        display: block;
        background: darken($brand-light, 5%);
        text-align: center;
        border-radius: .25rem;
        padding: $spacer / 4;
        transition-property: all;
        color: $text-color;

        &:hover,
        &:focus {
            background: $brand-cyan;
            color: #fff;

            .icon {
                fill: #fff;
            }
        }

        &:active {
            transition: none;
            background: darken($brand-cyan, 5%);
        }
    }
}