@import "../styles";

.c-site-update {
    @apply flex relative;
    @apply mb-24;
    &:before {
        content: "";
        @apply absolute bg-borderColor7;
        width: 2px;
        top: -32px;
        left: 24px;
        bottom: -32px;
    }
    &:first-child {
        &:before {
            top: 43px;
        }
    }
    &:last-child {
        &:before {
            display: none;
        }
    }

    & > .c-icon,
    & > .c-exercise-icon,
    & > .c-track-icon,
    & > .c-concept-icon {
        @apply relative mr-24;
        @apply z-1;
        height: 50px;
        width: 50px;
    }
    & > .c-concept-icon {
        @apply bg-backgroundColorA;
    }

    & .content {
        @apply flex-grow;
    }
    & .standard {
        @apply flex items-center flex-grow;
        & .info {
            @apply mr-16;
            & .desc {
                @apply text-18 leading-150;
                & em {
                    @apply not-italic font-medium;
                }
                & a {
                    @apply font-semibold;
                    @apply border-b-1 border-textColor6;
                    &:hover {
                        @apply text-prominentLinkColor border-prominentLinkColor;
                    }
                }
            }

            & time {
                @apply text-14 leading-160 text-textColor6;
            }
        }

        & .c-faces {
            @apply flex-shrink-0 ml-auto;
            & .c-avatar {
                height: 32px;
                width: 32px;
            }
        }
    }

    & .expanded {
        @apply mt-20;
        @apply shadow-base rounded-8;
        @apply py-16 px-24;
        @apply bg-backgroundColorA;

        & .header {
            @apply flex items-center;
            @apply mb-12;
            & .c-icon {
                height: 48px;
                width: 48px;
                @apply mr-16;
            }

            & .title {
                @apply text-h4;
            }
            & .byline {
                @apply text-16 leading-180 text-textColor6;
                @apply flex items-center;
                & .c-avatar {
                    height: 24px;
                    width: 24px;
                    @apply mr-12;
                }
                & strong {
                    @apply font-medium text-textColor2;
                }
            }
        }
        & .description {
            @apply text-p-base not-last:mb-20;

            & p {
                @apply mb-8;
            }
            & ul {
                @apply list-disc pl-20;
                & p {
                    @apply mb-0;
                }
            }
        }
        & .pull-request {
            @apply flex items-center;
            @apply border-1 border-borderColor6;
            @apply py-16 px-32 mb-16;
            @apply rounded-8;

            & .c-icon {
                height: 42px;
                width: 42px;
                @apply mr-32;
            }
            & .pr-title {
                @apply text-h5 mb-4;
            }
            & .pr-details {
                @apply text-p-small text-textColor6;
                @apply mr-24;
            }
            & .merged {
                @apply ml-auto;
                & .c-icon {
                    height: 24px;
                    width: 24px;
                    @apply mr-12;
                }
                @apply flex items-center;
                @apply font-semibold text-darkSuccessGreen;
            }
        }
        & .c-exercise-widget {
            @apply border-1 border-borderColor6;
            @apply shadow-none;
        }
    }
}
