@import '../environment';

main
{
    .projects
    {
        margin-top: steps(3.5);

        @include for-at-least-normal-tablets
        {
            margin-top: steps(4);
        }
    }

    .project
    {
        padding-top: steps(17);
        margin-bottom: steps(8);

        background-color: $color-background-normal;

        &:last-child
        {
            margin-bottom: steps(9);
        }

        @include for-at-least-normal-tablets
        {
            padding-top: steps(27);
            margin-bottom: steps(12);

            &:last-child
            {
                margin-bottom: steps(8);
            }
        }

        a
        {
            @include baseline-box(22px, steps(3), 0.7px, steps(2), steps(2));

            position: relative;
            left: steps(1);
            top: steps(5);

            display: block;
            padding-left: steps(3);
            padding-right: steps(7);

            background: $color-background-lighter;
            text-decoration: none;

            @include for-at-least-normal-tablets
            {
                @include baseline-box(24px, steps(4), -0.1px, steps(3.5), steps(3));

                left: steps(2);
                top: steps(8);

                padding-left: steps(5);
                padding-right: steps(10);
                
                color: $color-text-darker;
            }

            &::after
            {
                @include transition("opacity, transform");

                content: svg-image-data-url("arrow-right", $color-link-normal);

                position: absolute;
                top: 50%;
                right: steps(3);

                width: steps(4);
                height: steps(4);
                margin-top: steps(-2);

                @include for-at-least-normal-tablets
                {
                    right: steps(5);

                    width: steps(4);
                    height: steps(4);
                    margin-top: steps(-2) - 3px;

                    opacity: 0;
                    transform: translateX(steps(-5));
                }
            }

            &:hover,
            &:focus
            {
                color: $color-link-normal;

                &::after
                {
                    opacity: 1;
                    transform: none;
                }
            }
        }
    }
}
