protected.layout.scss

@import "/src/shared/style/colors.scss";

.head-links {
    text-decoration: none;
    color: map-get($theme-colors, dark);
    font-weight: 500;
    margin-right: 20px;

    &:hover {
        color: map-get($theme-colors, primary);
    }

    &.active {
        color: map-get($theme-colors, primary);
        font-weight: 600;
    }
}

#navbar {
    padding: 1em !important;
}

// Add these styles to your protected.layout.scss
nav {
    border-radius: $border-radius $border-radius;
    padding: 0 !important;

    .head-links {
        text-decoration: none;
        color: map-get($theme-colors, "dark");
        padding: 8px 16px;
        margin: 0 4px;
        border-radius: 12px;
        transition: all 0.2s ease;

        &:hover {
            background-color: map-get($theme-colors, "bg-primary");
        }

        &.active {
            color: map-get($theme-colors, "primary");
            background-color: map-get($theme-colors, "primary-button");
        }
    }

    .dropdown-menu {
        border-radius: $border-radius;
        box-shadow: $box-shadow;
        border: none;
        padding: 8px;

        .dropdown-item {
            border-radius: 8px;
            padding: 8px 16px;

            &:hover {
                background-color: map-get($theme-colors, "bg-primary");
            }
        }
    }
}