/* Fælles ikonknap: cirkel i hvile, vandret udvidelse med label ved hover/fokus. */
:where(.admin-expand-action, .profile-action, .back-to-top) {
    --action-size: 40px;
    --action-width: 190px;
    --action-label-width: 145px;
    display: inline-flex !important;
    width: var(--action-size) !important;
    min-width: var(--action-size) !important;
    max-width: none;
    height: var(--action-size) !important;
    min-height: var(--action-size) !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-xs);
    overflow: hidden;
    padding: 0 10px !important;
    border-radius: 999px;
    white-space: nowrap;
    will-change: width;
    transition:
        width var(--motion-duration) var(--motion-smooth),
        background-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

:is(.admin-expand-action, .profile-action, .back-to-top) {
    font-size: 14px;
    font-weight: 700;
}

/* Bordered icon actions have one pixel less inner width on each side. */
.admin-expand-action.admin-icon-action {
    padding-right: 9px !important;
    padding-left: 9px !important;
}

:where(.admin-expand-action, .profile-action, .back-to-top) svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:where(.admin-expand-action, .profile-action) .admin-action-label,
.back-to-top span {
    display: inline-block;
    flex: 0 0 auto;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-7px);
    transition:
        max-width var(--motion-duration) var(--motion-smooth),
        opacity .2s ease,
        transform var(--motion-duration) var(--motion-smooth);
}

:is(.admin-expand-action, .profile-action, .back-to-top):hover,
:is(.admin-expand-action, .profile-action, .back-to-top):focus-visible {
    /* The expanded state must beat the deliberately more specific resting
       widths used by login and table icon buttons. */
    width: var(--action-width) !important;
}

:is(.admin-expand-action, .profile-action):hover .admin-action-label,
:is(.admin-expand-action, .profile-action):focus-visible .admin-action-label,
.back-to-top:hover span,
.back-to-top:focus-visible span {
    max-width: var(--action-label-width);
    opacity: 1;
    transform: translateX(0);
}

.admin-expand-action .icon-refresh-arrows { stroke-width: 2.1; }
.admin-expand-action {
    --action-width: var(--admin-action-width, 220px);
    --action-label-width: var(--admin-action-label-width, 170px);
}
.profile-action { --action-width: var(--profile-action-width, 190px); }
.admin-search-action {
    --admin-action-width: 92px;
    --admin-action-label-width: 40px;
}
.back-to-top {
    --action-label-width: 132px;
    padding-right: 9px !important;
    padding-left: 9px !important;
}
.back-to-top svg { width: 22px; height: 22px; stroke-width: 2; }

/* Touch devices emulate :hover after a tap. Keep circular actions compact so
   their labels cannot remain open and push adjacent mobile controls around. */
@media (hover: none), (pointer: coarse) {
    :is(.admin-expand-action, .profile-action, .back-to-top):hover {
        width: var(--action-size) !important;
    }
    :is(.admin-expand-action, .profile-action):hover .admin-action-label,
    .back-to-top:hover span {
        max-width: 0;
        opacity: 0;
        transform: translateX(-7px);
    }
    :is(.admin-expand-action, .profile-action, .back-to-top):active {
        transform: scale(.96);
    }
}