.tool-tabs {
    width: var(--main-100);
    margin: 0 0 10px
}

.tool-tabs .tool {
    position: relative;
    width: 20%;
    overflow: hidden;
    padding: 0 2px;
    border-radius: 4px;
    border-bottom: 2px solid transparent
}

.tool-tabs .tool:first-child {
    padding: 0 2px 0 0
}

.tool-tabs .tool .link {
    width: var(--main-100);
    padding: 4px 0;
    overflow: hidden;
    text-align: var(--main-center);
    background: #f5f5f5
}

li.tool.profile.float-left.active {
    border-bottom-color: #2e74ff
}

li.tool.story.float-left.active {
    border-bottom-color: #a419ff
}

li.tool.reel.float-left.active {
    border-bottom-color: #ff744b
}

li.tool.video.float-left.active {
    border-bottom-color: #ec353f
}

li.tool.photo.float-left.active {
    border-bottom-color: #00ae4b
}

.tool-tabs .tool .link .icon {
    display: block;
    margin: var(--auto-margin);
    clear: both;
    width: 30px;
    height: 30px;
    background: url(../images/sprite-image-3.svg) -5px -5px no-repeat
}

.tool-tabs .profile .link .icon {
    background-position: -5px -5px
}

.tool-tabs .story .link .icon {
    background-position: -5px -165px
}

.tool-tabs .reel .link .icon {
    background-position: -5px -125px
}

.tool-tabs .video .link .icon {
    background-position: -5px -45px
}

.tool-tabs .photo .link .icon {
    background-position: -5px -85px
}

.tool-tabs .tool .link .name {
    width: var(--main-100);
    display: inline-block;
    clear: both;
    white-space: nowrap;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    text-transform: capitalize;
}

.dark-mode .tool-tabs .tool .link {
    background: #0a0a0a
}