@import "variables";

.action-bar {
    //outline: 1px solid greenyellow; // height: 20px;
    margin: 5px 0px 5px $avatar-column-space;
    padding: 0;
    font-size: 18px;
    height: 30px;
    position: relative;
    // transform: rotate(0.03deg);

    &__link {
        //outline: 1px solid greenyellow;
        color: $status-secondary-color;
        padding: 0 4px;

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

        &:not(:last-child) {
            margin-right: 8px;
        }

        &--reply {
            font-size: 20px;
        }

        &--boost {
            position: relative;
            bottom: -1px;
            // font-size: 22px;
        }

        &--fav {
            font-size: 17px;
        }
        
        &--bookmark {
            display: inline-block;  
            position: relative;
            padding: 0 8px;
            // bottom: -1px;
            font-size: 16px;
        }

        &--cw {
            position: relative;
            bottom: -2px;
            font-size: 22px;
        }

        &--more {
            position: absolute;
            right: 11px;
            // left: 155px;
            bottom: -2px;
        }
    }

    &__lock {       
        color: $status-secondary-color;
        width: 22px;

        &:not(:last-child) {
            margin-right: 15px;
        }
    }

    &__envelope {
        position: relative;
        top: 1px;
        color: $status-secondary-color;
        width: 22px;

        &:not(:last-child) {
            margin-right: 15px;
        }
    }
}

.boosted {
    color: $boost-color;

    &:hover {
        color: darken($boost-color, 10);
    }
}

.favorited {
    color: $favorite-color;

    &:hover {
        color: darken($favorite-color, 10);
    }
}

.bookmarked {
    color: $bookmarked-color;

    &:hover {
        color: darken($bookmarked-color, 10);
    }
}

@keyframes loadingAnimation {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes loadingAnimation {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes loadingAnimation {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes loadingAnimation {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.boosting,
.favoriting {
    -webkit-animation: loadingAnimation 1s infinite;
    -moz-animation: loadingAnimation 1s infinite;
    -o-animation: loadingAnimation 1s infinite;
    animation: loadingAnimation 1s infinite;
}