.nav_dropdown {
    > .header {
        display: grid;
        grid-template-columns: 1fr min-content;
        align-items: center;

        ion-icon {
            align-self: center;
            transition-duration: 0.25s;
        }
    }

    > .body {
        display: none;
        border-bottom-left-radius: var(--border-radius-small);
        border-bottom-right-radius: var(--border-radius-small);
        background-color: var(--background-1);
    }
}

.nav_dropdown:hover {
    > .header {
        transform: var(--transform-scale-x);

        ion-icon {
            rotate: 90deg;
            transition-duration: 0.25s;
        }
    }

    > .body {
        display: grid;
    }
}

@media only screen and (max-width: 500px) {
    .nav_dropdown > .header ion-icon {
        margin-right: var(--padding-mobile);
    }
}