/* ========================================
   NAVBAR
   ======================================== */

.site-navbar {
    width: 100%;
    height: var(--navbar-height);
    background-color: var(--color-surf);
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
}


/* ========================================
   NAVBAR CONTAINER
   ======================================== */

.site-navbar__container {
    height: 4cqh;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ========================================
   NAVIGATION MENU
   ======================================== */

.site-navbar__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
}


/* ========================================
   NAVIGATION ITEM
   ======================================== */

.site-navbar__item {
    display: flex;
    align-items: center;
}


/* ========================================
   NAVIGATION LINK
   ======================================== */

.site-navbar__link {
    position: relative;

    display: inline-flex;
    align-items: center;

    height: var(--navbar-height);

    padding: 0 var(--spacing-2);

    color: var(--color-text);

    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    text-decoration: none;

    transition:
        color var(--transition-normal);
}


/* ========================================
   LINK HOVER
   ======================================== */

.site-navbar__link:hover {
    color: var(--color-primary);
}


/* ========================================
   UNDERLINE
   ======================================== */

.site-navbar__link::after {
    content: "";

    position: absolute;

    left: var(--spacing-2);
    right: var(--spacing-2);
    bottom: 0;

    height: 2px;

    background-color: var(--color-primary);

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform var(--transition-normal);
}


/* ========================================
   SHOW UNDERLINE
   ======================================== */

.site-navbar__link:hover::after {
    transform: scaleX(1);
}


/* ========================================
   SHOPPING CART
   ======================================== */

.site-navbar__cart {
    position: relative;
}


/* Link */

.site-navbar__cart-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: var(--navbar-height);
}


/* ========================================
   CART ICONS
   ======================================== */

.site-navbar__cart-icon {
    width: 20px;
    height: 20px;

    object-fit: contain;

    transition:
        opacity var(--transition-normal);
}


/* Normal icon */

.site-navbar__cart-icon--default {
    opacity: 1;
}


/* Hover icon */

.site-navbar__cart-icon--hover {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    opacity: 0;
}


/* Swap icons */

.site-navbar__cart-link:hover
.site-navbar__cart-icon--default {
    opacity: 0;
}


.site-navbar__cart-link:hover
.site-navbar__cart-icon--hover {
    opacity: 1;
}


/* ========================================
   CART UNDERLINE
   ======================================== */

.site-navbar__cart-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background-color: var(--color-primary);

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform var(--transition-normal);
}


/* Show underline on hover */

.site-navbar__cart-link:hover::after {
    transform: scaleX(1);
}