portfolio/src/components/molecules/ProjectLinks.scss

@import 'variables';

.project__links {
    ul {
        padding: 0;
        margin-left: -($spacer / 2);
    }

    li {
        display: inline-block;
        margin-left: $spacer / 2;
        margin-bottom: $spacer / 2;
    }

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

    a {
        display: inline-block;
        color: $brand-cyan;
        text-align: center;
        border-radius: .25rem;
        padding: $spacer / 4 $spacer;
        transition-property: all;

        .icon {
            fill: $brand-cyan;
            opacity: .85;
        }

        &:hover,
        &:focus {
            background: $brand-light;
            transform: translate3d(0, -.2rem, 0);
            box-shadow: 0 6px 10px rgba($brand-main, .1), 0 10px 25px rgba($brand-main, .1);
        }

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