.ab-container {
    display: flex;
    width: 100%;
    height: 180px;
    border-radius: 0.75rem;
    background-color: #303030;
}

.ab-avatar-column {
    width: 134px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border-right: 2px solid black;*/
}

.author-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.ab-left {
    flex: 7;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    /*border-right: 2px solid black;*/
    padding: 8px 0px;
}

.ab-author-name {
    font-size: 1.5rem;
    line-height: 1.5;
    padding: 5px;
    /*border-bottom: 2px solid black;*/
    margin: 0;
}

.ab-author-description {
    font-size: 1rem;
    line-height: inherit;
    padding: 0px 5px;
}

.ab-right-wrapper {
    width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    box-sizing: border-box;
}

.ab-right {
    display: flex;
    flex-direction: column;
    width: 90%;
    height: 100%;
    background-color: #3E4042;
    border-radius: 0.75rem;
}

.ab-top-box {
    display: flex;
    flex: 0 0 40%;
    /*border-bottom: 2px solid black;*/
    justify-content: center;
    align-items: center;
}

.ab-top-inner {
    display: flex;
    width: 85%;
    height: 65%;
    border: 3px solid #7a7a7a;
    border-radius: 0.75rem;
    background-color: #555555;
}

.ab-top-left, .ab-top-right {
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 2px solid #7a7a7a;
    flex: 6;
    transition: background-color 0.3s ease, color 0.3s ease, fill 0.3s ease;
}

.ab-top-right {
    flex: 2.2;
    border-right: none; /* Remove border for the last column */
}

.ab-middle-box,
.ab-bottom-box {
    display: flex;
    flex: 0 0 23%;
    justify-content: space-between;
    align-items: center;
    /*border-bottom: 2px solid black;*/
}

.ab-middle-box:last-child,
.ab-bottom-box:last-child {
    border-bottom: none;
}

.ab-middle-left, .ab-bottom-left {
    flex: 8;
    font-size: 12px;
    padding-left: 15px;
}

.ab-middle-right, .ab-bottom-right {
    flex: 2;
    text-align: right;
    font-size: 12px;
    padding-right: 15px;
}

.ab-obserwuj-text {
    font-size: 12px;
    color: white;
    text-align: center;
    margin: 0;
}

.ab-author-stats-icon .ab-author-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.author-stats-follow {
    text-decoration: none;
    color: inherit;
}

.ab-author-stats-icon svg {
    width: 16px;
    height: 16px;
    fill: white;
    display: block;
    margin: auto;
}

.ab-top-left:hover, .ab-top-right:hover {
    background-color: #7a7a7a;
}

.ab-top-left:hover .ab-obserwuj-text,
.ab-top-right:hover .ab-obserwuj-text {
    color: #ffffff;
}

.ab-top-left:hover svg,
.ab-top-right:hover svg {
    fill: #ffffff;
}

/* Eye Icon Styles */
.ab-top-left .author-stats-text {
    display: flex;
    align-items: center;
    gap: 0.3rem; /* Adds spacing between the icon and text */
}

.ab-eye-icon {
    width: 16px; /* Adjust size as needed */
    height: 16px;
    fill: #ffffff; /* Default color */
    transition: fill 0.3s ease; /* Smooth transition for color */
}

.ab-top-left:hover .ab-eye-icon {
    fill: #ffffff; /* Corrected to transition to white */
}