/*
 * The friend requests tab of the friend bar (AIR friend_request_tab_xml / friend_requests_tab_xml): a 127 x 36 tab in
 * the request yellow, and above it the bubble (the friend request bubble skin with its down pointer). One request:
 * 139 wide, the title, the close button, accept and profile as 96 x 27 shiny buttons and the decline link. Several:
 * 222 wide, rows of 50 alternating #ab8710 / #bd9c2a with the head, name, decline link and an 80 x 22 accept button,
 * then the decline-all link and the green accept-all button between #564620 rules.
 */
.friend-bar .friend-bar-requests {
    position: relative;
    z-index: 25;
    flex: 0 0 127px;
    width: 127px;
    height: 36px;
}

.friend-bar .friend-bar-requests > .friend-bar-item.friend-bar-request {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 127px;
    height: 36px;
    min-height: 36px;
    padding: 0 6px 0 38px;
    color: #fff;
    cursor: pointer;
    text-align: left;
}

.friend-bar .friend-bar-requests .friend-bar-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-bar .friend-bar-requests > .friend-bar-request:not(.is-single) {
    padding-right: 22px;
}

.friend-bar .friend-bar-requests > .friend-bar-request:hover .friend-bar-text {
    text-decoration: underline;
}

.friend-bar-requests-icon {
    position: absolute;
    top: -3px;
    left: 5px;
    max-width: 31px;
    max-height: 34px;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.friend-bar-requests-head {
    position: absolute;
    bottom: 2px;
    left: 4px;
    width: 30px;
    height: 30px;
    overflow: hidden;
}

/* friend_requests_tab badge_counter: a red (#de4537) style 7 border over the tab's top right. */
.friend-bar-requests-counter {
    position: absolute;
    top: -9px;
    right: 9px;
    min-width: 18px;
    height: 20px;
    padding: 0 4px;
    border: 1px solid #000;
    border-radius: 4px;
    background: #de4537;
    box-shadow: inset 0 0 0 1px #f08a73;
    color: #fff;
    font-size: 12px; /* badge_counter: u_bold 12 */
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.friend-bar-requests-bubble {
    position: absolute;
    bottom: 46px;
    left: -6px;
    z-index: 100;
    box-sizing: border-box;
    border: solid transparent;
    border-width: 5px 5px 6px;
    border-image: url("@/assets/images/friend-request/bubble.png") 5 5 6 fill / 5px 5px 6px stretch;
    color: #fff;
    font-family: Ubuntu, sans-serif;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.friend-bar-requests-bubble::after {
    position: absolute;
    bottom: -14px;
    left: 50px;
    width: 13px;
    height: 9px;
    content: "";
    background: url("@/assets/images/friend-request/bubble_pointer_down.png") no-repeat;
}

.friend-bar-requests-bubble.is-single {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 139px;
    padding: 2px 4px 4px;
    gap: 3px;
}

.friend-bar-requests-bubble.is-list {
    width: 222px;
    padding: 2px 4px 6px;
}

.friend-bar-requests-bubble button {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: Ubuntu, sans-serif;
    cursor: pointer;
}

.friend-bar-requests-title {
    align-self: stretch;
    min-height: 17px;
    padding: 2px 22px 4px 1px;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
}

.friend-bar-requests-bubble .friend-bar-requests-close {
    position: absolute;
    top: -2px;
    right: -1px;
    width: 19px;
    height: 20px;
    background: url("@/assets/images/friend-request/close_default.png") no-repeat;
}

.friend-bar-requests-bubble .friend-bar-requests-close:hover {
    background-image: url("@/assets/images/friend-request/close_hover.png");
}

.friend-bar-requests-bubble .friend-bar-requests-close:active {
    background-image: url("@/assets/images/friend-request/close_pressed.png");
}

/* habbo_skin_button_shiny_thick (container_button style 3) with a bold black caption. */
.friend-bar-requests-bubble .friend-bar-requests-shiny {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 96px;
    height: 27px;
    padding: 0 0 0 2px;
    gap: 3px;
    border: 5px solid transparent;
    border-image: url("@/assets/images/friend-request/button_shiny_default.png") 5 fill / 5px stretch;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.friend-bar-requests-bubble .friend-bar-requests-shiny:hover {
    border-image-source: url("@/assets/images/friend-request/button_shiny_hover.png");
}

.friend-bar-requests-bubble .friend-bar-requests-shiny:active {
    border-image-source: url("@/assets/images/friend-request/button_shiny_pressed.png");
}

.friend-bar-requests-bubble .friend-bar-requests-shiny.is-small {
    justify-content: center;
    width: 80px;
    height: 22px;
    padding: 0;
    /* button_accept: a plain style 3 button, 12 px regular. */
    font-size: 12px;
    font-weight: 400;
}

.friend-bar-requests-accept-icon {
    flex: 0 0 16px;
    height: 13px;
    background: url("@/assets/images/friend-request/accept.png") no-repeat;
}

.friend-bar-requests-profile-icon {
    flex: 0 0 16px;
    height: 11px;
    background: url("@/assets/images/friend-request/profile.png") center no-repeat;
}

.friend-bar-requests-bubble .friend-bar-requests-link {
    /* link_reject u_small / text_discard font_size 10 u_regular: 10 px regular, underlined. */
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    text-decoration: underline;
}

/* click_area_discard_all: font_size 11 u_bold, underlined. */
.friend-bar-requests-bubble .friend-bar-requests-footer .friend-bar-requests-link {
    font-size: 11px;
    font-weight: 700;
}

.friend-bar-requests-bubble .friend-bar-requests-link:hover {
    color: #ffe66a;
}

.friend-bar-requests-list {
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid #564620;
    border-bottom: 1px solid #564620;
}

.friend-bar-requests-row {
    position: relative;
    height: 50px;
    background: #ab8710;
}

.friend-bar-requests-row:nth-child(even) {
    background: #bd9c2a;
}

.friend-bar-requests-bubble .friend-bar-requests-row-head {
    position: absolute;
    top: 3px;
    left: 1px;
    width: 39px;
    height: 44px;
    overflow: hidden;
}

.friend-bar-requests-bubble .friend-bar-requests-row-name {
    position: absolute;
    top: 6px;
    left: 43px;
    max-width: 138px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    line-height: 17px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-bar-requests-bubble .friend-bar-requests-row-name:hover {
    text-decoration: underline;
}

.friend-bar-requests-row .friend-bar-requests-link {
    position: absolute;
    top: 25px;
    left: 42px;
}

.friend-bar-requests-row .friend-bar-requests-shiny.is-small {
    position: absolute;
    top: 22px;
    right: 6px;
}

.friend-bar-requests-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 7px;
    gap: 4px;
}

/* button_accept_all: button_thick style 5, color 0x77bf43: the grey habbo_skin_button_shiny_thick multiplied by
   0x77bf43, white button_shiny_bold 12 px caption. */
.friend-bar-requests-bubble .friend-bar-requests-accept-all {
    width: 171px;
    height: 28px;
    border: 5px solid transparent;
    border-image-source: var(--habbo-skin-shiny-thick-tint-77bf43);
    border-image-slice: 5 fill;
    border-image-width: 5px;
    border-image-repeat: stretch;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.friend-bar-requests-bubble .friend-bar-requests-accept-all:hover {
    border-image-source: var(--habbo-skin-shiny-thick-tint-77bf43-hover);
}

.friend-bar-requests-bubble .friend-bar-requests-accept-all:active {
    border-image-source: var(--habbo-skin-shiny-thick-tint-77bf43-pressed);
}