.user-table th,
.user-table td {
    padding: 7px 18px;
}

.user-table tbody tr {
    height: 34px;
}

.user-table .row-actions {
    justify-content: flex-end;
    min-height: 24px;
}

.user-table .button-small {
    padding: 5px 8px;
}

.user-table th button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}

.user-table th button::after {
    content: "↕";
    color: #9aa69e;
    font-size: 10px;
    opacity: 0;
}

.user-table th button:hover::after,
.user-table th button:focus-visible::after {
    opacity: 1;
}

.user-table th[aria-sort="ascending"] button::after {
    content: "↑";
    color: var(--forest);
    opacity: 1;
}

.user-table th[aria-sort="descending"] button::after {
    content: "↓";
    color: var(--forest);
    opacity: 1;
}

.user-table th button:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}