/* Row actions — the small buttons at the right of a list row.

   These used to be copied into team, audience and admin_panel stylesheets, so
   they existed only on pages that happened to load one of those, and the copies
   had drifted apart. They belong to the product, not to a page, so they load
   with the app.

   Every row action is one shape: a 20px square that lifts on hover. The trash
   is the same button in red, not a different button — it used to be a larger
   icon in a taller box with a teal fill, sitting beside the others and matching
   none of them. */

.action-cell {
    opacity: 0;
    transition: all 0.1s;
    /* A row's actions stay on the row's line; a wrapped one lands under the
       row below it and reads as belonging to that row. */
    white-space: nowrap;
}

.list-item:hover .action-cell {
    opacity: 1;
}

.action,
.action-cell .delete-button,
.actions .delete-button {
    font-size: 13px;
    width: 20px;
    height: 20px;
    padding: 0;
    color: black;
    background: transparent;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s;
    margin: 0 3px;
    border: none;
    border-radius: 3px;
}

.action:hover,
.action-cell .delete-button:hover,
.actions .delete-button:hover {
    background: white;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.action .icon,
.action i,
.action-cell .delete-button i,
.actions .delete-button i {
    font-size: 13px;
    line-height: 20px;
    color: #5c6f6f;
}

/* Deleting is the one action that cannot be taken back, so it colours on hover
   rather than looking like the others right up to the click. */
.action-cell .delete-button:hover i,
.actions .delete-button:hover i,
.action.delete:hover i {
    color: #ee475b;
}

/* Nothing to delete, or not yours to delete. */
.action-cell .delete-button.disabled-trash,
.actions .delete-button.disabled-trash {
    cursor: default;
    opacity: 0.4;
}

.action-cell .delete-button.disabled-trash:hover,
.actions .delete-button.disabled-trash:hover {
    background: transparent;
    box-shadow: none;
}

.action-cell .delete-button.disabled-trash:hover i,
.actions .delete-button.disabled-trash:hover i {
    color: #5c6f6f;
}

.action button {
    border: none;
    background: none;
    display: inline-block;
}

.action-form {
    display: inline-block;
}