.navigation-panel {

}

.navigation-panel .dropdown-links {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
    height: 96px;

    padding: 0 24px;
}

.navigation-panel .dropdown-links .dropdown-button {
    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: transparent;

    width: 100%;
    max-width: 312px;
    height: 48px;

    border: 1px solid var(--dusk);
    border-radius: 4px;

    padding: 10px 17px;

    font-style: normal;
    font-weight: 390;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.05em;
}

.navigation-panel .dropdown-links .dropdown-menu {
    width: 100%;
    max-width: 312px;

    border: 1px solid var(--dusk);
    border-radius: 4px;

    padding: 0;

    font-style: normal;
    font-weight: 390;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.05em;
}

.navigation-panel .nav-item {
    list-style: none;
}

.navigation-panel .dropdown-links .dropdown-menu a:is(.dropdown-link, .nav-link) {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 17px;

    width: 100%;
    height: 48px;
}

.navigation-panel .dropdown-links .dropdown-menu a:is(.dropdown-link, .nav-link):hover {
    background-color: var(--white-sand);
    color: var(--azamara-blue);
    fill: var(--azamara-blue);

    font-weight: 410;
}

.navigation-panel .dropdown-links .dropdown-menu a:is(.dropdown-link, .nav-link).active {
    background-color: var(--azamara-blue);
    color: var(--pure-white);
    fill: var(--pure-white);

    font-weight: 410;
    pointer-events: none;
}

.navigation-panel .vertical-links {
    display: none;
    flex-direction: column;
}

.navigation-panel .vertical-links a:is(.vertical-link, .nav-link) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    font-style: normal;
    font-weight: 390;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.025em;

    color: var(--azamara-blue);
    fill: var(--azamara-blue);

    height: 64px;
    border-bottom: 1px solid var(--light-dusk);

    padding: 12px 24px;

    transition: background-color .3s, font-weight .3s;
}

.navigation-panel .vertical-links > .nav-item:first-child :is(.vertical-link, .nav-link) {
    border-top: 1px solid var(--light-dusk);
}

.navigation-panel .vertical-links  > a:is(.vertical-link, .nav-link):first-child {
    border-top: 1px solid var(--light-dusk);
}

.navigation-panel .vertical-links a:is(.vertical-link, .nav-link):hover {
    background-color: var(--white-sand);
    font-weight: 410;
}

.navigation-panel .vertical-links a.active {
    font-weight: 410;
    background-color: var(--azamara-blue);
    color: var(--pure-white);
    fill: var(--pure-white);

    pointer-events: none;
}

/* -sm breakpoint */
@media (min-width: 576px) {
    .navigation-panel .dropdown-links {
        padding: 0 48px;
    }
}

/* -md breakpoint */
@media (min-width: 768px) {

}

/* -lg breakpoint*/
@media (min-width: 992px) {

}

/* -xl breakpoint */
@media (min-width: 1200px) {
    .navigation-panel .vertical-links {
        display: flex;
    }

    .navigation-panel .dropdown-links {
        display: none;
    }
}

/* -xxl breakpoint */
@media (min-width: 1400px) {

}