@import "variables";
@import "commons";
@import "mixins";

.notification {
    position: relative;
}

.stream {
    position: relative;
    &__notification {
        position: relative;

        &--icon {
            position: absolute;
            top: 5px;
            left: 43px;
            text-align: center;
            width: 20px;
            // outline: 1px dotted greenyellow;
        }

        &--label {
            margin: 0 10px 0 $avatar-column-space;
            padding-top: 5px;
        }


        &:not(:last-child) {
            border: solid #06070b;
            border-width: 0 0 1px 0;
        }
    }

    &__link {
        color: $status-links-color;
    }

    &__status {
        display: block;
        // opacity: 0.65;
    }
}

.followed {
    color: $boost-color;
}

$acccount-info-left: 70px;
.follow-account {
    padding: 5px;
    height: 60px;
    width: calc(100%);
    overflow: hidden;
    display: block;
    position: relative;
    text-decoration: none;

    &__avatar {
        float: left;
        margin: 0 0 0 10px;
        width: 45px;
        height: 45px;
        border-radius: 2px;
    }
    
    &__display-name {
        position: absolute;
        top: 7px;
        left:  $acccount-info-left;
        color: whitesmoke;      
    }

    &:hover &__display-name {
        text-decoration: underline;
    }

    &__acct {
        position: absolute;
        top: 27px;
        left: $acccount-info-left;
        font-size: 13px;
        color: $status-links-color;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        width: calc(100% - #{$acccount-info-left});
    }
}

.follow_request {
    width: calc(100% - #{$acccount-info-left});
    margin-left: $acccount-info-left;

    &__link {
        display: inline-block;
        width: calc(50%);
        padding: 2px;

        text-align: center;
        color: rgb(182, 182, 182);
        transition: all .2s;

        // outline: 1px dotted greenyellow;

        &--check {
            &:hover {
                color: greenyellow;
            }
        }

        &--cross {
            &:hover {
                color: orangered;
            }
        }
    }

    &__icon {
        text-align: center;
    }
}