.app-head {
    /* POSITION */
    left: 0;
    right: 0;
    position: fixed;

    /* DISPLAY */
    display: flex;
    margin: 16px 250px;
    align-items: center;
    justify-content: space-between;

    /* STYLING */
    padding: 16px;
    border-radius: 8px;
    background-color: var(--background-900);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);

    .head-container {
        /* DISPLAY */
        display: flex;
        align-items: center;
        justify-content: center;

        &.brand .brand-container {
            /* DISPLAY */
            display: flex;
            align-items: center;
            justify-content: center;

            /* EXTRA */
            transition: var(--transition-global);

            &:hover,
            &:focus-visible {
                /* DISPLAY */
                opacity: 0.8;
            }

            .container-img {
                /* DISPLAY */
                width: 36px;
                height: 36px;
                aspect-ratio: 1/1;
            }
        }
        
        &.links {
            /* DISPLAY */
            gap: 20px;

            .link-container {
                /* POSITION */
                position: relative;

                /* DISPLAY */
                gap: 6px;
                display: flex;
                align-items: center;
                justify-content: center;

                /* STYLING */
                padding: 10px 0;
                color: var(--text-50);
                text-decoration: none;

                /* EXTRA */
                transition: var(--transition-global);

                &:hover,
                &:focus-visible {
                    /* STYLING */
                    color: var(--text-200);

                    &.dropdown .dropdown-container {
                        /* DISPLAY */
                        display: flex;
                    }
                }
                
                .container-img {
                    /* DISPLAY */
                    width: 16px;
                    height: 16px;
                    aspect-ratio: 1/1;
                }
                
                &.dropdown {
                    /* STYLING */
                    cursor: default;
                    
                    .dropdown-container {
                        /* POSITION */
                        top: 100%;
                        left: 25%;
                        position: absolute;

                        /* DISPLAY */
                        width: 150px;
                        display: none;

                        /* STYLING */
                        padding: 25px;
                        border-radius: 8px;
                        background-color: var(--background-900);
                        border: 1px solid var(--background-700);
                    }
                }
            }
        }

        &.action .action-container {
            /* DISPLAY */
            gap: 6px;
            display: flex;
            align-items: center;
            justify-content: center;

            /* STYLING */
            font-weight: 500;
            padding: 10px 16px;
            border-radius: 6px;
            color: var(--text-50);
            text-decoration: none;
            background-color: var(--primary-500);

            /* EXTRA */
            transition: var(--transition-global);

            &:hover,
            &:focus-visible {
                /* DISPLAY */
                opacity: 0.8;
            }

            .container-img {
                /* DISPLAY */
                width: 16px;
                height: 16px;
                aspect-ratio: 1/1;
            }
        }
    }
}