/*
 * Hosted Site Menus
 */

.hsm-menu {
    width: 100%;
    box-sizing: border-box;
}

.hsm-menu-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}


/*
 * BUTTON STYLE
 *
 * Background color becomes the individual
 * button background.
 */
.hsm-buttons {
    background: transparent;
}

.hsm-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 18px;

    background: var(--hsm-bg);
    color: var(--hsm-text);

    text-decoration: none;

    border: none;
    border-radius: 4px;

    line-height: 1.2;

    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

.hsm-buttons a:hover,
.hsm-buttons a:focus {
    color: var(--hsm-text);
    opacity: 0.85;
    transform: translateY(-1px);
}


/*
 * REGULAR LINK STYLE
 *
 * Background becomes the menu bar background.
 */
.hsm-links {
    padding: 12px 18px;
    background: var(--hsm-bg);
}

.hsm-links a {
    color: var(--hsm-text);
    text-decoration: none;
}

.hsm-links a:hover,
.hsm-links a:focus {
    color: var(--hsm-text);
    text-decoration: underline;
}


/*
 * Small screens
 */
@media (max-width: 600px) {

    .hsm-menu-inner {
        gap: 8px;
    }

    .hsm-buttons a {
        padding: 9px 14px;
    }

}