// colors
$black: black;
$white: white;
$green: #21D26E;
$gray: #D0D0D0;
$dark-gray: #A9A9A9;
$light-gray: #efefef; // not colors
$box-shadow: 0.1em 0.1em 1em 0.1em $gray;
$border-radius: 0.5em;
$rounded: 10000px;
$insta-post-gutter: 1.5em;

.stream-react-components {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    input {
        background-color: $light-gray;
        font-size: 1rem;
        color: $black;
        border: none;
        padding: 0.5em 1em;
        border-radius: $rounded;
        display: block;
        width: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    &.feed,
    .feed {
        padding: 1em;
        margin: auto;
        background-color: $light-gray;
    }

    &.activity,
    .activity {
        overflow: scroll;
        background-color: $white;
        padding: 1em;
        margin: 1em auto;
        border-radius: 0.5em;
        box-shadow: $box-shadow;
        transition: transform 0.5s;
        cursor: pointer;
        max-width: 30em;
        animation: fade 1s;
        opacity: 1;

        &:hover {
            transform: scale(1.1);
        }
    }

    button {
        font-size: 1rem;
        background-color: $green;
        color: white;
        padding: 1em 2em;
        cursor: pointer;
        border-radius: 0.5em;
        border: none;
        margin: 0 0.25em;
        box-shadow: $box-shadow;
        font-weight: bolder;

        &.cancel {
            background-color: $gray;
        }

        &.hollow {
            box-shadow: none;
            background-color: transparent;
            border: 2px solid $green;
            color: $green;
        }

        &.link {
            background-color: transparent;
            border: none;
            color: $green;
            box-shadow: none;
        }
    }

    .user-profile {
        height: 3.5em;
        width: 3.5em;
        border-radius: $rounded;

        &.large {
            height: 6em;
            width: 6em;
        }

        &.small {
            height: 2em;
            width: 2em;
        }

        &.ultra-small {
            height: 1.5em;
            width: 1.5em;
        }
    }

    .user-profile-group {
        display: grid;
        grid-template-areas: 'image name' 'image info';
        justify-content: start;
        align-items: center;

        .name {
            grid-area: name;
            font-weight: bolder;
        }

        .info {
            grid-area: info;
            font-size: 0.75em;
        }

        .user-profile {
            grid-area: image;
            margin-right: 1em;
        }
    }

    .insta-post {
        max-width: 100%;
        width: 560px;
        background-color: $white;
        border-radius: $border-radius;
        box-shadow: $box-shadow;
    }

    .insta-post-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 $insta-post-gutter;
        margin: $insta-post-gutter 0;
    }

    .insta-post-content {
        p {
            padding: 0 $insta-post-gutter;
        }
    }

    .reactions {
        border-top: 2px solid $gray;
        margin: 0 $insta-post-gutter;
        padding: $insta-post-gutter 0;
        display: flex;

        > *:not(:last-child) {
            margin-right: 1em;
        }

        > :first-child {
            flex-grow: 1;
        }
    }

    .reaction {
        display: flex;
        align-items: center;
        color: $dark-gray;

        i {
            font-size: 1.5em;
            margin-right: 0.5em;
        }
    }

    .input-box-with-user {
        display: flex;
        margin: $insta-post-gutter;

        > *:first-child {
            margin-right: 0.5em;
        }
    }

    .username-with-comment {
        margin-top: 0.5em;
        // margin: 0 $insta-post-gutter;
        .username {
            color: $green;
            font-weight: bolder;
        }

        .comment {}
    }

    .comment-container {
        display: flex;
        margin: 1em $insta-post-gutter;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;

        img {
            margin-right: 1em;
        }
    }
}
@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}