/* Styles for Tags List Page (tags/default/default.php) */

/* -- Link Base -- */
.tagLink {
    border: 1px solid var(--theme-color, #1370b5);
    transition: all 200ms;
    color: var(--theme-color, #1370b5);
    text-decoration: none;
    position: relative;
}

.tagLink:hover {
    background-color: var(--theme-color, #1370b5);
    color: #fff;
    text-decoration: none;
}

/* -- Tag With Count (Arrow Shape) -- */
.tagWithCount {
    align-items: center;
    border-left: 0;
    display: flex;
    padding: 0 .5rem 0 1rem;
    position: relative;
    line-height: 24px;
}

/* Pseudo-elements common styles */
.tagWithCount:after,
.tagWithCount:before {
    border: 1px solid var(--theme-color, #1370b5);
    content: "";
    position: absolute;
    top: 50%;
    transition: inherit;
}

/* Triangle (Arrow Head) */
.tagWithCount:before {
    border-bottom: 0;
    border-right: 0;
    height: 1.18rem;
    right: 100%;
    transform: translate(50%, -50%) rotate(-45deg);
    width: 1.18rem;
}

/* Dot (Circle) */
.tagWithCount:after {
    border-radius: 50%;
    height: .5rem;
    left: 0;
    transform: translateY(-50%);
    width: .5rem;
}

/* -- Hover States -- */

/* Fill triangle on hover */
.tagLink:hover.tagWithCount:before {
    background-color: var(--theme-color, #1370b5);
}

/* Keep dot white on hover */
.tagLink:hover.tagWithCount:after {
    background-color: #fff;
    border-color: #fff;
}

/* Invert counter span on hover */
.tagLink:hover.tagWithCount span {
    background-color: #fff;
    color: var(--theme-color, #1370b5);
}

/* -- Inner Elements -- */
.tagWithCount span {
    background: var(--theme-color, #1370b5);
    border-radius: 0.4rem;
    color: #fff;
    font-size: .7rem;
    line-height: 1.2;
    margin-left: .3rem;
    padding: .1rem .4rem;
    transition: inherit;
}

.tagElemnt {
    display: inline-block;
    margin: .5rem .5rem 0 1rem;
}

/* -- Scoped Overrides -- */
.easyblog-tags-index .border-bottom {
    border-bottom: 1px solid var(--theme-color, #1370b5) !important;
}