.dropdown {
    > label.item {
        display: grid;
        grid-template-columns: 1fr min-content;
        align-items: center;

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

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

        // Remove default padding and style applied to ul for bullets.
        padding: 0 var(--spacing-small);
        list-style: none;
    }
}

@media (max-width: 600px) {
    .dropdown {
        > label.item > ion-icon {
            margin-right: var(--padding-mobile);
        }
    }
}

// Use a toggle for menu entries on mobile and intermediary devices.
@media (max-width: 1023px) {
    .dropdown {
        > input:checked + label {
            color: var(--highlight-hover);

            + ul {
                display: grid;
            }
        }
    }
}

// Use a hover state for menu entries on large screens.
@media (min-width: 1024px) {
    .dropdown:hover {
        > label.item {
            transform: var(--transform-scale-x);

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

        > ul {
            display: grid;
        }
    }
}