/*
 * Top-bar "+ Create" quick-create menu (public/js/nova-create-menu.js).
 * Colours follow the notification bell (nova-notifications.css) so the
 * button sits inside the admin chrome.
 */

.wo-create {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 0.375rem;
}

.wo-create-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    /* Nova brand colour vars hold the full component list (may include an
       alpha, e.g. "21, 43, 78, 0.85") — never append extra components. */
    background: rgba(var(--colors-primary-500, 34, 60, 96));
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.wo-create-button:hover {
    background: rgba(var(--colors-primary-600, 21, 43, 78, 0.85));
}

.wo-create-panel {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    min-width: 11rem;
    padding: 0.25rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.12);
    z-index: 50;
}

.wo-create-item {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    color: rgb(17 24 39);
    font-size: 0.8125rem;
    text-decoration: none;
    white-space: nowrap;
}

.wo-create-item:hover {
    background: rgb(243 244 246);
    color: rgba(var(--colors-primary-500, 34, 60, 96));
}