/* =========================================================
   ATRA DESKTOP HEADER
   ATRA MEDIA NAVIGATION ITEM
========================================================= */

.atra-navigation__item--atra-media {
    position: relative;
}


/* =========================================================
   Navigation Link
========================================================= */

.atra-navigation__item--atra-media
.atra-navigation__link {
    position: relative;

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

    gap: 6px;

    white-space: nowrap;
}


/* =========================================================
   Indicator
========================================================= */

.atra-navigation__item--atra-media
.atra-navigation__link-indicator {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;

    color: currentColor;

    transition:
        transform 0.2s ease;
}


/* =========================================================
   Indicator Rotation
========================================================= */

.atra-navigation__item--atra-media:hover
.atra-navigation__link-indicator,

.atra-navigation__item--atra-media:focus-within
.atra-navigation__link-indicator {
    transform: rotate(180deg);
}


/* =========================================================
   Link Hover
========================================================= */

.atra-navigation__item--atra-media
.atra-navigation__link:hover {
    color: var(--atra-color-blue);
}


/* =========================================================
   Accessibility
========================================================= */

.atra-navigation__item--atra-media
.atra-navigation__link:focus-visible {
    outline: 2px solid var(--atra-color-blue);

    outline-offset: 4px;

    border-radius: 6px;
}


/* =========================================================
   Desktop Safety
========================================================= */

@media (max-width: 767px) {

    .atra-navigation__item--atra-media {
        position: static;
    }

}